picker

type

string

-

No

Dynamic modification is not supported. Available values include:

• text: text selector
• data: date selector
• time: time selector
• datetime: date and time selector
• multi-text: multi-column text selector

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 a component is disabled. If it is disabled, it cannot respond to user interaction.

data

string

-

No

Attribute set for a component to facilitate data storage and reading.

range

Array

-

No

Value range of the common selector, for example, ["15", "20", "25"].

selected

string

0

No

Default value of the common selector. The value should be the index of range.

value

string

-

No

Value of the common selector.

start

<time>

1970-1-1

No

Start date, in format of YYYY-MM-DD.

end

<time>

2100-12-31

No

End date, in format of YYYY-MM-DD.

selected

string

Current date

No

Default value of the date selector, in format of YYYY-MM-DD.

value

string

-

Yes

Value of the date selector.

lunar⁵⁺

boolean

false

No

Whether the pop-up window displays the lunar calendar.

containsecond

boolean

false

No

Whether seconds are contained.

selected

string

Current time

No

Default value of the time selector, in format of HH:mm. If seconds are contained, the format is HH:mm:ss.

value

string

-

No

Value of the time selector.

hours

number

-⁵⁺

No

Time format used by the time selector. Available values include:

• 12: displayed in 12-hour format and distinguished by a.m. and p.m.
• 24: displayed in 24-hour format
  NOTE:

  The default value is the most commonly-used hour format in the current locale. ⁵⁺

selected

string

Current date and time

No

Default value of the date and time selector. The value can be in the format of MM-DD-HH-mm or YYYY-MM-DD-HH-mm. If the year is not set, the current year is used by default. The value you set is the date selected by default in the pop-up window.

value

string

-

Yes

Value of the date and time selector.

hours

number

24

-⁵⁺

No

Time format used by the date and time selector. Available values include:

• 12: displayed in 12-hour format and distinguished by a.m. and p.m.
• 24: displayed in 24-hour format
  NOTE:

  The default value is the most commonly-used hour format in the current locale. ⁵⁺

lunar⁵⁺

boolean

false

No

Whether the pop-up window displays the lunar calendar.

columns

number

-

Yes

Number of columns in the multi-column text selector.

range

Two-dimensional array

-

No

Items of the multi-column text selector. range is a two-dimensional array that indicates the number of columns. Each item in the array indicates the data of each column, for example, [["a","b"], ["c","d"]].

selected

Array

0,0,0,...

No

Default value of the multi-column text selector, which is an array consisting of the indexes of the selected items in each column.

value

Array

-

No

Value of the multi-column text selector, which is an array consisting of the values of the selected items in each column.

touchstart

TouchEvent

The tapping starts

touchmove

TouchEvent

The tapping moves

touchcancel

TouchEvent

The tapping is interrupted

touchend

TouchEvent

The tapping ends

longpress

-

A component is long pressed

swipe⁵⁺

SwipeEvent

A user quickly swipes on a component.

change

{ newValue:newValue, newSelected:newSelected }

Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. newSelected is the index.

cancel

-

Triggered when the cancel button is clicked.

change

{ year:year, month:month, day:day }

Triggered when a value is selected and the OK button is clicked in the displayed pop-up window.

cancel

-

Triggered when the cancel button is clicked.

change

{ year:year, month:month, day:day, hour:hour, minute:minute}

Triggered when a value is selected and the OK button is clicked in the displayed pop-up window.

cancel

-

Triggered when the cancel button is clicked.

change

{ hour:hour, minute:minute,

[second:second] }

Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. If containsecond is set to true, value contains seconds.

cancel

-

Triggered when the cancel button is clicked.

change

{newValue:[newValue1, newValue2, newValue3, ...], newSelected:[newSelected1, newSelected2, newSelected3, ...]}

Triggered when an item is selected and the OK button is clicked in the displayed pop-up window.

• newValue is an array consisting of the values of the selected items.
• newSelected is an array consisting of the indexes of the selected items. The lengths of newValue and newSelected are the same as the length of range.

columnchange

{ column:column, newValue:newValue, newSelected:newSelected }

Triggered when the value of a column in the multi-column text selector changes.

• column indicates the column whose value has changed.
• newValue indicates the selected value.
• newSelected indicates the index of the selected value.

cancel

-

Triggered when the cancel button is clicked.

text-color

<color>

#e6000000

No

Text color of the selector.

font-size

<length>

30px

No

Font size of the selector.

allow-scale

boolean

true

No

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

letter-spacing

<length>

0

No

Letter spacing of the selector. For details, see letter-spacing of the text component.

text-decoration

string

-

No

Text decoration of the selector. For details, see text-decoration of the text component.

font-style

string

normal

No

Font style of the selector. For details, see font-style of the text component.

font-weight

number | string

normal

No

Font weight of the selector. For details, see font-weight of the text component.

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.

line-height

<length>

0px

No

Text line height of the selector.

column-height⁵⁺

<length>

-

No

Height of the selector option list.

width

<length> | <percentage>

-

No

Component width.

If this attribute is not set, the width required for the element content is used.

height

<length> | <percentage>

-

No

Component height.

If this length attribute is not set, the length required for the element content is used.

padding

<length> | <percentage>⁵⁺

0

No

Shorthand attribute to set all padding attributes.

padding-[left|top|right|bottom]

<length> | <percentage>⁵⁺

0

No

Left, top, right, and bottom padding (in px).

padding-[start|end]

<length> | <percentage>⁵⁺

0

No

Start and end padding.

margin

<length> | <percentage>⁵⁺

0

No

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

• If you set only one value, it specifies the margin for all the four sides.

• If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

• If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

• If you set four values, they are margins for top, right, bottom, and left sides, respectively.

margin-[left|top|right|bottom]

<length> | <percentage>⁵⁺

0

No

Left, top, right, and bottom margins.

margin-[start|end]

<length> | <percentage>⁵⁺

0

No

Start and end margins.

border

-

0

No

Shorthand attribute to set all borders. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set.

border-style

string

solid

No

Shorthand attribute to set the style for all borders. Available values are as follows:

• dotted: Dotted border. The radius of a dot is half of border-width.
• dashed: Dashed border

• solid: Solid border

border-[left|top|right|bottom]-style

string

solid

No

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

border-[left|top|right|bottom]

-

-

No

Shorthand attribute to set the borders for every side respectively. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set.

border-width

<length>

0

No

Shorthand attribute to set the width of all borders, or separately set the width of each border.

border-[left|top|right|bottom]-width

<length>

0

No

Attribute to set widths of left, top, right, and bottom borders.

border-color

<color>

black

No

Shorthand attribute to set the color of all borders, or separately set the color of each border.

border-[left|top|right|bottom]-color

<color>

black

No

Attribute to set colors of left, top, right, and bottom borders.

border-radius

<length>

-

No

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

border-[top|bottom]-[left|right]-radius

<length>

-

No

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

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.

Example:

background-image: url("/common/background.png")

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

How a background image is repeatedly drawn. 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

How and whether to display the box containing an element. Available values are as follows:

• flex: flexible layout
• none: The element is hidden.

visibility

string

visible

No

Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the display attribute to none.) Available values are as follows:

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

flex

-

-

No

How to divide available space of the parent component for a child component.

You can set one, two⁵⁺, or three⁵⁺ values for this style.

Set one value in either of the following ways:

• A unitless number to set flex-grow.
• A valid width value⁵⁺ to set flex-basis.

Set two values⁵⁺ in the following ways:

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

• A unitless number to set flex-shrink.
• A valid width value to set flex-basis.

Set three values⁵⁺ in the following ways:

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

flex-grow

number

0

No

How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value 0 indicates that the child component does not grow.

flex-shrink

number

1

No

How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value 0 indicates that the child component does not shrink.

flex-basis

<length>

-

No

Initial length of the flex item on the main axis.

position

string

relative

No

Positioning type of an element. Dynamic changes are not supported.

• fixed: The element is positioned related to the browser window.
• absolute: The element is positioned absolutely to its parent element.
• relative: The element is positioned relative to its normal position.

[left|top|right|bottom]

<length>

-

No

left|top|right|bottom must be used together with position to determine the offset position of an element.

• The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
• The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
• The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
• The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.

show

-

Displays the picker.