Layout

Implement a basic page layout with multiple content areas.

#
Documentation

#
Usage

Header

Sidebar

Content

DetailsPanel


import { Layout, LayoutContent } from "@optiaxiom/react/unstable";
 
import { Canvas } from "../Canvas";
import { Panel } from "../Panel";
 
export function App() {
  return (
    <Canvas>
      <Layout
        detailsPanel={<Panel h="full">DetailsPanel</Panel>}
        header={<Panel>Header</Panel>}
        sidebar={<Panel>Sidebar</Panel>}
        size="full"
      >
        <LayoutContent>
          <Panel h="full">Content</Panel>
        </LayoutContent>
      </Layout>
    </Canvas>
  );
}

#
Props

#
Layout

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`detailsPanel` Content for the details panel area of the layout. `ReactNode`
`header` Content for the header area of the layout. `ReactNode`
`resizable` Whether to enable resizable panels for the details panel area. `false \| true`
`sidebar` Content for the sidebar area of the layout. `ReactNode`
`size` Whether to fit the layout to the browser screen or the parent element. `"screen" \| "full"` Default: `screen`

#
LayoutContent

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`

#
Changelog

#
1.6.0

Added component

Layout

#Documentation

#Usage

Header

Sidebar

Content

DetailsPanel

#Props

#Layout

#LayoutContent

#Changelog

#1.6.0