Dialog Components

Drawer

You can trigger the drawer to close from any PHP class by dispatching a close event $this->dispatch('close');.

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

# Basic usage

    @php
        /*
        public string $name;
        public string $email;
        public string $password;
 
        public function createUser()
        {
            $this->validate([
                'name' => ['required', 'string'],
                'email' => ['required', 'email', 'unique:users,email'],
                'password' => ['required', 'string', 'min:8'],
            ]);
 
            User::create([
                'name' => $this->pull('name'),
                'email' => $this->pull('email'),
                'password' => $this->pull('password'),
            ]);
 
            // Close the drawer
            $this->dispatch('close');
        } */
    @endphp
 
<x-button x-on:click="$wire.showDrawer = true" label="Form" />
 
<x-drawer wire:model="showDrawer" title="Create new user" blur>
    <form wire:submit="createUser" class="space-y-4">
        <x-input wire:model="name" label="Name *" />
        <x-input wire:model="email" label="Email *" />
        <x-input type="password" wire:model="password" label="Password *" />
 
        <div class="flex justify-end w-full gap-5">
            <x-button label="Submit" spinner="createUser" class="w-full py-2.5"/>
        </div>
    </form>
</x-drawer>

# Open with Livewire

It will send network request.

<x-button wire:click="$set('openWithLivewire', true)" label="Livewire" />
 
<x-drawer wire:model="openWithLivewire" title="Open with Livewire">
    Drawer content..
</x-drawer>

# Open with Alpine Js

It will not send any network request.

<x-button x-on:click="$wire.openWithAlpine = true" label="Alpine" />
 
<x-drawer wire:model="openWithAlpine" title="Open with Alpine Js">
    Drawer content..
</x-drawer>

# Position

<x-button x-on:click="$wire.openLeft = true" label="Left" />
<x-button x-on:click="$wire.openRight = true" label="Right" /> {{-- default --}}
<x-button x-on:click="$wire.openTop = true" label="Top" />
<x-button x-on:click="$wire.openBottom = true" label="Bottom" />
 
<x-drawer wire:model="openTop" title="Position top" top>
    Drawer content..
</x-drawer>
 
<x-drawer wire:model="openBottom" title="Position bottom" bottom>
    Drawer content..
</x-drawer>
 
<x-drawer wire:model="openLeft" title="Position left" left>
    Drawer content..
</x-drawer>
 
{{-- default --}}
<x-drawer wire:model="openRight" title="Position right" right>
    Drawer content..
</x-drawer>

# Persistent

<x-button x-on:click="$wire.openPersistent = true" label="Persistent" />
 
<x-drawer wire:model="openPersistent" title="Persistent" persistent>
    Drawer content..
</x-drawer>

# Background blur

<x-button x-on:click="$wire.openBlur = true" label="Blur" />
 
<x-drawer wire:model="openBlur" title="Background blur" blur>
    Drawer content..
</x-drawer>

# Size variants

<x-drawer sm>
<x-drawer md>
<x-drawer lg>
<x-drawer xl>
<x-drawer 2xl>
<x-drawer 3xl>
<x-drawer 4xl>
<x-drawer 5xl>
<x-drawer 6xl>
<x-drawer 7xl>
<x-drawer full>

# Disable focus trap

The focus trap is enabled by default, but you can disable it by including the without-trap-focus attribute.

<x-drawer without-trap-focus />

Default settings

Change drawer default settings according your needs config/tallcraftui.php

return [
    'drawer' => [
        'width' => 'lg', // Allowed: sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full
        'blur' => false,
        'trap-focus' => true,
    ],
];