Skip to main content
Version: v3

DIALOG

Start from API_LEVEL 2.0 . Please refer to API_LEVEL.

dialog_sample.jpg

Dialog popup consists of a piece of text and two buttons. The popup box disappears when the buttons are clicked.

caution

At this stage DIALOG needs to be set twice, the first time to set the text of ok and cancel buttons, and the second time to set the properties of text and DIALOG widget alignment, please refer to the usage examples for details.

Create UI widget

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

const dialog = createWidget(widget.DIALOG, Param)

Type

Param: object

PropertiesDescriptionRequiredType
textContents of dialog.YESstring
content_text_sizeThe text size of the dialog content.NOnumber
content_text_colorThe text color of the dialog content.NOnumber
content_bg_colorThe background color of the dialog content.NOnumber
content_text_align_hAlignment of dialog content text.(horizontal axis)NOstring
content_text_align_vAlignment of dialog content text.(vertical axis)NOstring
ok_textText on the confirmed button.NOstring
ok_text_colorThe color of the text on the confirmed button.NOnumber
ok_press_colorThe color when the confirmed button is pressed.NOnumber
ok_nomal_colorThe color when the confirmed button is normal.NOnumber
ok_press_srcBackground image when the confirmed button is pressed.NOstring
ok_nomal_srcBackground image when the confirmed button is normal.NOstring
cancel_textText on the canceled button.NOstring
cancel_text_colorThe color of the text on the canceled button.NOnumber
cancel_press_colorThe color when the canceled button is pressed.NOnumber
cancel_nomal_colorThe color when the canceled button is normal.NOnumber
cancel_press_srcBackground image when the canceled button is pressed.NOstring
cancel_nomal_srcBackground image when the canceled button is normal.NOstring
dialog_align_hThe horizontal axis of the dialog.NOnumber
dialog_align_vThe vertical axis of the dialog.NOnumber
ok_funcClick the callback of the confirmed button.NO(dialog: Dialog) => void
cancel_funcClick the callback of the canceled button.NO(dialog: Dialog) => void

Dialog: object

PropertyDescriptionType
textThe content of dialog.string
... omittedRefer to dialog related properties in the setting field

prop Properties

PropertiesSupport get/setTypeNotes
prop.SHOWsetbooleandialog whether to display.

Code example

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