组件 · 浮层 · 30
对话框
对话框 = 居中的浮层，只问一个问题并提供两个具名操作，Esc 始终可取消。
直达修改 Prompt →
Delete 12 prompts?They move to trash for 30 days, then disappear for good.
对话框是什么？
对话框要求在继续之前先做决定。点名问题、两个操作，以及 Esc 会发生什么。
变体
点击属性即可在预览中高亮。
-
- 在 Prompt 里写明这个类型。
-
- 确认不可撤销或破坏性操作（删除、移除），通常为红色。
-
- 在 Prompt 里写明这个类型。
-
- 给具体值，不要只给感觉词。
-
- 给具体值，不要只给感觉词。
-
- 给具体值，不要只给感觉词。
-
- 模态框后方的变暗遮罩层，用于阻断页面。
-
- 给具体值，不要只给感觉词。
状态
点击属性即可在预览中高亮。
-
- 输入或报错前字段的默认有效状态。
-
- 确认不可撤销或破坏性操作（删除、移除），通常为红色。
-
- 在 Prompt 里写明这个状态。
结构解剖
这些是 Prompt 里应该点名的部件。
- 01 遮罩
- 02 面板
- 03 标题
- 04 正文
- 05 操作区
什么时候用
- 确认破坏性操作：删除、撤销授权、覆盖
- 继续之前请用户命名某个东西
- 页面无法代为决定的阻塞式决策
什么时候别用
- 内容较长需要滚动——改用抽屉或模态框
- 决定是例行操作——直接执行并提供撤销
- 两个对话框会相互堆叠
Name the action in the button — “Delete 12 files” beats “Confirm” when the stakes are real.
Create a dialog component.
STYLE
- 320px surface, 16px radius, 20px padding, centered over a #1D1D1F 40% scrim
- title 16px 600, message 13px #6E6E73, 8px apart
- two actions bottom-right: cancel plain, confirm #0071E3 pill
- destructive confirm swaps to #FF3B30
STATES
- default, destructive, busy with a spinner in the confirm button
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui