Name	Type	Default Value	Mandatory	Description
numstars	number	5	No	Maximum number of rating stars.
rating	number	0	No	Current rating stars.
indicator	boolean	false	No	Whether to make the rating icons as an indicator (not-editable by users).
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.

Name

Type

Default Value

Mandatory

Description

numstars

number

Maximum number of rating stars.

rating

number

Current rating stars.

indicator

boolean

false

Whether to make the rating icons as an indicator (not-editable by users).

string

Unique ID of a component.

style

string

Style declaration of a component.

class

string

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

ref

string

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

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

data

string

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

Name	Parameter	Triggered when
change	{ rating: current rating }	Triggered when the rating value changes.
touchstart	TouchEvent	The tapping starts
touchmove	TouchEvent	The tapping moves
touchcancel	TouchEvent	The tapping is interrupted
touchend	TouchEvent	The tapping ends
swipe⁵⁺	SwipeEvent	A user quickly swipes on a component.

Name

Parameter

Triggered when

change

{ rating: current rating }

Triggered when the rating value changes.

touchstart

TouchEvent

The tapping starts

touchmove

TouchEvent

The tapping moves

touchcancel

TouchEvent

The tapping is interrupted

touchend

TouchEvent

The tapping ends

swipe⁵⁺

SwipeEvent

A user quickly swipes on a component.

Name	Type	Default Value	Mandatory	Description
star-background	string	-	No	Background image when a rating star is unselected. Only PNG and JPG images in a local path are supported.
star-foreground	string	-	No	Foreground image when a rating star is selected. Only PNG and JPG images in a local path are supported.
star-secondary	string	-	No	Secondary background image when a rating star is partially selected. This image will cover the background image and can only be a PNG or JPG image from a local path.
width	<length>\|<percentage>	120px 60px (cannot be edited)	No	Image width. The default value is the width of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.
height	<length>\|<percentage>	24px 12 px (cannot be edited)	No	Image height. The default value is the height of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.
rtl-flip	boolean	true	No	Whether the image source is automatically flipped in the RTL text direction.
padding	<length> \| <percentage>⁵⁺	0	No	Shorthand attribute to set all padding attributes. The attribute can have one to four values: If you set only one value, it specifies the padding for four sides. If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding. If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding. If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).
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. NOTE: If both visibility and display are set, only display takes effect.
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. NOTE: This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>⁵⁺, and <tabs>.
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. NOTE: This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>⁵⁺, and <tabs>.
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. NOTE: This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>⁵⁺, and <tabs>.
flex-basis	<length>	-	No	Initial length of the flex item on the main axis. NOTE: This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>⁵⁺, and <tabs>.
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. NOTE: The absolute attribute takes effect only when the parent component is <div> or <stack>.
[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.

Name

Type

Default Value

Mandatory

Description

star-background

string

Background image when a rating star is unselected. Only PNG and JPG images in a local path are supported.

star-foreground

string

Foreground image when a rating star is selected. Only PNG and JPG images in a local path are supported.

star-secondary

string

Secondary background image when a rating star is partially selected. This image will cover the background image and can only be a PNG or JPG image from a local path.

width

120px

60px (cannot be edited)

Image width. The default value is the width of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.

height

24px

12 px (cannot be edited)

Image height. The default value is the height of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.

rtl-flip

boolean

true

Whether the image source is automatically flipped in the RTL text direction.

padding

<length> | <percentage>⁵⁺

Shorthand attribute to set all padding attributes.

The attribute can have one to four values:

If you set only one value, it specifies the padding for four sides.
If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.
If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.
If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

padding-[left|top|right|bottom]

<length> | <percentage>⁵⁺

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

padding-[start|end]

<length> | <percentage>⁵⁺

Start and end padding.

margin

<length> | <percentage>⁵⁺

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>⁵⁺

Left, top, right, and bottom margins.

margin-[start|end]

<length> | <percentage>⁵⁺

Start and end margins.

border

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

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

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

border-[left|top|right|bottom]

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

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

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

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

border-color

<color>

black

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

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

border-radius

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

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

background

<linear-gradient>

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

background-color

<color>

Background color.

background-image

string

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

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

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

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

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

display

string

flex

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

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.

NOTE:

If both visibility and display are set, only display takes effect.

flex

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.

NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>⁵⁺, and <tabs>.

flex-grow

number

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.

NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>⁵⁺, and <tabs>.

flex-shrink

number

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.

NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>⁵⁺, and <tabs>.

flex-basis

Initial length of the flex item on the main axis.

NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>⁵⁺, and <tabs>.

position

string

relative

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.

NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

[left|top |right|bottom]

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.