Dialog
Display an Dialog
Usage
Import the elements:
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger} from "doplo/dialog"
Use in body:
<Dialog>
<DialogTrigger> <Button>Click to open Dialog</Button></DialogTrigger>
<DialogOverlay>
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
<DialogDescription>Description for the dialog</DialogDescription>
</DialogHeader>
<div className="flex flex-col gap-2">
<Input placeholder="Type here..."/>
<Textarea placeholder="Type here..."/>
</div>
<Button className="w-full">Submit</Button>
<DialogCloser>
<X className="text-neutral-600"/>
</DialogCloser>
</DialogContent>
</DialogOverlay>
</Dialog>
Structure
A Dialog component contains:
- Dialog : Tag for Dialog.
- Dialog Trigger : Tag for Dialog Trigger, for opening the Dialog.
- Dialog Overlay: Tag for Dialog Overlay, which includes the Dialog background.
- Dialog Content: Tag for Dialog Content, which is the main content of the Dialog.
- Dialog Header: Tag for Dialog Header, which includes the Dialog Title and Description.
- Dialog Title: Tag for Dialog Title.
- Dialog Description: Tag for Dialog Description.
- Dialog Closer: Tag for Dialog Closer, for closing the Dialog.
- Children: Content inside the tags.
Props
Props that can be used in a Dialog component:
NameTypeDescriptionDefault
props?-All props of HTML div element-
ref?-ref of the div element-
? indicates that the prop is optional
Example
Some uses for Dialog component:
Working on it.
Build by Ayush Tomar. The source code is available on Github.