Displays a callout for user attention.
Quick note on browser compatibility.
Unfortunately both are not (yet) supported in Firefox. The component will still work as expected but it will be missing the enter & exit animations.
<div x-data="{openSheet : ''}">
<x-portal::button variant="outline" x-on:click="openSheet='default'">Open Sheet</x-portal::button>
<x-portal::sheet id="default" class="w-[500px] sm:!max-w-[540px]">
<x-portal::sheet.header>
<x-portal::sheet.title>Edit profile</x-portal::sheet.title>
<x-portal::sheet.description>
Make changes to your profile here. Click save when you're done.
</x-portal::sheet.description>
</x-portal::sheet.header>
<x-portal::sheet.main>
<div class="grid gap-4 py-4">
<div class="flex items-center gap-4">
<x-portal::label htmlFor="name" class="text-right w-[100px]">
Name
</x-portal::label>
<x-portal::input id="name" value="pedro duarte" class="col-span-3" />
</div>
<div class="flex items-center gap-4">
<x-portal::label htmlFor="username" class="text-right w-[100px]">
Username
</x-portal::label>
<x-portal::input id="username" value="@peduarte" class="col-span-3" />
</div>
</div>
</x-portal::sheet.main>
<x-portal::sheet.footer>
<x-portal::sheet.close type="submit">
Save changes
</x-portal::sheet.close>
</x-portal::sheet.footer>
</x-portal::sheet>
</div>
If you want to customize the components, you can publish them by running the following command :
php artisan vendor:publish --tag=portal-ui:sheet --force
<div x-data="{openSheet : ''}">
@php
$sides = ['top', 'right', 'bottom', 'left'];
@endphp
@foreach($sides as $side)
<x-portal::button variant="outline" x-on:click="openSheet='sheet_{{$side}}'">{{$side}}</x-portal::button>
<x-portal::sheet id="sheet_{{$side}}" side="{{$side}}">
<x-portal::sheet.header>
<x-portal::sheet.title>{{$side}} sheet</x-portal::sheet.title>
</x-portal::sheet.header>
</x-portal::sheet>
@endforeach
</div>