logo-icon
STWUI

Layout

Default
Header
Header Extra
Sidebar
Body

svelte
<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" />