<tdclass="cellrowborder"valign="top"width="51.78482151784822%"headers="mcps1.1.6.1.5 "><pid="a692121725a9b4ebbae65cd22b94b672e"><aname="a692121725a9b4ebbae65cd22b94b672e"></a><aname="a692121725a9b4ebbae65cd22b94b672e"></a>Unique ID of a component.</p>
<tdclass="cellrowborder"valign="top"width="51.78482151784822%"headers="mcps1.1.6.1.5 "><pid="ab9c92d331da44a0e9114f6760340680a"><aname="ab9c92d331da44a0e9114f6760340680a"></a><aname="ab9c92d331da44a0e9114f6760340680a"></a>Style declaration of a component.</p>
<tdclass="cellrowborder"valign="top"width="51.78482151784822%"headers="mcps1.1.6.1.5 "><pid="a2f6321cf45ae481983a88dcc2f900900"><aname="a2f6321cf45ae481983a88dcc2f900900"></a><aname="a2f6321cf45ae481983a88dcc2f900900"></a>Style class of a component, which is used to refer to a style table.</p>
<tdclass="cellrowborder"valign="top"width="51.78482151784822%"headers="mcps1.1.6.1.5 "><pid="p113416153342"><aname="p113416153342"></a><aname="p113416153342"></a>Used to register reference information of child elements<spanid="ph5815920163518"><aname="ph5815920163518"></a><aname="ph5815920163518"></a> or child components</span>. The reference information is registered with the parent component on <strongid="b08212202354"><aname="b08212202354"></a><aname="b08212202354"></a>$refs</strong>.</p>
<tdclass="cellrowborder"valign="top"width="51.78482151784822%"headers="mcps1.1.6.1.5 "><pid="a4065980a1e914cf98acce5250ee4ae5a"><aname="a4065980a1e914cf98acce5250ee4ae5a"></a><aname="a4065980a1e914cf98acce5250ee4ae5a"></a>Whether a component is disabled. If it is disabled, it cannot respond to user interaction.</p>
<tdclass="cellrowborder"valign="top"width="51.78482151784822%"headers="mcps1.1.6.1.5 "><pid="p84627247592"><aname="p84627247592"></a><aname="p84627247592"></a>Attribute set for the component to facilitate data storage and reading. In the JS file:</p>
<aname="ul711919169212"></a><aname="ul711919169212"></a><ulid="ul711919169212"><li>Use <strongid="b20252034115"><aname="b20252034115"></a><aname="b20252034115"></a>e.target.attr.data</strong> to read data in the event callback, where <strongid="b11257020416"><aname="b11257020416"></a><aname="b11257020416"></a>e</strong> is the input parameter.</li><li>After a DOM element is obtained by using <strongid="b772121564115"><aname="b772121564115"></a><aname="b772121564115"></a>$element</strong> or <strongid="b872151510415"><aname="b872151510415"></a><aname="b872151510415"></a>$refs</strong>, it can be accessed through <strongid="b87221415194114"><aname="b87221415194114"></a><aname="b87221415194114"></a>attr.data</strong>.</li></ul>
<divclass="note"id="note259213045911"><aname="note259213045911"></a><aname="note259213045911"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p359213019595"><aname="p359213019595"></a><aname="p359213019595"></a>It is recommended that you use <strongid="b1593375914218"><aname="b1593375914218"></a><aname="b1593375914218"></a>data-*</strong> since API version 6.</p>
<tdclass="cellrowborder"valign="top"width="51.78482151784822%"headers="mcps1.1.6.1.5 "><pid="p610744434310"><aname="p610744434310"></a><aname="p610744434310"></a>Attribute set for components to facilitate data storage and reading. The value is case insensitive. For example, <strongid="b7757423124815"><aname="b7757423124815"></a><aname="b7757423124815"></a>data-A</strong> and <strongid="b1049102612487"><aname="b1049102612487"></a><aname="b1049102612487"></a>data-a</strong> are the same by default. In the JS file:</p>
<aname="ul9134650114317"></a><aname="ul9134650114317"></a><ulid="ul9134650114317"><li>Use <strongid="b1338175312483"><aname="b1338175312483"></a><aname="b1338175312483"></a>e.target.dataSet.a</strong> to read data in the event callback, where <strongid="b138471636492"><aname="b138471636492"></a><aname="b138471636492"></a>e</strong> is the input parameter.</li><li>After a DOM element is obtained by using <strongid="b2839121914493"><aname="b2839121914493"></a><aname="b2839121914493"></a>$element</strong> or <strongid="b1335192220493"><aname="b1335192220493"></a><aname="b1335192220493"></a>$refs</strong>, it can be accessed through <strongid="b520902715495"><aname="b520902715495"></a><aname="b520902715495"></a>dataSet.a</strong>.</li></ul>
<tdclass="cellrowborder"valign="top"width="51.78482151784822%"headers="mcps1.1.6.1.5 "><pid="p5696144719319"><aname="p5696144719319"></a><aname="p5696144719319"></a>Click effect complying with spring physics. Available values are as follows:</p>
<aname="ul208595598331"></a><aname="ul208595598331"></a><ulid="ul208595598331"><li><strongid="b98443266469"><aname="b98443266469"></a><aname="b98443266469"></a>spring-small</strong>: The component scales down to 90% of its size when it is selected. This is appropriate for small components.</li><li><strongid="b126112616177"><aname="b126112616177"></a><aname="b126112616177"></a>spring-medium</strong>: The component scales down to 95% of its size when it is selected. This is appropriate for medium-sized components.</li><li><strongid="b1088450587"><aname="b1088450587"></a><aname="b1088450587"></a>spring-large</strong>: The component scales down to 95% of its size when it is selected. This is appropriate for large components.</li></ul>
<tdclass="cellrowborder"valign="top"width="51.78482151784822%"headers="mcps1.1.6.1.5 "><pid="p1154612321525"><aname="p1154612321525"></a><aname="p1154612321525"></a>Element layout mode. The value can be:</p>
<aname="ul1270142317311"></a><aname="ul1270142317311"></a><ulid="ul1270142317311"><li><strongid="b9391123155013"><aname="b9391123155013"></a><aname="b9391123155013"></a>rtl</strong>: right-to-left layout.</li><li><strongid="b189610376502"><aname="b189610376502"></a><aname="b189610376502"></a>ltr</strong>: left-to-right layout.</li><li><strongid="b838758185118"><aname="b838758185118"></a><aname="b838758185118"></a>auto</strong>: follows the system language environment.</li></ul>
</td>
</tr>
</tbody>
</table>
| Name | Type | Default Value | Mandatory | Description |
| id | string | - | No | Unique ID of the component. |
| style | string | - | No | Style declaration of the component. |
| class | string | - | No | Style class of the component, which is used to refer to a style table. |
| ref | string | - | No | Reference information of child elements or child components, which is registered with the parent component on `$refs`.|
| disabled | boolean | false | No | Whether the 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:<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.|
| 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**.|
| 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.|
| 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.|
<tdclass="cellrowborder"valign="top"width="59%"headers="mcps1.1.5.1.4 "><pid="ac2b2f9636e3e434ab434d20640129478"><aname="ac2b2f9636e3e434ab434d20640129478"></a><aname="ac2b2f9636e3e434ab434d20640129478"></a>Expands the current element based on the configured data list.</p>
<tdclass="cellrowborder"valign="top"width="59%"headers="mcps1.1.5.1.4 "><pid="a30502d8bfe2843c79bbf224120f023cd"><aname="a30502d8bfe2843c79bbf224120f023cd"></a><aname="a30502d8bfe2843c79bbf224120f023cd"></a>Whether the element is added or removed.</p>
<tdclass="cellrowborder"valign="top"width="59%"headers="mcps1.1.5.1.4 "><pid="a7447614467b8496ea999e56e6eb8c5fe"><aname="a7447614467b8496ea999e56e6eb8c5fe"></a><aname="a7447614467b8496ea999e56e6eb8c5fe"></a>Whether the element is displayed or hidden.</p>
</td>
</tr>
</tbody>
</table>
Rendering attributes are used to set whether a component is rendered.
