Drawer

Basic

public bool $showDrawer1 = false;
public bool $showDrawer2 = false;

...

{{-- Left --}}
<x-drawer wire:model="showDrawer1" class="w-11/12 lg:w-1/3">
    <div>...</div>
    <x-button label="Close" @click="$wire.showDrawer1 = false" />
</x-drawer>
 
{{-- Right --}}
<x-drawer wire:model="showDrawer2" class="w-11/12 lg:w-1/3" right>
    <div>...</div>
    <x-button label="Close" @click="$wire.showDrawer2 = false" />
</x-drawer>
 
<x-button label="Open Left" wire:click="$toggle('showDrawer1')" />
<x-button label="Open Right" wire:click="$toggle('showDrawer2')" />

Complex

public bool $showDrawer3 = false;

Hello

Livewire

Hey!

<x-drawer
    wire:model="showDrawer3"
    title="Hello"
    subtitle="Livewire"
    separator
    with-close-button
    class="w-11/12 lg:w-1/3"
>
    <div>Hey!</div>
 
    <x-slot:actions>
        <x-button label="Cancel" @click="$wire.showDrawer3 = false" />
        <x-button label="Confirm" class="btn-primary" icon="o-check" />
    </x-slot:actions>
</x-drawer>
 
<x-button label="Open" @click="$wire.showDrawer3 = true" />

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.

This is not a recommended approach if you are using forms, because this is native HTML and there is no state management. Use it only for simple confirmations.

Hello

Native HTML drawer, there is no Livewire state management.

Open native

<x-drawer id="my-drawer" title="Hello" separator class="w-11/12 lg:w-1/3">
    <div>Native HTML drawer, there is no Livewire state management.</div>
    <label for="my-drawer" class="btn">Close</label>
</x-drawer>
 
<label for="my-drawer" class="btn">Open native</label>

maryUI

Sponsor