Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Popover

Displays rich content in a panel anchored to a trigger. Click to open, click outside or Escape to close. Requires Alpine.js.

Usage
example.blade.php 
<x-slate::popover>
    <x-slot:content>
        <div class="grid gap-2">
            <p class="text-sm font-medium">Dimensions</p>
            <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
            <div class="grid gap-2">
                <x-slate::input label="Width" value="100%" />
                <x-slate::input label="Height" value="25px" />
            </div>
        </div>
    </x-slot:content>
    <x-slate::button variant="outline">Open popover</x-slate::button>
</x-slate::popover>

Composition
code 
Popover
├── PopoverTrigger
└── PopoverContent
example.blade.php 
<x-slate::popover>
    <x-slate::popover-trigger>
        <x-slate::button variant="secondary">Compose</x-slate::button>
    </x-slate::popover-trigger>
    <x-slate::popover-content side="bottom" align="start">
        <p class="text-sm">Place any controls or copy here.</p>
    </x-slate::popover-content>
</x-slate::popover>

API Reference

Popover
Prop Type Default Description
open bool false Initial open state

Named slot: content for the progressive panel.

PopoverContent
Prop Type Default Description
side top | bottom | start | end bottom Preferred side
align start | center | end center Alignment along the side
Last updated .