Displays rich content in a portal, triggered by a button.
Set the dimensions for the layer.
<x-portal::popover>
<x-portal::popover.trigger>
<x-portal::button variant="outline">Open popover</x-portal::button>
</x-portal::popover.trigger>
<x-portal::popover.content class="w-80">
<div class="grid gap-4">
<div class="space-y-2">
<h4 class="font-medium leading-none">Dimensions</h4>
<p class="text-sm text-muted-foreground">
Set the dimensions for the layer.
</p>
</div>
<div class="grid gap-2">
<div class="grid grid-cols-2 items-center gap-4">
<x-portal::label htmlfor="width">Width</x-portal::label>
<x-portal::input id="width" value="100%" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-2 items-center gap-4">
<x-portal::label htmlfor="maxwidth">Max. width</x-portal::label>
<x-portal::input id="maxwidth" value="300px" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-2 items-center gap-4">
<x-portal::label htmlfor="height">Height</x-portal::label>
<x-portal::input id="height" value="25px" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-2 items-center gap-4">
<x-portal::label htmlfor="maxheight">Max. height</x-portal::label>
<x-portal::input id="maxheight" value="none" class="col-span-2 h-8" />
</div>
</div>
</div>
</x-portal::popover.content>
</x-portal::popover>
If you want to customize the components, you can publish them by running the following command :
php artisan vendor:publish --tag=portal-ui:avatar --force