Drawer
Native HTML
You can directly open a drawer by using native HTML label tag while referencing same drawer id
. It closes when you click outside.
Hello
Content left auto width and close button.
Settings
Main profile
Content right with fixed width.
<x-drawer id="my-drawer" title="Hello" class="bg-blue-50" with-close-button separator> Content left auto width and close button.</x-drawer> <x-drawer id="my-drawer2" title="Settings" subtitle="Main profile" separator right class="w-1/3"> Content right with fixed width. <x-slot:actions> <x-button label="Nothing" /> </x-slot:actions></x-drawer> {{-- HTML: Just reference correct drawer ID --}}<label for="my-drawer" class="btn btn-primary">Open left</label><label for="my-drawer2" class="btn btn-warning">Open right</label>
With Livewire
You can use all attributes described above. Instead of id="xxx"
use wire:model
.
public bool $showDrawer = false;
{{-- Note `wire:model` --}}<x-drawer wire:model="showDrawer" class="w-1/3"> {{-- Livewire: Server side --}} <x-button label="Livewiew (server)" wire:click="$toggle('showDrawer')" class="btn-primary" /> {{-- Alpine: Client side (no http request) --}} <x-button label="Alpine (client)" @click="$wire.showDrawer = false" class="btn-warning" /></x-drawer> {{-- Livewire: Server side --}}<x-button label="Livewire (server)" wire:click="$toggle('showDrawer')" class="btn-primary" /> {{-- Alpine: Client side (no http request) --}}<x-button label="Alpine (client)" @click="$wire.showDrawer = true" class="btn-warning" />