BUTTON

Start from API_LEVEL 2.0 . Please refer to API_LEVEL.

The button widget supports setting images and colors for normal and pressed states.

Create UI widget

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

const button = createWidget(widget.BUTTON, Param)

Type

Param: object

Properties	Description	Required	Type	API_LEVEL
x	The x-coordinate of widgets	YES	number	2.0
y	The y-coordinate of widgets	YES	number	2.0
w	The width of widgets;If set to -1, the size of normal_src is preferred, otherwise the default is 100.	YES	number	2.0
h	The height of widgets;If set to -1, the size of normal_src is preferred, otherwise the default is 40.	YES	number	2.0
text	Text displayed on the button.	YES	string	2.0
color	The color of the text.	NO	number	2.0
text_size	The font size of the text.	NO	number	2.0
press_src	The image of background displayed when pressed. Need to be used with normal_src.	NO	string	2.0
normal_src	Normal state of the background image. Need to be used with press_src.	NO	string	2.0
press_color	The color of background when pressed. Need to be used with normal_color.	NO	number	2.0
normal_color	The color of normal state background. Need to be used with press_color.	NO	number	2.0
radius	Rounded corners when using color as button background.	NO	number	2.0
click_func	Callbacks for button clicks.	NO	ClickFunc	2.0
longpress_func	Callbacks for button long press(700ms).	NO	ClickFunc	2.0
font	Font path, resource storage path reference directory structure	NO	string	3.6

caution

• When neither the background nor the color of the button is set, the default click state background color is used (normal black click gray)
• When both the background and color of the button are set, the background color is used instead of the background image.
• The radius field is only useful when the background color is set
• background color normal_color and press_color need to be set at the same time for the background color to take effect
• The background color normal_src and the press background color press_color need to be set at the same time for the background color to take effect
• When using widget.setProperty API to modify BUTTON widget properties, you need to pass in the required fields x, y, w, h (refer to the code example)

ClickFunc

(button: Button) => void

The button instance created by the createWidget method.

Code example

tip

Please refer to Design Resources for the image resources in the code example

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

Page({
  build() {
    const img_button = createWidget(widget.BUTTON, {
      x: (480 - 96) / 2,
      y: 120,
      text: 'Hello',
      w: -1,
      h: -1,
      normal_src: 'button_normal.png',
      press_src: 'button_press.png',
      click_func: () => {
        console.log('button click')
      }
    })

    createWidget(widget.BUTTON, {
      x: (480 - 400) / 2,
      y: 240,
      w: 400,
      h: 100,
      radius: 12,
      normal_color: 0xfc6950,
      press_color: 0xfeb4a8,
      text: 'Hello',
      click_func: (button_widget) => {
        button_widget.setProperty(prop.MORE, {
          x: (480 - 400) / 2,
          y: 300,
          w: 400,
          h: 100
        })
      }
    })
  }
})