Plume UI

Drawer

A panel that slides in from the edge of the screen.

Examples

Properties

Prop Type Default Description
name string - Required. Unique identifier for the drawer.
side string right Slide direction: left, right, top, bottom.
show boolean false Initial visibility state.

Usage

Triggering the Drawer

blade 
<x-plume::button x-on:click="$dispatch('open-drawer', 'settings-drawer')">
    Open Settings
</x-plume::button>

Drawer Component

blade 
<x-plume::drawer name="settings-drawer" side="right">
    <x-plume::drawer.header>
        <x-plume::drawer.title>Settings</x-plume::drawer.title>
    </x-plume::drawer.header>
    <x-plume::drawer.content>
        <!-- Content -->
    </x-plume::drawer.content>
    <x-plume::drawer.footer>
        <x-plume::button x-on:click="$dispatch('close-drawer', 'settings-drawer')">
            Close
        </x-plume::button>
    </x-plume::drawer.footer>
</x-plume::drawer>