mary

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" />
mary
Sponsor