On this Page
DrawerRoot
DrawerRoot is the compound Drawer root. It is an explicit alias of SheetRoot, so it owns the shared open state consumed by DrawerTrigger, DrawerContent, and DrawerClose.
Usage
Svelte
<script lang="ts">
import { DrawerContent, DrawerRoot, DrawerTrigger } from 'fractalsvelte';
let open = $state(false);
</script>
<DrawerRoot bind:open>
<DrawerTrigger>Open filters</DrawerTrigger>
<DrawerContent>Filter controls</DrawerContent>
</DrawerRoot>
API
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Shared drawer state. Supports bind:open. |
children | Snippet | required | Compound drawer content that receives this root’s context. |
Related
Use DrawerTrigger to open the nearest root, DrawerContent for the modal surface, and DrawerClose to close it.