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 text_style.NONE (see TEXT_STYLE for value).	NO	TEXT_STYLE
line_space	Row spacing.	NO	number
char_space	Character Spacing.	NO	number
font	Font path, resource storage path reference Folder Structure	否	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

ALIGN alignment

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

TEXT_STYLE Text layout

Value	Description
text_style.ELLIPSIS	Single line overflow character display...
text_style.NONE	Keep scrolling.
text_style.WRAP	Wrap

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