DrawerLayoutProps

DrawerLayoutProps = ComponentPropsWithRef<"div"> & object

Type Declaration

extend?

optional extend: XAxisUnion | XAxisIntersection | YAxisUnion | YAxisIntersection

Which drawers should extend to full container dimensions. Determines the overall layout structure and drawer relationships in regard to space.

Default

'left right'

Extended Drawer Layout Configurations

The layout system supports four different drawer extension modes that determine
how drawers are arranged and which drawers extend to the full container dimensions.

extend: "left right"
┌──────┬──────────┬───────┐
│      │   top    │       │
│      ├──────────┤       │
│ left │   main   │ right │
│      ├──────────┤       │
│      │  bottom  │       │
└──────┴──────────┴───────┘

extend: "top bottom"
┌─────────────────────────┐
│          top            │
├──────┬──────────┬───────┤
│ left │   main   │ right │
├──────┴──────────┴───────┤
│         bottom          │
└─────────────────────────┘

extend: "top"
┌─────────────────────────┐
│          top            │
├──────┬──────────┬───────┤
│      │   main   │       │
│ left ├──────────┤ right │
│      │  bottom  │       │
└──────┴──────────┴───────┘

extend: "bottom"
┌──────┬──────────┬───────┐
│      │   top    │       │
│ left ├──────────┤ right │
│      │   main   │       │
├──────┴──────────┴───────┤
│         bottom          │
└─────────────────────────┘

extend: "left"
┌──────┬──────────────────┐
│      │   top            │
│      ├──────────┬───────│
│ left │   main   │ right │
│      ├──────────┴───────┤
│      │  bottom          │
└──────┴──────────────────┘

extend: "right"
┌─────────────────┬───────┐
│          top    │       │
├──────┬──────────┤       │
│ left │   main   │ right │
├──────┴──────────┤       │
│         bottom  │       │
└─────────────────┴───────┘

push?

optional push: XAxisUnion | YAxisUnion | XAxisIntersection | YAxisIntersection | `${XAxisUnion} ${YAxisUnion}` | `${YAxisUnion} ${XAxisUnion}` | `${XAxisUnion} ${YAxisIntersection}` | `${YAxisIntersection} ${XAxisUnion}` | `${YAxisUnion} ${XAxisIntersection}` | `${XAxisIntersection} ${YAxisUnion}` | `${XAxisIntersection} ${YAxisIntersection}` | `${YAxisIntersection} ${XAxisIntersection}`

Determines how drawer interact with the main content area and overall layout:

• 'push': Drawer pushes the main content aside, reducing its available width. Content area shrinks to accommodate the panel space. If no placements are defined for push, the default behavior for a drawer is to float over the main content without affecting its layout or dimensions. Content remains at full width, panel appears as an overlay.