Skip to main content
版本:v3

DIALOG

API_LEVEL 2.0 开始支持,API 兼容性请参考 API_LEVEL

dialog_sample.jpg

对话弹窗由一段文本和两个按钮构成,点击按钮后弹框会消失。

警告

现阶段 DIALOG 需要分两次设置属性,第一次设置 okcancel 按钮的文字,第二次设置 textDIALOG 控件对齐的属性,具体请参考使用示例

创建 UI 控件

import { createWidget, widget } from '@zos/ui'

const dialog = createWidget(widget.DIALOG, Param)

类型

Param: object

属性说明是否必须类型
textdialog 内容string
content_text_sizedialog 内容文本尺寸number
content_text_colordialog 内容文本颜色number
content_bg_colordialog 内容背景颜色number
content_text_align_hdialog 内容文字的对齐方式(横轴)string
content_text_align_vdialog 内容文字的对齐方式(竖轴)string
ok_text确认按钮的文字string
ok_text_color确认按钮文字颜色number
ok_press_color确认按钮按下背景色number
ok_nomal_color确认按钮正常状态背景色number
ok_press_src确认按钮按下背景图片string
ok_nomal_src确认按钮正常状态背景图片string
cancel_text取消按钮的文字string
cancel_text_color取消按钮文字颜色number
cancel_press_color取消按钮按下背景色number
cancel_nomal_color取消按钮正常状态背景色number
cancel_press_src取消按钮按下背景图片string
cancel_nomal_src取消按钮正常状态背景图片string
dialog_align_hdialog 横轴方向number
dialog_align_vdialog 竖轴方向number
ok_funcdialog 点击确认按钮的回调(dialog: Dialog) => void
cancel_funcdialog 点击取消按钮的回调(dialog: Dialog) => void

Dialog: object

属性说明类型
textdialog 内容string
...省略参考设置字段中 dialog 相关属性

prop 属性

属性支持 get/set类型备注
prop.SHOWsetbooleandialog 是否显示

代码示例

import { createWidget, widget, prop, align } from '@zos/ui'

Page({
build() {
const dialog = createWidget(widget.DIALOG, {
ok_text: 'OK',
cancel_text: 'CANCEL'
})
dialog.setProperty(prop.MORE, {
text: 'DIALOG',
content_text_size: 40,
content_bg_color: 0x000000,
content_text_color: 0xffffff,
dialog_align_h: align.CENTER_H,
content_text_align_h: align.CENTER_H,
content_text_align_v: align.CENTER_V,
ok_func: () => {
console.log('OK')
},
cancel_func: () => {
console.log('CANCEL')
}
})
dialog.setProperty(prop.SHOW, true)
}
})