Geist UI

Page

Container of general for display page content.

General

The content will be displayed in the center.

Hello, Everyone.

This is a simulated page, you can click anywhere to close it.

Code Editor

() => {
  const Child = () => (
    <>
      <h2>Hello, Everyone.</h2>
      <p>This is a simulated page, you can click anywhere to close it.</p>
    </>
  )
  const [visible, setVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)} auto>Show Page</Button>
      <MockPage visible={visible} onClose={() => setVisible(false)}>
        <Page><Child /></Page>
      </MockPage>
    </>
  )
}

() => {
  const Child = () => (
    <>
      <h2>Hello, Everyone.</h2>
      <p>This is a simulated page, you can click anywhere to close it.</p>
    </>
  )
  const [visible, setVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)} auto>Show Page</Button>
      <MockPage visible={visible} onClose={() => setVisible(false)}>
        <Page><Child /></Page>
      </MockPage>
    </>
  )
}

Content

Add Header and Footer for better layout.

Header

Hello, Everyone.

This is a simulated page, you can click anywhere to close it.

Code Editor

() => {
  const [visible, setVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)} auto>Header & Footer</Button>
      <MockPage visible={visible} onClose={() => setVisible(false)}>
        <Page>
          <Page.Header>
            <h2>Header</h2>
          </Page.Header>
          <Page.Content>
            <h2>Hello, Everyone.</h2>
            <p>This is a simulated page, you can click anywhere to close it.</p>
          </Page.Content>
          <Page.Footer>
            <h2>Footer</h2>
          </Page.Footer>
        </Page>
      </MockPage>
    </>
  )
}

() => {
  const [visible, setVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)} auto>Header & Footer</Button>
      <MockPage visible={visible} onClose={() => setVisible(false)}>
        <Page>
          <Page.Header>
            <h2>Header</h2>
          </Page.Header>
          <Page.Content>
            <h2>Hello, Everyone.</h2>
            <p>This is a simulated page, you can click anywhere to close it.</p>
          </Page.Content>
          <Page.Footer>
            <h2>Footer</h2>
          </Page.Footer>
        </Page>
      </MockPage>
    </>
  )
}

APIs

`Page.Props`

Attribute	Description	Type	Accepted values	Default
render	render mode	PageRenderMode	-	`default`
dotBackdrop	show decorations in the background	`boolean`	-	`false`
dotSize	dot size in the background	`CSSProperties`	-	`1px`
dotSpace	space multiple between each dot	`number`	-	`1`
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

`Page.Header.Props`

Attribute	Description	Type	Accepted values	Default
center	align center	`boolean`	-	`false`
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

`Page.Content.Props`[alias: `Page.Body`]

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

`Page.Footer.Props`

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

`PageRenderMode`

type PageRenderMode =
  | 'default' // Normal rendering
  | 'effect' // Render after the first effect trigger
  | 'effect-seo' // like "effect", but prerender strings for SEO

Contributors

Geist is an open source project from the community.

Page

General

Hello, Everyone.

Content

Hello, Everyone.

APIs

Page.Props

Page.Header.Props

Page.Content.Props[alias: Page.Body]

Page.Footer.Props

PageRenderMode

`Page.Props`

`Page.Header.Props`

`Page.Content.Props`[alias: `Page.Body`]

`Page.Footer.Props`

`PageRenderMode`