Page
The Page component provides the basic layout for your app with slots for a
header, sidebar, main content, and a detail view. The Main slot is the only
slot that is mandatory for rendering the Page; every other slot is optional.
Check out the UI and design guidelines for more information on how to structure your app using the page.
PageProps
, <.<>, keyof >, , , | Name | Type | Default | Description |
|---|---|---|---|
disableAnimations? | false | Whether animations should be disabled. If true or 'prefers-reduced-motion' is set to 'reduce', no animations are applied. |
Page.Header
The Page.Header is rendered at the very top of the page. Take a look at the
UI and design guidelines for information on which
components we recommend to use in the header.
HeaderProps
, <.<>, keyof >, , Page.Sidebar
The Page.Sidebar is the first slot of the page you can use to display content.
Take a look at the UI and design guidelines for
information on which content we recommend to use in the sidebar.
SidebarProps
Signature:
export declare type SidebarProps = & ;Page.Main
You should use the Page.Main compound to display the main content of your
application. Take a look at the
UI and design guidelines for information on which
content we recommend to use in the main view.
MainProps
, <.<>, | keyof >, , | Name | Type | Default | Description |
|---|---|---|---|
minWidth? | 320 | The minimum width of the main panel in pixels. |
Page.DetailView
The Page.DetailView can be leveraged to provide additional information related
to the main content. Take a look at the
UI and design guidelines for information on which
content we recommend to use in the detail view.
DetailViewProps
Signature:
export declare type DetailViewProps = & ;Page.PanelControlButton
The Page.PanelControlButton updates the dismissed state of an uncontrolled
panel. The button automatically renders the correct icons depending on the panel
state.
PanelControlButtonProps
Signature:
export declare type PanelControl = {
/** The action triggered by the button. */
action?: | | ;
/** The target panel controlled by the button. */
target?: ;
} & <<>, | | >;