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

Cursor and text editing

Start from API_LEVEL 4.0.

Call these methods on the text widget instance returned by createWidget(widget.TEXT, Param). Call enableCursor(true) to enable the cursor before using these methods.

enableCursor

enableCursor(enable: boolean): void

Enables or disables the text cursor. Set enable to true to enable it or false to disable it.

getCursorPos

getCursorPos(index: number): { x: number; y: number }

Gets the cursor position for the character at index. Returns a coordinate object:

Property	Type	Description
x	number	Horizontal offset relative to the text widget
y	number	Vertical offset relative to the text widget

getCursorIndex

getCursorIndex(x: number, y: number): number

Gets the cursor character index from coordinates. Both x and y are offsets relative to the text widget, using the same coordinate system as the result of getCursorPos.

getTextCount

getTextCount(): number

Gets the number of characters in the text.

insertString

insertString(index: number, str: string): void

Inserts the string str at the character index index.

deleteCharacter

deleteCharacter(index: number): void

Deletes one character at the character index index.

getCursorHeight

getCursorHeight(): number

Gets the cursor height in pixels.

getLineHeight

getLineHeight(): number

Gets the text line height in pixels.

Cursor and text editing example

This example enables the cursor, inserts and deletes text, then queries the character count, cursor position, and heights.

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

Page({
  build() {
    const text = createWidget(widget.TEXT, {
      x: 40,
      y: 120,
      w: 320,
      h: 160,
      color: 0xffffff,
      text_size: 28,
      align_h: align.LEFT,
      align_v: align.TOP,
      text_style: text_style.WRAP,
      text: 'Hello',
    })

    text.enableCursor(true)
    text.insertString(5, ', Zepp OS')
    text.deleteCharacter(5)

    // The text is now "Hello Zepp OS".
    console.log(text.getTextCount())

    const position = text.getCursorPos(0)
    console.log(position.x, position.y)
    console.log(text.getCursorIndex(position.x, position.y))
    console.log(text.getCursorHeight(), text.getLineHeight())
  },
})

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

Additional Examples

Example 1

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

createWidget(widget.TEXT, {
  x: 0,
  y: 0,
  w: 200,
  h: 200,
  text: 'hello',
  color: 0x34e073,
  align_h: align.LEFT,
  font: 'fonts/Pacifico-Regular.ttf',
})

Example 2

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

const rootContainer = createWidget(widget.VIRTUAL_CONTAINER, {
  layout: { x: '10vw', y: '10vh', width: '80vw', height: '50vh' },
})

const groupRoot = createWidget(widget.GROUP, {
  parent: rootContainer,
  layout: {
    display: 'flex',
    'flex-flow': 'row wrap',
    'column-gap': '20',
    'row-gap': '10',
    'justify-content': 'space-evenly',
    'align-items': 'center',
    width: '100%',
    height: '100%',
  },
})

for (let i = 0; i < 3; i += 1) {
  groupRoot.createWidget(widget.TEXT, {
    text: 'hello zepp os',
    color: 0x34e073,
    align_v: align.CENTER_V,
    layout: {
      width: '30%',
      height: '25%',
      'font-size': '16',
    },
  })
}