Drawer

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

• Usage
• Name
• Heading
• Position
• Opening
• Closing
• Nesting
• Reference
• Slots

#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

#Slots