Layout
Layout handles the overall layout of a page.
Usage
import { Layout } from 'stwui';
import Layout from 'stwui/layout';
<script lang="ts">
import { Layout } from 'stwui';
</script>
<Layout class="h-full">
<Layout.Header class="static z-0"
>Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>
<Layout.Content>
<Layout.Content.Body class="flex items-center justify-center min-h-[200px]"
>Body</Layout.Content.Body
>
</Layout.Content>
<Layout.Footer class="static z-0">
Footer
<Layout.Footer.Extra slot="extra">Footer Extra</Layout.Footer.Extra>
</Layout.Footer>
</Layout>
With Sidebar
<script lang="ts">
import { Layout } from 'stwui';
</script>
<Layout class="h-full">
<Layout.Header class="static z-0"
>Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>
<Layout.Content>
<Layout.Content.Sidebar class="flex items-center justify-center min-h-[200px]"
>Sidebar</Layout.Content.Sidebar
>
<Layout.Content.Body class="flex items-center justify-center min-h-[200px]"
>Body</Layout.Content.Body
>
</Layout.Content>
<Layout.Footer class="static z-0">
Footer
<Layout.Footer.Extra slot="extra">Footer Extra</Layout.Footer.Extra>
</Layout.Footer>
</Layout>
With Sidebar Right
<script lang="ts">
import { Layout } from 'stwui';
</script>
<Layout class="h-full">
<Layout.Header class="static z-0"
>Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>
<Layout.Content>
<Layout.Content.Body class="flex items-center justify-center min-h-[200px]"
>Body</Layout.Content.Body
>
<Layout.Content.Sidebar class="flex items-center justify-center min-h-[200px]"
>Sidebar</Layout.Content.Sidebar
>
</Layout.Content>
<Layout.Footer class="static z-0">
Footer
<Layout.Footer.Extra slot="extra">Footer Extra</Layout.Footer.Extra>
</Layout.Footer>
</Layout>
Sidebar Outside
<script lang="ts">
import { Layout } from 'stwui';
</script>
<Layout class="h-full">
<Layout.Content>
<Layout.Content.Sidebar class="flex items-center justify-center min-h-[328px]"
>Sidebar</Layout.Content.Sidebar
>
<Layout class="flex flex-col items-center justify-center min-h-[200px]">
<Layout.Header class="static z-0"
>Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>
<Layout.Content>
<Layout.Content.Body class="flex items-center justify-center min-h-[200px]"
>Body</Layout.Content.Body
>
</Layout.Content>
<Layout.Footer class="static z-0 max-h-[64px]">
Footer
<Layout.Footer.Extra slot="extra">Footer Extra</Layout.Footer.Extra>
</Layout.Footer>
</Layout>
</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" /> |
Layout Class Identifiers
| stwui-layout |
| stwui-layout-header |
| stwui-layout-header-extra |
| stwui-layout-footer |
| stwui-layout-footer-extra |
| stwui-layout-sidebar |
| stwui-layout-body |
| stwui-layout-content |
