UI Components

Drawer

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

# 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,
    ],
];