Layout

Structural layout components for application shells.

Basic Structure

Typical layout with Header, Sider, Content and Footer.

HeaderSider
 < 
ContentFooter ©2024 Prism Design

<prism-layout class="demo-layout">
  <prism-header>Header</prism-header>
  <prism-layout>
    <prism-sider collapsible>Sider</prism-sider>
    <prism-content>Content</prism-content>
  </prism-layout>
  <prism-footer>Footer</prism-footer>
</prism-layout>

Header-Content-Footer

Typical layout with Header, Content and Footer.

HeaderContentFooter

<prism-layout class="demo-layout">
  <prism-header>Header</prism-header>
  <prism-content>Content</prism-content>
  <prism-footer>Footer</prism-footer>
</prism-layout>

prism-layoutNameTypeDefaultDescription
classstring-Additional CSS class for the layout container.
prism-headerNameTypeDefaultDescription
classstring-Additional CSS class for the header.
prism-siderNameTypeDefaultDescription
widthstring | number200Width of the sider.
collapsedWidthstring | number80Width of the sider when collapsed.
collapsiblebooleanfalseWhether the sider can be collapsed.
collapsedboolean (model)falseWhether the sider is currently collapsed (supports two-way binding).
prism-contentNameTypeDefaultDescription
classstring-Additional CSS class for the content area.
prism-footerNameTypeDefaultDescription
classstring-Additional CSS class for the footer.

Name	Type	Default	Description
`width`	`string \| number`	`200`	Width of the sider.
`collapsedWidth`	`string \| number`	`80`	Width of the sider when collapsed.
`collapsible`	`boolean`	`false`	Whether the sider can be collapsed.
`collapsed`	`boolean (model)`	`false`	Whether the sider is currently collapsed (supports two-way binding).