Layout
Layout handles the overall layout of a page.
Default
Header Extra
Sidebar
Body
<script lang="ts">
import { Layout } from 'stwui';
</script>
<Layout class="h-full">
<Layout.Header class="static z-0 shadow-none border border-gray-500">
Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>
<Layout.Content>
<Layout.Content.Sidebar
class="flex items-center justify-center border-l border-b border-gray-500 min-h-[200px]"
>
Sidebar
</Layout.Content.Sidebar>
<Layout.Content.Body
class="flex items-center justify-center border-b border-r border-l border-gray-500 min-h-[200px]"
>
Body
</Layout.Content.Body>
</Layout.Content>
</Layout>
Layout.Content Props
collapsed | boolean | false |
collapsedWidth | string | 4.5rem |
expandedWidth | string | 12rem |
Layout.Header Slots
extra | <Layout.Header.Extra slot="extra" /> |