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 widgetYESnumber
yThe y-axis coordinate of the widgetYESnumber
wThe width of the widgetYESnumber
hThe height of the widgetYESnumber
colorThe color of the textNOnumber
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 fontNOnumber
text_styleText overlength handling, default is scrolling text (see TEXT_STYLE for values)NOTEXT_STYLE
line_spaceRow spacingNOnumber
char_spaceCharacter spacingNOnumber
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
start_angleArc layout starting angleNOnumber
end_angleArc layout ending angle (start_angle < end_angle)NOnumber
modeArc layout mode, default 0
0: inner
1: outer
NOnumber
radiusControls the arc layout radius, defaults to half of the widget's width and heightNOnumber

ALIGN alignment

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

TEXT_STYLE Text layout

ValueDescription
text_style.ELLIPSISSingle line overflow character display...
text_style.NONEScrolling text
text_style.WRAPLine wrap

Property Access Support List

PropertysetPropertygetPropertysettergetter
xYYYY
yYYYY
wYYYY
hYYYY
colorYYYY
align_hYYYY
align_vYYYY
textYYYY
text_sizeYYYY
fontYYYY
text_styleYYYY
line_spaceYYYY
char_spaceYYYY
text_i18nNNYY
start_angleNNNN
end_angleNNNN
modeNNNN
radiusNNNN

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, Zepp OS'
})

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