js-components-common-attributes.md

# Universal Attributes<a name="EN-US_TOPIC_0000001173324641"></a>

## Common Attributes<a name="section861395713012"></a>

Common attributes are used to set component identities and appearance.

<a name="tb330011ff53049a69f27cec012adf8c1"></a>
<table><thead align="left"><tr id="r4301f3a3b24c499c9bfc42b76ab785f9"><th class="cellrowborder" valign="top" width="19.598040195980403%" id="mcps1.1.6.1.1"><p id="a9ba8c579217b4b8b841b035f1d28b20e"><a name="a9ba8c579217b4b8b841b035f1d28b20e"></a><a name="a9ba8c579217b4b8b841b035f1d28b20e"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="11.08889111088891%" id="mcps1.1.6.1.2"><p id="a633002333b024497914a4b172446f14e"><a name="a633002333b024497914a4b172446f14e"></a><a name="a633002333b024497914a4b172446f14e"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="10.00899910008999%" id="mcps1.1.6.1.3"><p id="a4950f7884c6540b9ad523ac34657d952"><a name="a4950f7884c6540b9ad523ac34657d952"></a><a name="a4950f7884c6540b9ad523ac34657d952"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="p58189597166"><a name="p58189597166"></a><a name="p58189597166"></a>Mandatory</p>
</th>
<th class="cellrowborder" valign="top" width="51.78482151784822%" id="mcps1.1.6.1.5"><p id="a1313564aa9404a338447087d5918c17d"><a name="a1313564aa9404a338447087d5918c17d"></a><a name="a1313564aa9404a338447087d5918c17d"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="r06a481428e8d455fba919d3d4618be31"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="adb8a73146d764f2aab50fc046169ab26"><a name="adb8a73146d764f2aab50fc046169ab26"></a><a name="adb8a73146d764f2aab50fc046169ab26"></a>id</p>
</td>
<td class="cellrowborder" valign="top" width="11.08889111088891%" headers="mcps1.1.6.1.2 "><p id="a06898db2627246f78e85d4fbadeee85c"><a name="a06898db2627246f78e85d4fbadeee85c"></a><a name="a06898db2627246f78e85d4fbadeee85c"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.00899910008999%" headers="mcps1.1.6.1.3 "><p id="ae685ead324a647bcba1bbb45c9402dd6"><a name="ae685ead324a647bcba1bbb45c9402dd6"></a><a name="ae685ead324a647bcba1bbb45c9402dd6"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p78183594166"><a name="p78183594166"></a><a name="p78183594166"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="51.78482151784822%" headers="mcps1.1.6.1.5 "><p id="a692121725a9b4ebbae65cd22b94b672e"><a name="a692121725a9b4ebbae65cd22b94b672e"></a><a name="a692121725a9b4ebbae65cd22b94b672e"></a>Unique ID of a component.</p>
</td>
</tr>
<tr id="r952ef46b64ee439d9c83da15ef587444"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="a7c032d302e1d437eac59680e066308b0"><a name="a7c032d302e1d437eac59680e066308b0"></a><a name="a7c032d302e1d437eac59680e066308b0"></a>style</p>
</td>
<td class="cellrowborder" valign="top" width="11.08889111088891%" headers="mcps1.1.6.1.2 "><p id="a6ba72f5c52df4fba9b02b5dffa26677e"><a name="a6ba72f5c52df4fba9b02b5dffa26677e"></a><a name="a6ba72f5c52df4fba9b02b5dffa26677e"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.00899910008999%" headers="mcps1.1.6.1.3 "><p id="a23cec1f95fd04ff1b3b20f58844ea654"><a name="a23cec1f95fd04ff1b3b20f58844ea654"></a><a name="a23cec1f95fd04ff1b3b20f58844ea654"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p78181459131617"><a name="p78181459131617"></a><a name="p78181459131617"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="51.78482151784822%" headers="mcps1.1.6.1.5 "><p id="ab9c92d331da44a0e9114f6760340680a"><a name="ab9c92d331da44a0e9114f6760340680a"></a><a name="ab9c92d331da44a0e9114f6760340680a"></a>Style declaration of a component.</p>
</td>
</tr>
<tr id="rc5f2117da84c42f2affe3c923dc48922"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="a3e97d6d2a5b84e06bf619049840a00a8"><a name="a3e97d6d2a5b84e06bf619049840a00a8"></a><a name="a3e97d6d2a5b84e06bf619049840a00a8"></a>class</p>
</td>
<td class="cellrowborder" valign="top" width="11.08889111088891%" headers="mcps1.1.6.1.2 "><p id="af0974175e9434735b035a4db9146aa04"><a name="af0974175e9434735b035a4db9146aa04"></a><a name="af0974175e9434735b035a4db9146aa04"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.00899910008999%" headers="mcps1.1.6.1.3 "><p id="aa5caace6225b440eba13dc2230f3ef0f"><a name="aa5caace6225b440eba13dc2230f3ef0f"></a><a name="aa5caace6225b440eba13dc2230f3ef0f"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p11818859171614"><a name="p11818859171614"></a><a name="p11818859171614"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="51.78482151784822%" headers="mcps1.1.6.1.5 "><p id="a2f6321cf45ae481983a88dcc2f900900"><a name="a2f6321cf45ae481983a88dcc2f900900"></a><a name="a2f6321cf45ae481983a88dcc2f900900"></a>Style class of a component, which is used to refer to a style table.</p>
</td>
</tr>
<tr id="row286117113158"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="p1786251117156"><a name="p1786251117156"></a><a name="p1786251117156"></a>ref</p>
</td>
<td class="cellrowborder" valign="top" width="11.08889111088891%" headers="mcps1.1.6.1.2 "><p id="p1086241119157"><a name="p1086241119157"></a><a name="p1086241119157"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.00899910008999%" headers="mcps1.1.6.1.3 "><p id="p586281111151"><a name="p586281111151"></a><a name="p586281111151"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p181818590163"><a name="p181818590163"></a><a name="p181818590163"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="51.78482151784822%" headers="mcps1.1.6.1.5 "><p id="p113416153342"><a name="p113416153342"></a><a name="p113416153342"></a>Used to register reference information of child elements<span id="ph5815920163518"><a name="ph5815920163518"></a><a name="ph5815920163518"></a> or child components</span>. The reference information is registered with the parent component on <strong id="b08212202354"><a name="b08212202354"></a><a name="b08212202354"></a>$refs</strong>.</p>
</td>
</tr>
<tr id="r2d32d58f3a404bf2951a57d06302620d"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="ab8d3c8007e0a42b9962e0db009e7be9d"><a name="ab8d3c8007e0a42b9962e0db009e7be9d"></a><a name="ab8d3c8007e0a42b9962e0db009e7be9d"></a>disabled</p>
</td>
<td class="cellrowborder" valign="top" width="11.08889111088891%" headers="mcps1.1.6.1.2 "><p id="a05782d6a1a5d42918bc95813dca610d6"><a name="a05782d6a1a5d42918bc95813dca610d6"></a><a name="a05782d6a1a5d42918bc95813dca610d6"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="10.00899910008999%" headers="mcps1.1.6.1.3 "><p id="a3e2f721f63a74e4b974e9bd5e2f88994"><a name="a3e2f721f63a74e4b974e9bd5e2f88994"></a><a name="a3e2f721f63a74e4b974e9bd5e2f88994"></a>false</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p128181959161612"><a name="p128181959161612"></a><a name="p128181959161612"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="51.78482151784822%" headers="mcps1.1.6.1.5 "><p id="a4065980a1e914cf98acce5250ee4ae5a"><a name="a4065980a1e914cf98acce5250ee4ae5a"></a><a name="a4065980a1e914cf98acce5250ee4ae5a"></a>Whether a component is disabled. If it is disabled, it cannot respond to user interaction.</p>
</td>
</tr>
<tr id="r7f258d2c12844b5bbb0b880b9c5fa7d7"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="abe276788904d4133bf35c5594eb4d20a"><a name="abe276788904d4133bf35c5594eb4d20a"></a><a name="abe276788904d4133bf35c5594eb4d20a"></a>focusable</p>
</td>
<td class="cellrowborder" valign="top" width="11.08889111088891%" headers="mcps1.1.6.1.2 "><p id="a8a4db446ac404162806f6013cacf49a8"><a name="a8a4db446ac404162806f6013cacf49a8"></a><a name="a8a4db446ac404162806f6013cacf49a8"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="10.00899910008999%" headers="mcps1.1.6.1.3 "><p id="a515466e622f447ce8bcb07e0e85d0c50"><a name="a515466e622f447ce8bcb07e0e85d0c50"></a><a name="a515466e622f447ce8bcb07e0e85d0c50"></a>false</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p8818135901612"><a name="p8818135901612"></a><a name="p8818135901612"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="51.78482151784822%" headers="mcps1.1.6.1.5 "><p id="a8e6a00e044b44797a3db0ea017c82cd5"><a name="a8e6a00e044b44797a3db0ea017c82cd5"></a><a name="a8e6a00e044b44797a3db0ea017c82cd5"></a>Whether a component can gain focus. When <strong id="b040892514141"><a name="b040892514141"></a><a name="b040892514141"></a>focusable</strong> is set to <strong id="b1277952713149"><a name="b1277952713149"></a><a name="b1277952713149"></a>true</strong>, the component can respond to focus events and key events. If a key event or click event is set for the component, this attribute is set to <strong id="b147301971024"><a name="b147301971024"></a><a name="b147301971024"></a>true</strong> automatically.</p>
</td>
</tr>
<tr id="rc6c4586e5aa8487ba77c1e8df90c121d"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="a751c9d46a62348ec902c7fdf97468b9d"><a name="a751c9d46a62348ec902c7fdf97468b9d"></a><a name="a751c9d46a62348ec902c7fdf97468b9d"></a>data-*<sup id="sup186963594254"><a name="sup186963594254"></a><a name="sup186963594254"></a>6+</sup></p>
</td>
<td class="cellrowborder" valign="top" width="11.08889111088891%" headers="mcps1.1.6.1.2 "><p id="a8e6d1bb4d0bc423fb8466ee3acd1882f"><a name="a8e6d1bb4d0bc423fb8466ee3acd1882f"></a><a name="a8e6d1bb4d0bc423fb8466ee3acd1882f"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.00899910008999%" headers="mcps1.1.6.1.3 "><p id="ab8cb15c9c3444b13b64945788131dce6"><a name="ab8cb15c9c3444b13b64945788131dce6"></a><a name="ab8cb15c9c3444b13b64945788131dce6"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p1281819591169"><a name="p1281819591169"></a><a name="p1281819591169"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="51.78482151784822%" headers="mcps1.1.6.1.5 "><p id="p610744434310"><a name="p610744434310"></a><a name="p610744434310"></a>Attribute set for components to facilitate data storage and reading. The value is case insensitive. For example, <strong id="b7757423124815"><a name="b7757423124815"></a><a name="b7757423124815"></a>data-A</strong> and <strong id="b1049102612487"><a name="b1049102612487"></a><a name="b1049102612487"></a>data-a</strong> are the same by default. In the JS file:</p>
<a name="ul9134650114317"></a><a name="ul9134650114317"></a><ul id="ul9134650114317"><li>Use <strong id="b1338175312483"><a name="b1338175312483"></a><a name="b1338175312483"></a>e.target.dataSet.a</strong> to read data in the event callback, where <strong id="b138471636492"><a name="b138471636492"></a><a name="b138471636492"></a>e</strong> is the input parameter.</li><li>After a DOM element is obtained by using <strong id="b2839121914493"><a name="b2839121914493"></a><a name="b2839121914493"></a>$element</strong> or <strong id="b1335192220493"><a name="b1335192220493"></a><a name="b1335192220493"></a>$refs</strong>, it can be accessed through <strong id="b520902715495"><a name="b520902715495"></a><a name="b520902715495"></a>dataSet.a</strong>.</li></ul>
</td>
</tr>
<tr id="row1244153883420"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="p18696114719319"><a name="p18696114719319"></a><a name="p18696114719319"></a>click-effect<sup id="sup47011517183712"><a name="sup47011517183712"></a><a name="sup47011517183712"></a>5+</sup></p>
</td>
<td class="cellrowborder" valign="top" width="11.08889111088891%" headers="mcps1.1.6.1.2 "><p id="p14696164713116"><a name="p14696164713116"></a><a name="p14696164713116"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.00899910008999%" headers="mcps1.1.6.1.3 "><p id="p16964479311"><a name="p16964479311"></a><a name="p16964479311"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p13696184713318"><a name="p13696184713318"></a><a name="p13696184713318"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="51.78482151784822%" headers="mcps1.1.6.1.5 "><p id="p5696144719319"><a name="p5696144719319"></a><a name="p5696144719319"></a>Click effect complying with spring physics. Available values are as follows:</p>
<a name="ul208595598331"></a><a name="ul208595598331"></a><ul id="ul208595598331"><li><strong id="b98443266469"><a name="b98443266469"></a><a name="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><strong id="b126112616177"><a name="b126112616177"></a><a name="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><strong id="b1088450587"><a name="b1088450587"></a><a name="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>
</td>
</tr>
<tr id="row19878353012"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="p14988113519011"><a name="p14988113519011"></a><a name="p14988113519011"></a>dir<sup id="sup3641134416020"><a name="sup3641134416020"></a><a name="sup3641134416020"></a>6+</sup></p>
</td>
<td class="cellrowborder" valign="top" width="11.08889111088891%" headers="mcps1.1.6.1.2 "><p id="p6988135103"><a name="p6988135103"></a><a name="p6988135103"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.00899910008999%" headers="mcps1.1.6.1.3 "><p id="p29881351108"><a name="p29881351108"></a><a name="p29881351108"></a>auto</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p1298817358013"><a name="p1298817358013"></a><a name="p1298817358013"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="51.78482151784822%" headers="mcps1.1.6.1.5 "><p id="p1154612321525"><a name="p1154612321525"></a><a name="p1154612321525"></a>Element layout mode. The value can be:</p>
<a name="ul1270142317311"></a><a name="ul1270142317311"></a><ul id="ul1270142317311"><li><strong id="b9391123155013"><a name="b9391123155013"></a><a name="b9391123155013"></a>rtl</strong>: right-to-left layout.</li><li><strong id="b189610376502"><a name="b189610376502"></a><a name="b189610376502"></a>ltr</strong>: left-to-right layout.</li><li><strong id="b838758185118"><a name="b838758185118"></a><a name="b838758185118"></a>auto</strong>: follows the system language environment.</li></ul>
</td>
</tr>
</tbody>
</table>

## Rendering Attributes<a name="section1894362211119"></a>

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

<a name="t167e4383136e4192be0326d6c9e3d9dd"></a>
<table><thead align="left"><tr id="r54d9459300ff49aa85660965058ef445"><th class="cellrowborder" valign="top" width="11%" id="mcps1.1.5.1.1"><p id="a11f33247441149f19824ae2c3ef738e2"><a name="a11f33247441149f19824ae2c3ef738e2"></a><a name="a11f33247441149f19824ae2c3ef738e2"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="17%" id="mcps1.1.5.1.2"><p id="aa506ee4065dd4497858e9afe6145089b"><a name="aa506ee4065dd4497858e9afe6145089b"></a><a name="aa506ee4065dd4497858e9afe6145089b"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="13%" id="mcps1.1.5.1.3"><p id="aa4d2a78c677040a2a4ad58dffbb6fd87"><a name="aa4d2a78c677040a2a4ad58dffbb6fd87"></a><a name="aa4d2a78c677040a2a4ad58dffbb6fd87"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="59%" id="mcps1.1.5.1.4"><p id="af93b9bcb40554aacb2b0396faa59081f"><a name="af93b9bcb40554aacb2b0396faa59081f"></a><a name="af93b9bcb40554aacb2b0396faa59081f"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="re9ffa6c6bf06441c814ab63efe06b061"><td class="cellrowborder" valign="top" width="11%" headers="mcps1.1.5.1.1 "><p id="ab454b93369374a69971f383a653a81ac"><a name="ab454b93369374a69971f383a653a81ac"></a><a name="ab454b93369374a69971f383a653a81ac"></a>for</p>
</td>
<td class="cellrowborder" valign="top" width="17%" headers="mcps1.1.5.1.2 "><p id="ae7cf5d8d2992412e9920a5ac8cd4a6ec"><a name="ae7cf5d8d2992412e9920a5ac8cd4a6ec"></a><a name="ae7cf5d8d2992412e9920a5ac8cd4a6ec"></a>Array</p>
</td>
<td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.5.1.3 "><p id="a2116e04e20814c9ba6e748cc2263e684"><a name="a2116e04e20814c9ba6e748cc2263e684"></a><a name="a2116e04e20814c9ba6e748cc2263e684"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="59%" headers="mcps1.1.5.1.4 "><p id="ac2b2f9636e3e434ab434d20640129478"><a name="ac2b2f9636e3e434ab434d20640129478"></a><a name="ac2b2f9636e3e434ab434d20640129478"></a>Expands the current element based on the configured data list.</p>
</td>
</tr>
<tr id="rc91e3951ca2b4b6b93197b3bd4b98937"><td class="cellrowborder" valign="top" width="11%" headers="mcps1.1.5.1.1 "><p id="aca5eb210453a48ff88aa6c622a6e1fc4"><a name="aca5eb210453a48ff88aa6c622a6e1fc4"></a><a name="aca5eb210453a48ff88aa6c622a6e1fc4"></a>if</p>
</td>
<td class="cellrowborder" valign="top" width="17%" headers="mcps1.1.5.1.2 "><p id="afd75f2dd9f6a456d992016cf546af694"><a name="afd75f2dd9f6a456d992016cf546af694"></a><a name="afd75f2dd9f6a456d992016cf546af694"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.5.1.3 "><p id="a81a51fbb63094344b12f9b565fa363e5"><a name="a81a51fbb63094344b12f9b565fa363e5"></a><a name="a81a51fbb63094344b12f9b565fa363e5"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="59%" headers="mcps1.1.5.1.4 "><p id="a30502d8bfe2843c79bbf224120f023cd"><a name="a30502d8bfe2843c79bbf224120f023cd"></a><a name="a30502d8bfe2843c79bbf224120f023cd"></a>Whether the element is added or removed.</p>
</td>
</tr>
<tr id="r5fdf7f30ef514ec0ac91ff51edd5d854"><td class="cellrowborder" valign="top" width="11%" headers="mcps1.1.5.1.1 "><p id="aa96b777355f24fa19e88fd575c4fbaac"><a name="aa96b777355f24fa19e88fd575c4fbaac"></a><a name="aa96b777355f24fa19e88fd575c4fbaac"></a>show</p>
</td>
<td class="cellrowborder" valign="top" width="17%" headers="mcps1.1.5.1.2 "><p id="a8394664afe1d4680bc83bf7da901cc4a"><a name="a8394664afe1d4680bc83bf7da901cc4a"></a><a name="a8394664afe1d4680bc83bf7da901cc4a"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.5.1.3 "><p id="a9eaf00abf94e4db3aceddf602627f014"><a name="a9eaf00abf94e4db3aceddf602627f014"></a><a name="a9eaf00abf94e4db3aceddf602627f014"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="59%" headers="mcps1.1.5.1.4 "><p id="a7447614467b8496ea999e56e6eb8c5fe"><a name="a7447614467b8496ea999e56e6eb8c5fe"></a><a name="a7447614467b8496ea999e56e6eb8c5fe"></a>Whether the element is displayed or hidden.</p>
</td>
</tr>
</tbody>
</table>

>![](../../public_sys-resources/icon-note.gif) **NOTE:** 
>Do not set styles in attribute fields.