Drawer

A simple drawer that slides in from a side of the screen.

#Usage

<x-drawer name="form" title="My Drawer">
    <x-drawer.section>
        <p>Drawer content</p>
    </x-drawer.section>
</x-drawer>

#Name

The name is a required parameter and should be unique to the page and follow a slugified naming convention. The name you provide is used for opening and closing events.

<x-drawer name="delete-post">
	...
</x-drawer>

#Heading

The heading of the drawer.

<x-drawer heading="My awesome form">

#Position

You can change which position the drawer slides in from using the position attribute. You can choose either left or right.

<x-drawer position="left">
<x-drawer position="right">

#Opening

Livewire

$this->dispatch('drawer:open:YOUR_NAME');

Alpine JS

<button @click="$dispatch('drawer:open:YOUR_NAME')">
	Open Modal
</button> 

Vanilla JS

window.dispatchEvent(new CustomEvent('drawer:open:YOUR_NAME'));

#Closing

Livewire

$this->dispatch('drawer:close:YOUR_NAME');

Alpine JS

<button @click="$dispatch('drawer:close:YOUR_NAME')">
	Open Modal
</button> 

Vanilla JS

window.dispatchEvent(new CustomEvent('drawer:close:YOUR_NAME'));

#Nesting

Although not recommended, you may nest modals within one another. It's important to pass in overlay="false" and noscroll="false" to the nested modal.

#Reference

Property Description Required
name A slugified name of your component. Should be unique to the page. Yes
overlay Set to false to remove the overlay.
noscroll Set to false to remove the AlpineJS scroll lock.
duration The duration of the animation in milliseconds.

#Slots

Slot Description
x-slot:section Use this slot to add a padded section to the drawer.