1# Universal Attributes 2 3> **NOTE** 4> Universal attributes are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 5 6## Common Attributes 7 8Common attributes are used to set component identities and appearance. 9 10 11 12| Name | Type | Default Value | Mandatory | Description | 13| -------------- | ------- | ------------- | --------- | ------------------------------------------------------------ | 14| id | string | - | No | Unique ID of a component. | 15| style | string | - | No | Style declaration of a component. | 16| class | string | - | No | Style class of a component, which is used to refer to a style table. | 17| 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**. | 18| disabled | boolean | false | No | Whether a component is disabled. If it is disabled, it cannot respond to user interaction. | 19| data | string | - | No | Attribute set for the component to facilitate data storage and reading. In the JS file:<br>- Use **e.target.attr.data** to read data in the event callback, where **e** is the input parameter.<br>- After a DOM element is obtained by using **$element** or **$refs**, it can be accessed through **attr.data**.<br>**NOTE:** It is recommended that you use **data-\*** since API version 6. | 20| data-*<sup>6+</sup> | 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:<br>- Use **e.target.dataSet.a** to read data in the event callback, where **e** is the input parameter.<br>- After a DOM element is obtained by using **$element** or **$refs**, it can be accessed through **dataSet.a**. | 21| click-effect<sup>5+</sup> | string | - | No | Click effect complying with spring physics. Available values are as follows:<br>- **spring-small**: The component scales down to 90% of its size when it is selected. This is appropriate for small components.<br>- **spring-medium**: The component scales down to 95% of its size when it is selected. This is appropriate for medium-sized components.<br>- **spring-large**: The component scales down to 95% of its size when it is selected. This is appropriate for large components. | 22| dir<sup>6+</sup> | string | auto | No | Element layout mode. The value can be:<br>- **rtl**: right-to-left layout.<br>- **ltr**: left-to-right layout.<br>- **auto**: follows the system language environment. | 23 24## Rendering Attributes 25 26Rendering attributes are used to set whether a component is rendered. 27 28 29 30| Name | Type | Default Value | Description | 31| ---- | ------- | ------------- | ------------------------------------------------------------ | 32| for | Array | - | Expands the current element based on the configured data list. | 33| if | boolean | - | Whether the element is added or removed. | 34| show | boolean | - | Whether the element is displayed or hidden. | 35 36>  **NOTE:** Do not set styles in attribute fields.
