Skip to main content
Version: v3

TEXT

Start from API_LEVEL 2.0 . Please refer to API_LEVEL.

text_sample

Text widget for displaying text. Support setting text size, color, alignment, font.

Create UI widget

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

const text = createWidget(widget.TEXT, Param)

Type

Param: object

PropertiesDescriptionRequiredType
xThe x-axis coordinate of the widget.YESnumber
yThe y-axis coordinate of the widget.YESnumber
wThe width of the widget.YESnumber
hThe height of the widget.YESnumber
colorThe color of the text.NOnumber
align_hThe alignment of the horizontal axis (see ALIGN for values).NOALIGN
align_vAlignment of the vertical axis (see ALIGN for values).NOALIGN
textTextNOstring
text_sizeThe size of the font.NOnumber
text_styleText overlength handling, default is text_style.NONE (see TEXT_STYLE for value).NOTEXT_STYLE
line_spaceRow spacing.NOnumber
char_spaceCharacter Spacing.NOnumber
fontFont path, resource storage path reference Folder StructureNOstring
text_i18nMulti-language text support, refer to the code example, where the 'en-US' field is required, when the current country language is not configured, the value of 'en-US' will be used, when passed in this way, the text attribute is disabledNOobject

ALIGN alignment

ValueDescription
align.LEFTHorizontal axis-left aligned.
align.RIGHTHorizontal axis-align right.
align.CENTER_HHorizontal axis-centered.
align.TOPVertical axis-top.
align.BOTTOMVertical axis-bottommost.
align.CENTER_VVertical axis-centered.

TEXT_STYLE Text layout

ValueDescription
text_style.ELLIPSISSingle line overflow character display...
text_style.NONEKeep scrolling.
text_style.WRAPWrap

Code example

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

Page({
build() {
const text = createWidget(widget.TEXT, {
x: 96,
y: 120,
w: 288,
h: 46,
color: 0xffffff,
text_size: 36,
align_h: align.CENTER_H,
align_v: align.CENTER_V,
text_style: text_style.NONE,
text: 'HELLO ZEPPOS'
})

text.addEventListener(event.CLICK_DOWN, (info) => {
text.setProperty(prop.MORE, {
y: 200
})
})

const textWithFont = createWidget(widget.TEXT, {
x: 96,
y: 300,
w: 288,
h: 46,
color: 0xffffff,
text_size: 36,
align_h: align.CENTER_H,
align_v: align.CENTER_V,
text_style: text_style.NONE,
font: 'fonts/custom.ttf',
text_i18n: {
'en-US': 'Hello Zepp OS'
'zh-CN': '你好 Zepp OS'
}
})
}
})