Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Drawer

A panel that slides in from an edge of the screen. Defaults to side="bottom" with a drag handle. Requires Alpine.js.

Usage
example.blade.php 
<x-slate::drawer>
    <x-slate::drawer-trigger>
        <x-slate::button variant="outline">Open drawer</x-slate::button>
    </x-slate::drawer-trigger>
    <x-slate::drawer-content
        title="Move goal"
        description="Set your daily activity goal."
    >
        <div class="grid gap-3 py-2">
            <x-slate::input label="Goal" value="350" type="number" />
        </div>
        <x-slot:footer>
            <x-slate::drawer-close>
                <x-slate::button class="w-full">Save</x-slate::button>
            </x-slate::drawer-close>
        </x-slot:footer>
    </x-slate::drawer-content>
</x-slate::drawer>

Composition
code 
Drawer
├── DrawerTrigger
└── DrawerContent
    ├── DrawerHeader / Title / Description
    ├── DrawerClose
    └── DrawerFooter
Last updated .