89 lines
2.3 KiB
Markdown
89 lines
2.3 KiB
Markdown
- Home
|
|
- Components
|
|
- Modal
|
|
|
|
# Modal
|
|
|
|
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
|
|
|
|
## Props
|
|
|
|
### Modal
|
|
|
|
|
|
Prop Type Default Description
|
|
...Radix props ComponentProps<typeof DialogPrimitive.Root> - All Radix Dialog root props
|
|
|
|
### ModalContent
|
|
|
|
|
|
Prop Type Default Description
|
|
showCloseButton boolean true Whether to render the built-in close button
|
|
...Radix props ComponentProps<typeof DialogPrimitive.Content> - All Radix content props
|
|
|
|
Other parts (ModalTrigger, ModalOverlay, ModalPortal, ModalHeader, ModalTitle, ModalDescription, ModalFooter, ModalClose) are thin wrappers over corresponding Radix components with styling.
|
|
|
|
### Example
|
|
|
|
```
|
|
<Modal>
|
|
<ModalTrigger asChild>
|
|
<Button>Open</Button>
|
|
</ModalTrigger>
|
|
<ModalContent showCloseButton>
|
|
<ModalHeader>
|
|
<ModalTitle>Title</ModalTitle>
|
|
<ModalDescription>Description</ModalDescription>
|
|
</ModalHeader>
|
|
<ModalFooter>
|
|
<ModalClose asChild><Button variant="secondary">Close</Button></ModalClose>
|
|
<Button>Confirm</Button>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
|
|
</Modal>
|
|
```
|
|
|
|
## Usage
|
|
|
|
```
|
|
<Modal>
|
|
<ModalTrigger asChild>
|
|
<Button variant="primary">Open Modal</Button>
|
|
</ModalTrigger>
|
|
<ModalContent onOpenAutoFocus={(e) => {
|
|
e.preventDefault();
|
|
}}>
|
|
<ModalHeader>
|
|
<ModalTitle>Edit Profile</ModalTitle>
|
|
<ModalDescription>Update your personal information. Click Save to complete the changes.</ModalDescription>
|
|
</ModalHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid grid-cols-6 items-center gap-2">
|
|
<label htmlFor="name" className="text-left text-sm font-medium">Name</label>
|
|
<InputRoot
|
|
id="name"
|
|
defaultValue="Jason"
|
|
className="col-span-5 px-3 py-2"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-6 items-center gap-2">
|
|
<label htmlFor="name" className="text-left text-sm font-medium">Mail</label>
|
|
<InputRoot
|
|
id="email"
|
|
defaultValue="jason@example.com"
|
|
className="col-span-5 px-3 py-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<ModalFooter>
|
|
<ModalClose asChild>
|
|
<Button variant="secondary">cancel</Button>
|
|
</ModalClose>
|
|
<Button>save</Button>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
```
|
|
|