Universal Attributes

NOTE Universal attributes are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

Common Attributes

Common attributes are used to set component identities and appearance.

Name Type Default Value Mandatory Description
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 the component to facilitate data storage and reading. In the JS file:
- Use e.target.attr.data to read data in the event callback, where e is the input parameter.
- After a DOM element is obtained by using $element or $refs, it can be accessed through attr.data.
NOTE: It is recommended that you use data-* since API version 6.
data-*6+ string - No Attribute set for components to facilitate data storage and reading. The value is case insensitive. For example, data-A and data-a are the same by default. In the JS file:
- Use e.target.dataSet.a to read data in the event callback, where e is the input parameter.
- After a DOM element is obtained by using $element or $refs, it can be accessed through dataSet.a.
click-effect5+ string - No Click effect complying with spring physics. Available values are as follows:
- spring-small: The component scales down to 90% of its size when it is selected. This is appropriate for small components.
- spring-medium: The component scales down to 95% of its size when it is selected. This is appropriate for medium-sized components.
- spring-large: The component scales down to 95% of its size when it is selected. This is appropriate for large components.
dir6+ string auto No Element layout mode. The value can be:
- rtl: right-to-left layout.
- ltr: left-to-right layout.
- auto: follows the system language environment.

Rendering Attributes

Rendering attributes are used to set whether a component is rendered.

Name Type Default Value Description
for Array - Expands the current element based on the configured data list.
if boolean - Whether the element is added or removed.
show boolean - Whether the element is displayed or hidden.

img NOTE: Do not set styles in attribute fields.