组件
Dialog
用于阻断式确认、编辑弹窗和详情查看
Dialog
Dialog 用于需要暂时打断当前上下文的弹窗场景。
导入
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
Button,
} from "@downcity/ui";最小示例
import {
Button,
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} from "@downcity/ui";
export function DeleteDialog() {
return (
<Dialog>
<DialogTrigger render={<Button variant="destructive" size="sm" />}>
删除
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>确认删除</DialogTitle>
<DialogDescription>删除后无法恢复。</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="ghost" size="sm">取消</Button>
<Button variant="destructive" size="sm">确认删除</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}关键导出
DialogDialogTriggerDialogPortalDialogCloseDialogOverlayDialogContentDialogHeaderDialogFooterDialogTitleDialogDescription
使用建议
DialogTitle不要省略- 内容很多时优先换成 Sheet
- 关闭按钮可通过
showCloseButton={false}关闭