App Layout

A structural component that wraps the entire application to define its global layout shell.

Main

Alternate Layout

Main

Customizing

globals.css


:root {
  --ex-app-layout-px: calc(var(--spacing) * 5);
  --ex-app-layout-py: calc(var(--spacing) * 5);
 
  --ex-app-layout-header-min-height: calc(var(--spacing) * 16);
  --ex-app-layout-footer-min-height: calc(var(--spacing) * 16);
 
  --ex-app-layout-aside-width: calc(var(--spacing) * 64);
  --ex-app-layout-sidenav-width: calc(var(--spacing) * 64);
}

API

App Layout

Element	Selector
`AppLayout`	`.ex-app-layout`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

App Layout Header

Element	Selector
`AppLayout.Header`	`.ex-app-layout-header`

Prop	Type	Default
`as`	`ElementType`	`header`
`asChild`	`boolean`	`false`

App Layout Body

Element	Selector
`AppLayout.Body`	`.ex-app-layout-body`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

App Layout Sidenav

Element	Selector
`AppLayout.Sidenav`	`.ex-app-layout-sidenav`

Prop	Type	Default
`as`	`ElementType`	`nav`
`asChild`	`boolean`	`false`

App Layout Main

Element	Selector
`AppLayout.Main`	`.ex-app-layout-main`

Prop	Type	Default
`as`	`ElementType`	`main`
`asChild`	`boolean`	`false`

App Layout Aside

Element	Selector
`AppLayout.Aside`	`.ex-app-layout-aside`

Prop	Type	Default
`as`	`ElementType`	`aside`
`asChild`	`boolean`	`false`

App Layout Footer

Element	Selector
`AppLayout.Footer`	`.ex-app-layout-footer`

Prop	Type	Default
`as`	`ElementType`	`footer`
`asChild`	`boolean`	`false`

App Layout Section

Element	Selector
`AppLayout.Section`	`.ex-app-layout-section`

Prop	Type	Default
`as`	`ElementType`	`section`
`asChild`	`boolean`	`false`