组件

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>
  );
}

关键导出

  • Dialog
  • DialogTrigger
  • DialogPortal
  • DialogClose
  • DialogOverlay
  • DialogContent
  • DialogHeader
  • DialogFooter
  • DialogTitle
  • DialogDescription

使用建议

  • DialogTitle 不要省略
  • 内容很多时优先换成 Sheet
  • 关闭按钮可通过 showCloseButton={false} 关闭

继续阅读