The Dialog component presents important information or actions in a modal window. It overlays the page content and focuses the user’s attention on a specific task or message.
<?php
use Lib\PHPXUI\Button;
use Lib\PHPXUI\{
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
};
use Lib\PHPXUI\Input;
use Lib\PHPXUI\Label;
?>
<Dialog>
<form>
<DialogTrigger asChild="true">
<Button variant="outline">Open Dialog</Button>
</DialogTrigger>
<DialogContent class="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
Make changes to your profile here. Click save when you're done.
</DialogDescription>
</DialogHeader>
<div class="grid gap-4">
<div class="grid gap-3">
<Label for="name-1">Name</Label>
<Input id="name-1" name="name" value="Pedro Duarte" />
</div>
<div class="grid gap-3">
<Label for="username-1">Username</Label>
<Input id="username-1" name="username" value="@peduarte" />
</div>
</div>
<DialogFooter>
<DialogClose asChild="true">
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button type="submit">Save changes</Button>
</DialogFooter>
</DialogContent>
</form>
</Dialog>
Installation
npm
npx phpxui add Dialog
Usage
use Lib\PHPXUI\ {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
}
<Dialog>
<DialogTrigger>Open</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
Examples
Share link
Anyone who has this link will be able to view this.