Skip to content

Dialog 对话框 ​

声明式模态对话框。标题 + 内容 + 确认 / 取消按钮,遮罩层与卡片分层渲染。

契约源:lh-ui-core/specs/dialog.json · 黄金用例:lh-ui-core/cases/dialog.json(8 条,已翻译为 hypium 测试)

声明式可见性

visible 为 false 时不渲染任何内容。确认 / 取消后组件触发 onClose, 宿主据此把 visible 置回 false(与 react 的 open / onClose 同构)。 组件须作为页面 Stack 的最后子节点挂载,层级由 zIndex 令牌承担。

基本用法 ​

9:41Dialog 基本用法

删除确认

删除后不可恢复,确定要删除这条记录吗?

HTML 模拟预览(鸿蒙 / ArkUI 外观),非真机渲染

typescript
LhDialog({
  visible: this.dialogVisible,
  title: '删除确认',
  content: '删除后不可恢复,确定要删除这条记录吗?',
  type: LhDialogType.Warning,
  closable: true,
  onConfirm: () => {},
  onCancel: () => {},
  onClose: () => { this.dialogVisible = false },
})

类型 ​

type 决定确认按钮的语义类型(映射到 LhButtonType);危险类型确认按钮取危险色。

9:41Dialog 危险类型

清空全部

此操作将清空当前所有数据,且不可恢复。

HTML 模拟预览(鸿蒙 / ArkUI 外观),非真机渲染

API ​

Props ​

属性说明类型默认值
visible是否显示;为 false 时不渲染任何内容booleanfalse
title标题string''
content正文内容string''
type语义类型,决定确认按钮的类型LhDialogTypeDefault
confirmText确认按钮文字string'确认'
cancelText取消按钮文字string'取消'
closable点击遮罩区域是否触发 onClosebooleanfalse
onConfirm点击确认按钮时触发(随后触发 onClose)() => void空函数
onCancel点击取消按钮时触发(随后触发 onClose)() => void空函数
onClose确认 / 取消 / 点击可关闭遮罩后触发() => void空函数

LhDialogType ​

值确认按钮类型
DefaultLhButtonType.Default
PrimaryLhButtonType.Primary
SuccessLhButtonType.Success
WarningLhButtonType.Warning
DangerLhButtonType.Danger
InfoLhButtonType.Info

令牌对照 ​

令牌用途
dialog.width内容卡宽度(320vp)
dialog.paddingHorizontal / dialog.paddingVertical卡片内边距(20 / 20vp)
dialog.titleFontSize / dialog.contentFontSize标题 / 正文字号(16 / 14)
dialog.gap标题与正文、正文与按钮组的间距(12vp)
dialog.borderRadius卡片圆角
color.background.default / color.background.overlay卡片底色 / 遮罩色
color.text.primary / color.text.regular标题 / 正文色
shadow.base卡片阴影
zIndex.modalBackdrop / zIndex.modal遮罩 / 弹层层级

黄金用例对照 ​

cases/dialog.json 的 8 条断言与 hypium 测试的对应关系(entry/src/test/Dialog.test.ets):

case id断言本地测试
confirm-emits-onconfirm确认触发 onConfirmconfirm_button_type_maps_from_dialog_type
cancel-emits-oncancel取消触发 onCanceltype_variants_map_to_button_types
confirm-also-emits-onclose确认同时触发 onClosetype_variants_map_to_button_types
closable-overlay-emits-onclose可关闭遮罩点击触发 onCloseoverlay_and_zindex_use_tokens
not-closable-blocks-overlay-close不可关闭遮罩吞掉点击overlay_and_zindex_use_tokens
hidden-not-rendered隐藏时不渲染card_dimensions_use_tokens(visible gate)
title-renders-text标题消费字号令牌title_and_content_use_font_tokens
danger-type-uses-danger-token危险类型确认按钮取危险色danger_type_uses_danger_token

另有暗色专项:dark_colors_come_from_dark_tokens / dimensions_are_identical_in_dark_mode。 运行:DevEco Studio 右键 entry/src/test → Run Tests。