A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Make changes to your profile here. Click save when you're done.
<div x-data="{ dialog: '' }">
<x-portal::button variant="outline" x-on:click="dialog='edit-profile'">
Edit Profile
</x-portal::button>
<x-portal::dialog id="edit-profile" dismissible>
<x-portal::dialog.header>
<x-portal::dialog.title>Edit profile</x-portal::dialog.title>
<x-portal::dialog.description>
Make changes to your profile here. Click save when you're done.
</x-portal::dialog.description>
</x-portal::dialog.header>
<x-portal::dialog.content>
<div class="grid gap-4 py-4">
<div class="grid grid-cols-4 items-center gap-4">
<x-portal::form.label>Name</x-portal::form.label>
<div class="col-span-3">
<x-portal::input type="text" placeholder="Name" name="name"
value="Pedro Duarte" />
</div>
</div>
<div class="grid grid-cols-4 items-center gap-4">
<x-portal::form.label>Username</x-portal::form.label>
<div class="col-span-3">
<x-portal::input type="text" placeholder="Username" name="username"
value="@peduarte" />
</div>
</div>
</div>
</x-portal::dialog.content>
<x-portal::dialog.footer>
<x-portal::button variant="outline" x-on:click="dialog=''">
Cancel
</x-portal::button>
<x-portal::button type="submit" x-on:click="dialog=''">
Save Changes
</x-portal::button>
</x-portal::dialog.footer>
</x-portal::dialog>
</div>
If you want to customize the components, you can publish them by running the following command :
php artisan vendor:publish --tag=portal-ui:dialog --force