TEXT

Start from API_LEVEL 2.0. Please refer to API_LEVEL.

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

Properties	Description	Required	Type
x	The x-axis coordinate of the widget	YES	number
y	The y-axis coordinate of the widget	YES	number
w	The width of the widget	YES	number
h	The height of the widget	YES	number
color	The color of the text	NO	number
align_h	The alignment of the horizontal axis (see ALIGN for values)	NO	ALIGN
align_v	Alignment of the vertical axis (see ALIGN for values)	NO	ALIGN
text	Text	NO	string
text_size	The size of the font	NO	number
text_style	Text overlength handling, default is scrolling text (see TEXT_STYLE for values)	NO	TEXT_STYLE
line_space	Row spacing	NO	number
char_space	Character spacing	NO	number
font	Font path, resource storage path reference Folder Structure	NO	string
text_i18n	Multi-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 disabled	NO	object
start_angle	Arc layout starting angle	NO	number
end_angle	Arc layout ending angle (start_angle < end_angle)	NO	number
mode	Arc layout mode, default 0 0: inner 1: outer	NO	number
radius	Controls the arc layout radius, defaults to half of the widget's width and height	NO	number

ALIGN alignment

Value	Description
align.LEFT	Horizontal axis-left aligned
align.RIGHT	Horizontal axis-right aligned
align.CENTER_H	Horizontal axis-centered
align.TOP	Vertical axis-top
align.BOTTOM	Vertical axis-bottom
align.CENTER_V	Vertical axis-centered

TEXT_STYLE Text layout

Value	Description
text_style.ELLIPSIS	Single line overflow character display...
text_style.NONE	Scrolling text
text_style.WRAP	Line wrap

Property Access Support List

Property	setProperty	getProperty	setter	getter
x	Y	Y	Y	Y
y	Y	Y	Y	Y
w	Y	Y	Y	Y
h	Y	Y	Y	Y
color	Y	Y	Y	Y
align_h	Y	Y	Y	Y
align_v	Y	Y	Y	Y
text	Y	Y	Y	Y
text_size	Y	Y	Y	Y
font	Y	Y	Y	Y
text_style	Y	Y	Y	Y
line_space	Y	Y	Y	Y
char_space	Y	Y	Y	Y
text_i18n	N	N	Y	Y
start_angle	N	N	N	N
end_angle	N	N	N	N
mode	N	N	N	N
radius	N	N	N	N

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