Page

Vertical flow of page sections. It is the page container, so Cols and SettingsLayout inside it react to the page width instead of the viewport. With aside the page is a content column plus a rail; the shell around the page still owns the outer gutter and scrolling.

Import

import { Page } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/page.

Usage

<Page>
  <>
          <PageHeader>
            <PageHeaderTitle>Overview</PageHeaderTitle>
          </PageHeader>
          <Cols>
            <Panel title="Main" />
            <Panel title="Side" />
          </Cols>
        </>
</Page>

Props

Prop	Type	Default	Description
aside	ReactNode		A fixed column beside the page content, usually an Aside. The column draws a divider and the page background, never narrows the width the page container measures (so Cols inside the content react the same with or without it), and falls under the content…
asideWidth	string | number		Width of the aside column: a number is pixels, a string any CSS length. Default 20rem (320px at 16px).
asideSticky	boolean	false	Keeps the aside column in view and scrolls it on its own beside the content (above 1000px).

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• With Aside
• Aside Below On Narrow Page
• Wide Aside

Source

packages/ui/src/containers/page/page.tsx