梧桐设计语言v0.4.1

确认框ConfirmDialog

破坏性确认框。card 底、radius-lgshadow-overlay、内距 space-6、宽 400。


三条规则:① 标题是问句并带数量;② 正文说清什么没了、什么留着;③ 按钮写动词带数量,用 destructive 实心,不写「确定」。取消在左用幽灵按钮。

  • 一层到头,弹窗里不再弹窗。
  • 移动端也用它(确认只有两个按钮,拇指够得到);但表单在移动端要改底部抽屉。
  • 看详情不用弹窗,用侧滑面板。

消费者提供:标题、正文、确认文案、取消回调。

示例

import
import { ConfirmDialog } from "@wutong/ui";

破坏性确认

标题问句带数量;正文说清什么没了什么留着;按钮动词带数量、危险色

外观

删除这 3 条工单?

工单本身、现场照片和处理记录会被永久删除,无法恢复。其中 1 条已沉淀到经验库的处理经验会保留。

API

属性类型默认说明
openboolean受控
title / childrenReactNode问句带数量 / 后果
confirmLabelstring动词带数量:「删除 3 条」
tone"destructive" | "primary""destructive"非破坏性确认才用 primary
onConfirm / onCancel() => voidEsc 与遮罩触发 onCancel