toolbar-item

value

string

-

Yes

Text content of the operation option.

icon

string

-

Yes

Icon image path, which is displayed on the option text. The value can be a local path. Supported image formats are PNG, JPG, and SVG.

id

string

-

No

Unique ID of a component.

style

string

-

No

Style declaration of a component.

class

string

-

No

Style class of a component, which is used to refer to a style table.

ref

string

-

No

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

disabled

boolean

false

No

Whether the component is disabled. If it is disabled, it cannot respond to user interaction.

data

string

-

No

Attribute set for components to facilitate data storage and reading.

color

<color>

#e6000000

No

Text color.

font-size

<length>

16px

No

Text size.

allow-scale

boolean

true

No

Whether the text size changes with the system's font size settings.

font-style

string

normal

No

Text font style. Available values are as follows:

1. normal: standard font style
2. italic: italic font style

font-weight

number|string

normal

No

Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are lighter, normal, bold, or bolder.

text-decoration

string

none

No

Text modifier. Available values are as follows:

1. underline: An underline is used.
2. line-through: A strikethrough is used.
3. none: The standard text is used.

font-family

string

sans-serif

No

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

background

<linear-gradient>

-

No

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

background-color

<color>

-

No

Background color.

background-image

string

-

No

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

background-size

• string
• <length> <length>
• <percentage> <percentage>

auto

No

Background image size.

• The string values are as follows:
  • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
  • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
  • auto: The original image width-height ratio is retained.
• The two <length> values are as follows:

  Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

• The two <percentage> values are as follows:

  Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

background-repeat

string

repeat

No

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

• repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
• repeat-x: Repeatedly draws images along the x-axis.
• repeat-y: Repeatedly draws images along the y-axis.
• no-repeat: The image is not drawn repeatedly.

background-position

• string string
• <length> <length>
• <percentage> <percentage>

0px 0px

No

• Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
  • left: leftmost in the horizontal direction
  • right: rightmost in the horizontal direction
  • top: top in the vertical direction
  • bottom: bottom in the vertical direction
  • center: center position

• Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
• Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
• Using both <percentage> and <length>.

opacity

number

1

No

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

display

string

flex

No

Type of the box containing an element. Available values are as follows:

• flex: flexible layout
• none: The box is disabled.

visibility

string

visible

No

Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the display attribute to none.) Available values are as follows:

• visible: The box is visible.
• hidden: The box is hidden but still takes up space.

touchstart

TouchEvent

The tapping starts

touchmove

TouchEvent

The tapping moves

touchcancel

TouchEvent

The tapping is interrupted

touchend

TouchEvent

The tapping ends

click

-

A component is clicked

longpress

-

A component is long pressed

swipe⁵⁺

SwipeEvent

A user quickly swipes on a component.