1# Universal Attributes
2
3>  **NOTE**
4>
5>  Universal attributes are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7## Common Attributes
8
9Common attributes are used to set component identities and appearance.
10
11| Name                       | Type     | Default Value  | Mandatory  | Description                                      |
12| ------------------------- | ------- | ----- | ---- | ---------------------------------------- |
13| id                        | string  | -     | No   | Unique ID of the component.                                |
14| style                     | string  | -     | No   | Style declaration of the component.                                |
15| class                     | string  | -     | No   | Style class of the component, which is used to refer to a style table.                         |
16| ref                       | string  | -     | No   | Reference information of child elements or child components, which is registered with the parent component on `$refs`.|
17| disabled                  | boolean | false | No   | Whether the component is disabled. If it is disabled, it cannot respond to user interaction.           |
18| 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>- Use `$element` or `$refs` to obtain a DOM element, which can then be accessed through **attr.data**.<br>You are advised to use **data-*** instead since API version 6.|
19| data-\*<sup>6+</sup>      | string  | -     | No   | Attribute set for the component 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**.|
20| 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.|
21| dir<sup>6+</sup>          | string  | auto  | No   | Element layout mode. Available values are as follows:<br>- **rtl**: right-to-left layout.<br>- **ltr**: left-to-right layout.<br>- **auto**: follows the system language environment.|
22
23
24## Rendering Attributes
25
26Rendering attributes are used to set whether a component is rendered.
27
28| Name  | Type     | Default Value | Description                      |
29| ---- | ------- | ---- | ------------------------ |
30| for  | Array   | -    | Expands the current element based on the configured data list.       |
31| if   | boolean | -    | Whether the element is added or removed.|
32| show | boolean | -    | Whether the element is displayed or hidden.|
33
34>  **NOTE**
35>
36>  Do not set styles in attribute fields.
37
38## Example
39
40### Example 1
41
42```html
43<!-- xxx.hml -->
44<div id="container">
45    <button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
46	<list class="list">
47		<list-item for="{{ array }}" class="listItem">
48			<text class="text" onclick="toggleShow" show="{{ visible }}"
49                  if="{{ display }}">{{ $item.value }}</text>
50		</list-item>
51	</list>
52</div>
53```
54
55```css
56/* xxx.css */
57#container {
58    flex-direction: column;
59    width: 100%;
60    margin-top: 10px;
61}
62.text {
63    font-size: 50px;
64    font-weight: 500;
65    margin-left: 12px;
66}
67.listItem {
68    width: 100%;
69    height: 100px;
70    line-height: 60px;
71    border-bottom: 1px solid #DEDEDE;
72    font-size: 20px;
73}
74.btn{
75    width: 280px;
76    font-size: 26px;
77    margin: 10px 0;
78}
79```
80
81```js
82// xxx.js
83export default {
84	data: {
85        visible: true,
86        display: true,
87        title: "",
88        i: 4,
89        array: [
90            {"value": "Item 0"},
91            {"value": "Item 1"},
92            {"value": "Item 2"},
93            {"value": "Item 3"},
94        ],
95    },
96    toggleShow: function() {
97        this.array.push ({"value": "Item" + this.i })
98        this.i++
99    },
100    toggleDisplay: function() {
101        this.display = !this.display
102    },
103}
104```
105
106![en-us-attributes](figures/en-us-attributes.gif)
107
108### Example 2
109
110```html
111<!-- xxx.hml -->
112<div class="container">
113    <div>
114        <text class="text1" dir='rtl' >hello world</text>
115    </div>
116    <div>
117        <text class="text2" dir='ltr' >hello world</text>
118    </div>
119</div>
120```
121
122```css
123/* xxx.css */
124.container {
125    display: flex;
126    flex-direction: column;
127    justify-content: center;
128    align-items: center;
129    width: 100%;
130    height: 100%;
131}
132.text1{
133    width: 90%;
134    height: 100px;
135    background-color: aqua;
136}
137.text2{
138    width: 90%;
139    height: 100px;
140    background-color: blue;
141}
142```
143
144![en-us_image1](figures/en-us_image1.png)
145