1# list<a name="EN-US_TOPIC_0000001162494595"></a> 2 3- [Permission List](#en-us_topic_0000001058670742_section11257113618419) 4- [Child Component](#en-us_topic_0000001058670742_section9288143101012) 5- [Attribute](#en-us_topic_0000001058670742_section2907183951110) 6- [Event](#en-us_topic_0000001058670742_section434813139467) 7- [Style](#en-us_topic_0000001058670742_section5775351116) 8- [Method](#en-us_topic_0000001058670742_section47669296127) 9- [Example](#en-us_topic_0000001058670742_section24931424488) 10 11The **<list\>** component provides a list container that presents a series of list items arranged in a column with the same width. Lists support presentations of the same data in a multiple and coherent row style, for example, images and texts. 12 13## Permission List<a name="en-us_topic_0000001058670742_section11257113618419"></a> 14 15None 16 17## Child Component<a name="en-us_topic_0000001058670742_section9288143101012"></a> 18 19<[list-item](list-item.md#EN-US_TOPIC_0000001115814816)\> and <[list-item-group](list-item-group.md#EN-US_TOPIC_0000001162414615)\> 20 21## Attribute<a name="en-us_topic_0000001058670742_section2907183951110"></a> 22 23<a name="en-us_topic_0000001058670742_table20633101642315"></a> 24<table><thead align="left"><tr id="en-us_topic_0000001058670742_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a>Name</p> 25</th> 26<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a>Type</p> 27</th> 28<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a>Default Value</p> 29</th> 30<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058670742_p824610360217"><a name="en-us_topic_0000001058670742_p824610360217"></a><a name="en-us_topic_0000001058670742_p824610360217"></a>Mandatory</p> 31</th> 32<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a>Description</p> 33</th> 34</tr> 35</thead> 36<tbody><tr id="en-us_topic_0000001058670742_row389219166580"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p32747328584"><a name="en-us_topic_0000001058670742_p32747328584"></a><a name="en-us_topic_0000001058670742_p32747328584"></a>scrollpage</p> 37</td> 38<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p1927413328589"><a name="en-us_topic_0000001058670742_p1927413328589"></a><a name="en-us_topic_0000001058670742_p1927413328589"></a>boolean</p> 39</td> 40<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p142747324586"><a name="en-us_topic_0000001058670742_p142747324586"></a><a name="en-us_topic_0000001058670742_p142747324586"></a>false</p> 41</td> 42<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p1827423217589"><a name="en-us_topic_0000001058670742_p1827423217589"></a><a name="en-us_topic_0000001058670742_p1827423217589"></a>No</p> 43</td> 44<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p627473213585"><a name="en-us_topic_0000001058670742_p627473213585"></a><a name="en-us_topic_0000001058670742_p627473213585"></a>Whether to scroll the non-list part on the top of the list page out of the visible area with the list. The value can be <strong id="en-us_topic_0000001058670742_b1827263010156"><a name="en-us_topic_0000001058670742_b1827263010156"></a><a name="en-us_topic_0000001058670742_b1827263010156"></a>true</strong> (scrolls the non-list part out) or <strong id="en-us_topic_0000001058670742_b1020123281511"><a name="en-us_topic_0000001058670742_b1020123281511"></a><a name="en-us_topic_0000001058670742_b1020123281511"></a>false</strong> (does not scroll the non-list part out). This attribute is not available when the direction is <strong id="en-us_topic_0000001058670742_b661941418162"><a name="en-us_topic_0000001058670742_b661941418162"></a><a name="en-us_topic_0000001058670742_b661941418162"></a>row</strong>.</p> 45</td> 46</tr> 47<tr id="en-us_topic_0000001058670742_row9893216145818"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p112749323589"><a name="en-us_topic_0000001058670742_p112749323589"></a><a name="en-us_topic_0000001058670742_p112749323589"></a>cachedcount </p> 48</td> 49<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p1427483225810"><a name="en-us_topic_0000001058670742_p1427483225810"></a><a name="en-us_topic_0000001058670742_p1427483225810"></a>number</p> 50</td> 51<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p16274432145815"><a name="en-us_topic_0000001058670742_p16274432145815"></a><a name="en-us_topic_0000001058670742_p16274432145815"></a>0</p> 52</td> 53<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p32741132185811"><a name="en-us_topic_0000001058670742_p32741132185811"></a><a name="en-us_topic_0000001058670742_p32741132185811"></a>No</p> 54</td> 55<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p02741932195811"><a name="en-us_topic_0000001058670742_p02741932195811"></a><a name="en-us_topic_0000001058670742_p02741932195811"></a>Minimum number of cached list items when the long list is loaded with delay.</p> 56<p id="en-us_topic_0000001058670742_p182741432115814"><a name="en-us_topic_0000001058670742_p182741432115814"></a><a name="en-us_topic_0000001058670742_p182741432115814"></a>When the number of list items cached outside the visible area is less than the value of this attribute, a <strong id="en-us_topic_0000001058670742_b34911451101"><a name="en-us_topic_0000001058670742_b34911451101"></a><a name="en-us_topic_0000001058670742_b34911451101"></a>requestitem</strong> event is triggered.</p> 57</td> 58</tr> 59<tr id="en-us_topic_0000001058670742_row9893131620589"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p827410325586"><a name="en-us_topic_0000001058670742_p827410325586"></a><a name="en-us_topic_0000001058670742_p827410325586"></a>scrollbar </p> 60</td> 61<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p72741332125816"><a name="en-us_topic_0000001058670742_p72741332125816"></a><a name="en-us_topic_0000001058670742_p72741332125816"></a>string</p> 62</td> 63<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p122741532125818"><a name="en-us_topic_0000001058670742_p122741532125818"></a><a name="en-us_topic_0000001058670742_p122741532125818"></a>off</p> 64</td> 65<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p1227413295813"><a name="en-us_topic_0000001058670742_p1227413295813"></a><a name="en-us_topic_0000001058670742_p1227413295813"></a>No</p> 66</td> 67<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p142744322587"><a name="en-us_topic_0000001058670742_p142744322587"></a><a name="en-us_topic_0000001058670742_p142744322587"></a>Display mode of the side scroll bar. (Currently, only the vertical scroll bar is supported.)</p> 68<a name="en-us_topic_0000001058670742_ul162752325582"></a><a name="en-us_topic_0000001058670742_ul162752325582"></a><ul id="en-us_topic_0000001058670742_ul162752325582"><li><strong id="en-us_topic_0000001058670742_b067574210418"><a name="en-us_topic_0000001058670742_b067574210418"></a><a name="en-us_topic_0000001058670742_b067574210418"></a>off</strong>: No display</li><li><strong id="en-us_topic_0000001058670742_b694151664211"><a name="en-us_topic_0000001058670742_b694151664211"></a><a name="en-us_topic_0000001058670742_b694151664211"></a>auto</strong>: Displayed on demand (The side scroll bar is displayed when you touch it and disappears 2s later.)</li><li><strong id="en-us_topic_0000001058670742_b19479834154210"><a name="en-us_topic_0000001058670742_b19479834154210"></a><a name="en-us_topic_0000001058670742_b19479834154210"></a>on</strong>: Always displayed</li></ul> 69</td> 70</tr> 71<tr id="en-us_topic_0000001058670742_row1089321620582"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p1275832125813"><a name="en-us_topic_0000001058670742_p1275832125813"></a><a name="en-us_topic_0000001058670742_p1275832125813"></a>scrolleffect </p> 72</td> 73<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p7275193216582"><a name="en-us_topic_0000001058670742_p7275193216582"></a><a name="en-us_topic_0000001058670742_p7275193216582"></a>string</p> 74</td> 75<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p13275232125815"><a name="en-us_topic_0000001058670742_p13275232125815"></a><a name="en-us_topic_0000001058670742_p13275232125815"></a>spring</p> 76</td> 77<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p327520323585"><a name="en-us_topic_0000001058670742_p327520323585"></a><a name="en-us_topic_0000001058670742_p327520323585"></a>No</p> 78</td> 79<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p1827516324585"><a name="en-us_topic_0000001058670742_p1827516324585"></a><a name="en-us_topic_0000001058670742_p1827516324585"></a>Scroll effect. Available values are as follows:</p> 80<a name="en-us_topic_0000001058670742_ul13275532195819"></a><a name="en-us_topic_0000001058670742_ul13275532195819"></a><ul id="en-us_topic_0000001058670742_ul13275532195819"><li><strong id="en-us_topic_0000001058670742_b687114363370"><a name="en-us_topic_0000001058670742_b687114363370"></a><a name="en-us_topic_0000001058670742_b687114363370"></a>spring</strong>: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.</li><li><strong id="en-us_topic_0000001058670742_b767535112394"><a name="en-us_topic_0000001058670742_b767535112394"></a><a name="en-us_topic_0000001058670742_b767535112394"></a>fade</strong>: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.</li><li><strong id="en-us_topic_0000001058670742_b136381350114118"><a name="en-us_topic_0000001058670742_b136381350114118"></a><a name="en-us_topic_0000001058670742_b136381350114118"></a>no</strong>: No effect after the scroll bar is moved to the edge.</li></ul> 81</td> 82</tr> 83<tr id="en-us_topic_0000001058670742_row208941516165811"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p1327573215812"><a name="en-us_topic_0000001058670742_p1327573215812"></a><a name="en-us_topic_0000001058670742_p1327573215812"></a>indexer </p> 84</td> 85<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p15275163245815"><a name="en-us_topic_0000001058670742_p15275163245815"></a><a name="en-us_topic_0000001058670742_p15275163245815"></a>boolean | Array<string></p> 86</td> 87<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p427553220580"><a name="en-us_topic_0000001058670742_p427553220580"></a><a name="en-us_topic_0000001058670742_p427553220580"></a>false</p> 88</td> 89<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p627613214585"><a name="en-us_topic_0000001058670742_p627613214585"></a><a name="en-us_topic_0000001058670742_p627613214585"></a>No</p> 90</td> 91<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p1127613275818"><a name="en-us_topic_0000001058670742_p1127613275818"></a><a name="en-us_topic_0000001058670742_p1127613275818"></a>Whether to display the alphabetical index bar on the sidebar. If this attribute is set to <strong id="en-us_topic_0000001058670742_b1035315299257"><a name="en-us_topic_0000001058670742_b1035315299257"></a><a name="en-us_topic_0000001058670742_b1035315299257"></a>true</strong> or a customized indexer, the index bar is displayed at the right boundary of the list. Example:</p> 92<p id="en-us_topic_0000001058670742_p19276132105811"><a name="en-us_topic_0000001058670742_p19276132105811"></a><a name="en-us_topic_0000001058670742_p19276132105811"></a><strong id="en-us_topic_0000001058670742_b119841862711"><a name="en-us_topic_0000001058670742_b119841862711"></a><a name="en-us_topic_0000001058670742_b119841862711"></a>"indexer" : "true"</strong> indicates the default alphabetical indexer.</p> 93<p id="en-us_topic_0000001058670742_p10276133295813"><a name="en-us_topic_0000001058670742_p10276133295813"></a><a name="en-us_topic_0000001058670742_p10276133295813"></a><strong id="en-us_topic_0000001058670742_b158642216272"><a name="en-us_topic_0000001058670742_b158642216272"></a><a name="en-us_topic_0000001058670742_b158642216272"></a>"indexer" : "false"</strong> indicates no indexer.</p> 94<p id="en-us_topic_0000001058670742_p1027643295815"><a name="en-us_topic_0000001058670742_p1027643295815"></a><a name="en-us_topic_0000001058670742_p1027643295815"></a><strong id="en-us_topic_0000001058670742_b8150534487"><a name="en-us_topic_0000001058670742_b8150534487"></a><a name="en-us_topic_0000001058670742_b8150534487"></a>"indexer": ["#", "A", ".", "E", ".", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]</strong> indicates a customized indexer. You must include <strong id="en-us_topic_0000001058670742_b095305716565"><a name="en-us_topic_0000001058670742_b095305716565"></a><a name="en-us_topic_0000001058670742_b095305716565"></a>"#"</strong> when using a customized indexer.</p> 95<div class="note" id="en-us_topic_0000001058670742_note1752771418501"><a name="en-us_topic_0000001058670742_note1752771418501"></a><a name="en-us_topic_0000001058670742_note1752771418501"></a><span class="notetitle"> NOTE: </span><div class="notebody"><a name="en-us_topic_0000001058670742_ul55231518155017"></a><a name="en-us_topic_0000001058670742_ul55231518155017"></a><ul id="en-us_topic_0000001058670742_ul55231518155017"><li>This attribute is valid only when <strong id="en-us_topic_0000001058670742_b15581134072810"><a name="en-us_topic_0000001058670742_b15581134072810"></a><a name="en-us_topic_0000001058670742_b15581134072810"></a>flex-direction</strong> is set to <strong id="en-us_topic_0000001058670742_b13563344132812"><a name="en-us_topic_0000001058670742_b13563344132812"></a><a name="en-us_topic_0000001058670742_b13563344132812"></a>column</strong> and <strong id="en-us_topic_0000001058670742_b1047494711284"><a name="en-us_topic_0000001058670742_b1047494711284"></a><a name="en-us_topic_0000001058670742_b1047494711284"></a>columns</strong> is set to <strong id="en-us_topic_0000001058670742_b2312249162819"><a name="en-us_topic_0000001058670742_b2312249162819"></a><a name="en-us_topic_0000001058670742_b2312249162819"></a>1</strong>.</li><li>This attribute must be used together with the <a href="list-item.md#en-us_topic_0000001058670839_section2907183951110">section</a> attribute of <strong id="en-us_topic_0000001058670742_b562515564293"><a name="en-us_topic_0000001058670742_b562515564293"></a><a name="en-us_topic_0000001058670742_b562515564293"></a><list-item></strong>.</li></ul> 96</div></div> 97</td> 98</tr> 99<tr id="en-us_topic_0000001058670742_row1926180153418"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p1370619211500"><a name="en-us_topic_0000001058670742_p1370619211500"></a><a name="en-us_topic_0000001058670742_p1370619211500"></a>indexermulti<sup id="en-us_topic_0000001058670742_sup1478641710316"><a name="en-us_topic_0000001058670742_sup1478641710316"></a><a name="en-us_topic_0000001058670742_sup1478641710316"></a>5+</sup></p> 100</td> 101<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p13706112125019"><a name="en-us_topic_0000001058670742_p13706112125019"></a><a name="en-us_topic_0000001058670742_p13706112125019"></a>boolean</p> 102</td> 103<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p1770622195017"><a name="en-us_topic_0000001058670742_p1770622195017"></a><a name="en-us_topic_0000001058670742_p1770622195017"></a>false</p> 104</td> 105<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p97060218503"><a name="en-us_topic_0000001058670742_p97060218503"></a><a name="en-us_topic_0000001058670742_p97060218503"></a>No</p> 106</td> 107<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p1768357350"><a name="en-us_topic_0000001058670742_p1768357350"></a><a name="en-us_topic_0000001058670742_p1768357350"></a>Whether to use a multi-language indexer.</p> 108<p id="en-us_topic_0000001058670742_p57061219500"><a name="en-us_topic_0000001058670742_p57061219500"></a><a name="en-us_topic_0000001058670742_p57061219500"></a>This attribute is invalid if <strong id="en-us_topic_0000001058670742_b18235164351416"><a name="en-us_topic_0000001058670742_b18235164351416"></a><a name="en-us_topic_0000001058670742_b18235164351416"></a>indexer</strong> is set to <strong id="en-us_topic_0000001058670742_b223554316147"><a name="en-us_topic_0000001058670742_b223554316147"></a><a name="en-us_topic_0000001058670742_b223554316147"></a>false</strong>.</p> 109</td> 110</tr> 111<tr id="en-us_topic_0000001058670742_row289205623319"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p336515269516"><a name="en-us_topic_0000001058670742_p336515269516"></a><a name="en-us_topic_0000001058670742_p336515269516"></a>indexerbubble<sup id="en-us_topic_0000001058670742_sup3412121919314"><a name="en-us_topic_0000001058670742_sup3412121919314"></a><a name="en-us_topic_0000001058670742_sup3412121919314"></a>5+</sup></p> 112</td> 113<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p836613263515"><a name="en-us_topic_0000001058670742_p836613263515"></a><a name="en-us_topic_0000001058670742_p836613263515"></a>boolean</p> 114</td> 115<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p153661126165120"><a name="en-us_topic_0000001058670742_p153661126165120"></a><a name="en-us_topic_0000001058670742_p153661126165120"></a>true</p> 116</td> 117<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p0366182611512"><a name="en-us_topic_0000001058670742_p0366182611512"></a><a name="en-us_topic_0000001058670742_p0366182611512"></a>No</p> 118</td> 119<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p15708185468"><a name="en-us_topic_0000001058670742_p15708185468"></a><a name="en-us_topic_0000001058670742_p15708185468"></a>Whether to display the bubble effect when switching among indexes.</p> 120<p id="en-us_topic_0000001058670742_p12366132614518"><a name="en-us_topic_0000001058670742_p12366132614518"></a><a name="en-us_topic_0000001058670742_p12366132614518"></a>This attribute is invalid if <strong id="en-us_topic_0000001058670742_b3399153701610"><a name="en-us_topic_0000001058670742_b3399153701610"></a><a name="en-us_topic_0000001058670742_b3399153701610"></a>indexer</strong> is set to <strong id="en-us_topic_0000001058670742_b14404237151617"><a name="en-us_topic_0000001058670742_b14404237151617"></a><a name="en-us_topic_0000001058670742_b14404237151617"></a>false</strong>.</p> 121</td> 122</tr> 123<tr id="en-us_topic_0000001058670742_row19197115453311"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p191412818511"><a name="en-us_topic_0000001058670742_p191412818511"></a><a name="en-us_topic_0000001058670742_p191412818511"></a>divider<sup id="en-us_topic_0000001058670742_sup918814291347"><a name="en-us_topic_0000001058670742_sup918814291347"></a><a name="en-us_topic_0000001058670742_sup918814291347"></a>5+</sup></p> 124</td> 125<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p3914284516"><a name="en-us_topic_0000001058670742_p3914284516"></a><a name="en-us_topic_0000001058670742_p3914284516"></a>boolean</p> 126</td> 127<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p10914285514"><a name="en-us_topic_0000001058670742_p10914285514"></a><a name="en-us_topic_0000001058670742_p10914285514"></a>false</p> 128</td> 129<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p8914148051"><a name="en-us_topic_0000001058670742_p8914148051"></a><a name="en-us_topic_0000001058670742_p8914148051"></a>No</p> 130</td> 131<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p111882182061"><a name="en-us_topic_0000001058670742_p111882182061"></a><a name="en-us_topic_0000001058670742_p111882182061"></a>Whether list items are separated by dividers.</p> 132<p id="en-us_topic_0000001058670742_p20914284518"><a name="en-us_topic_0000001058670742_p20914284518"></a><a name="en-us_topic_0000001058670742_p20914284518"></a>For details about divider styles, see <strong id="en-us_topic_0000001058670742_b1680911361100"><a name="en-us_topic_0000001058670742_b1680911361100"></a><a name="en-us_topic_0000001058670742_b1680911361100"></a>divider-color</strong>, <strong id="en-us_topic_0000001058670742_b270113916020"><a name="en-us_topic_0000001058670742_b270113916020"></a><a name="en-us_topic_0000001058670742_b270113916020"></a>divider-height</strong>, <strong id="en-us_topic_0000001058670742_b312394211012"><a name="en-us_topic_0000001058670742_b312394211012"></a><a name="en-us_topic_0000001058670742_b312394211012"></a>divider-length</strong>, and <strong id="en-us_topic_0000001058670742_b17431644908"><a name="en-us_topic_0000001058670742_b17431644908"></a><a name="en-us_topic_0000001058670742_b17431644908"></a>divider-origin</strong> in the <a href="#en-us_topic_0000001058670742_section5775351116">Styles</a> table.</p> 133</td> 134</tr> 135<tr id="en-us_topic_0000001058670742_row311191013583"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p9276123217583"><a name="en-us_topic_0000001058670742_p9276123217583"></a><a name="en-us_topic_0000001058670742_p9276123217583"></a>shapemode</p> 136</td> 137<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p1527610320588"><a name="en-us_topic_0000001058670742_p1527610320588"></a><a name="en-us_topic_0000001058670742_p1527610320588"></a>string</p> 138</td> 139<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p17276832195815"><a name="en-us_topic_0000001058670742_p17276832195815"></a><a name="en-us_topic_0000001058670742_p17276832195815"></a>default</p> 140</td> 141<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p142761532145817"><a name="en-us_topic_0000001058670742_p142761532145817"></a><a name="en-us_topic_0000001058670742_p142761532145817"></a>No</p> 142</td> 143<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p182761532205818"><a name="en-us_topic_0000001058670742_p182761532205818"></a><a name="en-us_topic_0000001058670742_p182761532205818"></a>Shape of the side scroll bar.</p> 144<a name="en-us_topic_0000001058670742_ul4276203212589"></a><a name="en-us_topic_0000001058670742_ul4276203212589"></a><ul id="en-us_topic_0000001058670742_ul4276203212589"><li><strong id="en-us_topic_0000001058670742_b1694164924312"><a name="en-us_topic_0000001058670742_b1694164924312"></a><a name="en-us_topic_0000001058670742_b1694164924312"></a>default</strong>: not specified (following the theme)</li><li><strong id="en-us_topic_0000001058670742_b4888059134313"><a name="en-us_topic_0000001058670742_b4888059134313"></a><a name="en-us_topic_0000001058670742_b4888059134313"></a>rect</strong>: rectangle</li><li><strong id="en-us_topic_0000001058670742_b631715664410"><a name="en-us_topic_0000001058670742_b631715664410"></a><a name="en-us_topic_0000001058670742_b631715664410"></a>round</strong>: circle</li></ul> 145</td> 146</tr> 147<tr id="en-us_topic_0000001058670742_row1465212481574"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p102776324585"><a name="en-us_topic_0000001058670742_p102776324585"></a><a name="en-us_topic_0000001058670742_p102776324585"></a>updateeffect </p> 148</td> 149<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p4277133275818"><a name="en-us_topic_0000001058670742_p4277133275818"></a><a name="en-us_topic_0000001058670742_p4277133275818"></a>boolean</p> 150</td> 151<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p627763235813"><a name="en-us_topic_0000001058670742_p627763235813"></a><a name="en-us_topic_0000001058670742_p627763235813"></a>false</p> 152</td> 153<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p1927893215584"><a name="en-us_topic_0000001058670742_p1927893215584"></a><a name="en-us_topic_0000001058670742_p1927893215584"></a>No</p> 154</td> 155<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p3278032145815"><a name="en-us_topic_0000001058670742_p3278032145815"></a><a name="en-us_topic_0000001058670742_p3278032145815"></a>Whether a dynamic effect is displayed when an item in the list is deleted or added.</p> 156<a name="en-us_topic_0000001058670742_ul8278153205815"></a><a name="en-us_topic_0000001058670742_ul8278153205815"></a><ul id="en-us_topic_0000001058670742_ul8278153205815"><li><strong id="en-us_topic_0000001058670742_b1406192914574"><a name="en-us_topic_0000001058670742_b1406192914574"></a><a name="en-us_topic_0000001058670742_b1406192914574"></a>false</strong>: No dynamic effect is displayed.</li><li><strong id="en-us_topic_0000001058670742_b139515324582"><a name="en-us_topic_0000001058670742_b139515324582"></a><a name="en-us_topic_0000001058670742_b139515324582"></a>true</strong>: A dynamic effect is displayed when an item is added or deleted.</li></ul> 157</td> 158</tr> 159<tr id="en-us_topic_0000001058670742_row1788316557427"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p198831055124217"><a name="en-us_topic_0000001058670742_p198831055124217"></a><a name="en-us_topic_0000001058670742_p198831055124217"></a>chainanimation<sup id="en-us_topic_0000001058670742_sup13376443103416"><a name="en-us_topic_0000001058670742_sup13376443103416"></a><a name="en-us_topic_0000001058670742_sup13376443103416"></a>5+</sup></p> 160</td> 161<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p0883955174217"><a name="en-us_topic_0000001058670742_p0883955174217"></a><a name="en-us_topic_0000001058670742_p0883955174217"></a>boolean</p> 162</td> 163<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p888305574219"><a name="en-us_topic_0000001058670742_p888305574219"></a><a name="en-us_topic_0000001058670742_p888305574219"></a>false</p> 164</td> 165<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p19884755204213"><a name="en-us_topic_0000001058670742_p19884755204213"></a><a name="en-us_topic_0000001058670742_p19884755204213"></a>No</p> 166</td> 167<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p78841255154210"><a name="en-us_topic_0000001058670742_p78841255154210"></a><a name="en-us_topic_0000001058670742_p78841255154210"></a>Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.</p> 168<a name="en-us_topic_0000001058670742_ul1490293714519"></a><a name="en-us_topic_0000001058670742_ul1490293714519"></a><ul id="en-us_topic_0000001058670742_ul1490293714519"><li><strong id="en-us_topic_0000001058670742_b19321195416183"><a name="en-us_topic_0000001058670742_b19321195416183"></a><a name="en-us_topic_0000001058670742_b19321195416183"></a>false</strong>: Chained animations are displayed.</li><li><strong id="en-us_topic_0000001058670742_b1493073215190"><a name="en-us_topic_0000001058670742_b1493073215190"></a><a name="en-us_topic_0000001058670742_b1493073215190"></a>true</strong>: No chained animation is displayed.<div class="note" id="en-us_topic_0000001058670742_note775214910343"><a name="en-us_topic_0000001058670742_note775214910343"></a><a name="en-us_topic_0000001058670742_note775214910343"></a><span class="notetitle"> NOTE: </span><div class="notebody"><a name="en-us_topic_0000001058670742_ul99031432111819"></a><a name="en-us_topic_0000001058670742_ul99031432111819"></a><ul id="en-us_topic_0000001058670742_ul99031432111819"><li>Dynamic modification is not supported.</li><li>This attribute does not take effect if an indexer is used.</li><li>If this attribute is <strong id="en-us_topic_0000001058670742_b93341294243"><a name="en-us_topic_0000001058670742_b93341294243"></a><a name="en-us_topic_0000001058670742_b93341294243"></a>true</strong>, the <strong id="en-us_topic_0000001058670742_b123631857114410"><a name="en-us_topic_0000001058670742_b123631857114410"></a><a name="en-us_topic_0000001058670742_b123631857114410"></a>sticky</strong> attributes set for <strong id="en-us_topic_0000001058670742_b17762181514469"><a name="en-us_topic_0000001058670742_b17762181514469"></a><a name="en-us_topic_0000001058670742_b17762181514469"></a><list-item></strong> components do not take effect.</li></ul> 169</div></div> 170</li></ul> 171</td> 172</tr> 173<tr id="en-us_topic_0000001058670742_row114931435579"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p2278932185814"><a name="en-us_topic_0000001058670742_p2278932185814"></a><a name="en-us_topic_0000001058670742_p2278932185814"></a>initialindex</p> 174</td> 175<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p627818324584"><a name="en-us_topic_0000001058670742_p627818324584"></a><a name="en-us_topic_0000001058670742_p627818324584"></a>number</p> 176</td> 177<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p142783321586"><a name="en-us_topic_0000001058670742_p142783321586"></a><a name="en-us_topic_0000001058670742_p142783321586"></a>0</p> 178</td> 179<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p20278123225811"><a name="en-us_topic_0000001058670742_p20278123225811"></a><a name="en-us_topic_0000001058670742_p20278123225811"></a>No</p> 180</td> 181<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p19236720152515"><a name="en-us_topic_0000001058670742_p19236720152515"></a><a name="en-us_topic_0000001058670742_p19236720152515"></a>Item to be displayed at the start position of the viewport when the current list is loaded for the first time. The default value is <strong id="en-us_topic_0000001058670742_b1823682018251"><a name="en-us_topic_0000001058670742_b1823682018251"></a><a name="en-us_topic_0000001058670742_b1823682018251"></a>0</strong>, indicating that the first item is displayed. </p> 182<p id="en-us_topic_0000001058670742_p16604922152515"><a name="en-us_topic_0000001058670742_p16604922152515"></a><a name="en-us_topic_0000001058670742_p16604922152515"></a>The setting does not take effect in any of the following cases: </p> 183<a name="en-us_topic_0000001058670742_ul920222662516"></a><a name="en-us_topic_0000001058670742_ul920222662516"></a><ul id="en-us_topic_0000001058670742_ul920222662516"><li>The value you set is greater than the index of the last item.</li><li>The <strong id="en-us_topic_0000001058670742_b39045241265"><a name="en-us_topic_0000001058670742_b39045241265"></a><a name="en-us_topic_0000001058670742_b39045241265"></a>initialoffset</strong> attribute is set.</li><li><strong id="en-us_topic_0000001058670742_b102021626202510"><a name="en-us_topic_0000001058670742_b102021626202510"></a><a name="en-us_topic_0000001058670742_b102021626202510"></a>indexer</strong> or <strong id="en-us_topic_0000001058670742_b1420282652515"><a name="en-us_topic_0000001058670742_b1420282652515"></a><a name="en-us_topic_0000001058670742_b1420282652515"></a>scrollpage</strong> is set to <strong id="en-us_topic_0000001058670742_b192021826132518"><a name="en-us_topic_0000001058670742_b192021826132518"></a><a name="en-us_topic_0000001058670742_b192021826132518"></a>true</strong>.</li></ul> 184</td> 185</tr> 186<tr id="en-us_topic_0000001058670742_row950539135714"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p827963212580"><a name="en-us_topic_0000001058670742_p827963212580"></a><a name="en-us_topic_0000001058670742_p827963212580"></a>initialoffset</p> 187</td> 188<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p227917321582"><a name="en-us_topic_0000001058670742_p227917321582"></a><a name="en-us_topic_0000001058670742_p227917321582"></a><length></p> 189</td> 190<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p62791332105814"><a name="en-us_topic_0000001058670742_p62791332105814"></a><a name="en-us_topic_0000001058670742_p62791332105814"></a>0</p> 191</td> 192<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p1527943212583"><a name="en-us_topic_0000001058670742_p1527943212583"></a><a name="en-us_topic_0000001058670742_p1527943212583"></a>No</p> 193</td> 194<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p327920329582"><a name="en-us_topic_0000001058670742_p327920329582"></a><a name="en-us_topic_0000001058670742_p327920329582"></a>Start offset of the viewport when the current list is loaded for the first time. The offset must not exceed the scrolling range of the current list. If exceeded, the offset is truncated to the maximum value of the scrolling range. This attribute does not take effect if <strong id="en-us_topic_0000001058670742_b519019121326"><a name="en-us_topic_0000001058670742_b519019121326"></a><a name="en-us_topic_0000001058670742_b519019121326"></a>indexer</strong> or <strong id="en-us_topic_0000001058670742_b519531213210"><a name="en-us_topic_0000001058670742_b519531213210"></a><a name="en-us_topic_0000001058670742_b519531213210"></a>scrollpage</strong> is set to <strong id="en-us_topic_0000001058670742_b121953129219"><a name="en-us_topic_0000001058670742_b121953129219"></a><a name="en-us_topic_0000001058670742_b121953129219"></a>true</strong>.</p> 195</td> 196</tr> 197<tr id="en-us_topic_0000001058670742_row1914605315918"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p19147135375914"><a name="en-us_topic_0000001058670742_p19147135375914"></a><a name="en-us_topic_0000001058670742_p19147135375914"></a>selected<sup id="en-us_topic_0000001058670742_sup2083525912347"><a name="en-us_topic_0000001058670742_sup2083525912347"></a><a name="en-us_topic_0000001058670742_sup2083525912347"></a>5+</sup></p> 198</td> 199<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p12147105375915"><a name="en-us_topic_0000001058670742_p12147105375915"></a><a name="en-us_topic_0000001058670742_p12147105375915"></a>string</p> 200</td> 201<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p161471753195920"><a name="en-us_topic_0000001058670742_p161471753195920"></a><a name="en-us_topic_0000001058670742_p161471753195920"></a>-</p> 202</td> 203<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p314745313591"><a name="en-us_topic_0000001058670742_p314745313591"></a><a name="en-us_topic_0000001058670742_p314745313591"></a>No</p> 204</td> 205<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p11147853145914"><a name="en-us_topic_0000001058670742_p11147853145914"></a><a name="en-us_topic_0000001058670742_p11147853145914"></a>Selected item in the current list. The value can be a <strong id="en-us_topic_0000001058670742_b19508174512249"><a name="en-us_topic_0000001058670742_b19508174512249"></a><a name="en-us_topic_0000001058670742_b19508174512249"></a>section</strong> value of any list items.</p> 206</td> 207</tr> 208<tr id="en-us_topic_0000001058670742_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a>id</p> 209</td> 210<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a>string</p> 211</td> 212<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a>-</p> 213</td> 214<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p42461736102118"><a name="en-us_topic_0000001058670742_p42461736102118"></a><a name="en-us_topic_0000001058670742_p42461736102118"></a>No</p> 215</td> 216<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a>Unique ID of a component.</p> 217</td> 218</tr> 219<tr id="en-us_topic_0000001058670742_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a>style</p> 220</td> 221<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a>string</p> 222</td> 223<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a>-</p> 224</td> 225<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p17246836142119"><a name="en-us_topic_0000001058670742_p17246836142119"></a><a name="en-us_topic_0000001058670742_p17246836142119"></a>No</p> 226</td> 227<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a>Style declaration of a component.</p> 228</td> 229</tr> 230<tr id="en-us_topic_0000001058670742_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a>class</p> 231</td> 232<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a>string</p> 233</td> 234<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a>-</p> 235</td> 236<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p324614367213"><a name="en-us_topic_0000001058670742_p324614367213"></a><a name="en-us_topic_0000001058670742_p324614367213"></a>No</p> 237</td> 238<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a>Style class of a component, which is used to refer to a style table.</p> 239</td> 240</tr> 241<tr id="en-us_topic_0000001058670742_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_p1786251117156"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_p1786251117156"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_p1786251117156"></a>ref</p> 242</td> 243<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_p1086241119157"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_p1086241119157"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_p1086241119157"></a>string</p> 244</td> 245<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_p586281111151"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_p586281111151"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_p586281111151"></a>-</p> 246</td> 247<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p1624612362219"><a name="en-us_topic_0000001058670742_p1624612362219"></a><a name="en-us_topic_0000001058670742_p1624612362219"></a>No</p> 248</td> 249<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_p113416153342"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_p113416153342"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ph5815920163518"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ph5815920163518"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ph5815920163518"></a> or child components</span>. The reference information is registered with the parent component on <strong id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_b08212202354"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_b08212202354"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_b08212202354"></a>$refs</strong>.</p> 250</td> 251</tr> 252<tr id="en-us_topic_0000001058670742_row1863421642313"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a>disabled</p> 253</td> 254<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a>boolean</p> 255</td> 256<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a>false</p> 257</td> 258<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p192476368214"><a name="en-us_topic_0000001058670742_p192476368214"></a><a name="en-us_topic_0000001058670742_p192476368214"></a>No</p> 259</td> 260<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a>Whether a component is disabled. If it is disabled, it cannot respond to user interaction.</p> 261</td> 262</tr> 263<tr id="en-us_topic_0000001058670742_row1263451617236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a>data</p> 264</td> 265<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a>string</p> 266</td> 267<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a>-</p> 268</td> 269<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p22471736132114"><a name="en-us_topic_0000001058670742_p22471736132114"></a><a name="en-us_topic_0000001058670742_p22471736132114"></a>No</p> 270</td> 271<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a>Attribute set for a component to facilitate data storage and reading.</p> 272</td> 273</tr> 274</tbody> 275</table> 276 277## Event<a name="en-us_topic_0000001058670742_section434813139467"></a> 278 279<a name="en-us_topic_0000001058670742_table15231816316"></a> 280<table><thead align="left"><tr id="en-us_topic_0000001058670742_row145242117317"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a>Name</p> 281</th> 282<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a>Parameter</p> 283</th> 284<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a>Triggered when</p> 285</th> 286</tr> 287</thead> 288<tbody><tr id="en-us_topic_0000001058670742_row18461840123410"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p203921456175513"><a name="en-us_topic_0000001058670742_p203921456175513"></a><a name="en-us_topic_0000001058670742_p203921456175513"></a>indexerchange<sup id="en-us_topic_0000001058670742_sup696223610175"><a name="en-us_topic_0000001058670742_sup696223610175"></a><a name="en-us_topic_0000001058670742_sup696223610175"></a>5+</sup></p> 289</td> 290<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p139219561558"><a name="en-us_topic_0000001058670742_p139219561558"></a><a name="en-us_topic_0000001058670742_p139219561558"></a>{ local: booleanValue }</p> 291</td> 292<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p3392205615517"><a name="en-us_topic_0000001058670742_p3392205615517"></a><a name="en-us_topic_0000001058670742_p3392205615517"></a>Triggered when the indexer switches between local and alphabetic indexers. This parameter takes effect only when both <strong id="en-us_topic_0000001058670742_b16937844815"><a name="en-us_topic_0000001058670742_b16937844815"></a><a name="en-us_topic_0000001058670742_b16937844815"></a>indexer</strong> and <strong id="en-us_topic_0000001058670742_b239116138814"><a name="en-us_topic_0000001058670742_b239116138814"></a><a name="en-us_topic_0000001058670742_b239116138814"></a>indexermulti</strong> are set to <strong id="en-us_topic_0000001058670742_b14371161515817"><a name="en-us_topic_0000001058670742_b14371161515817"></a><a name="en-us_topic_0000001058670742_b14371161515817"></a>true</strong>. The value of <strong id="en-us_topic_0000001058670742_b122409572813"><a name="en-us_topic_0000001058670742_b122409572813"></a><a name="en-us_topic_0000001058670742_b122409572813"></a>booleanValue</strong> can be:</p> 293<a name="en-us_topic_0000001058670742_ul17938142841817"></a><a name="en-us_topic_0000001058670742_ul17938142841817"></a><ul id="en-us_topic_0000001058670742_ul17938142841817"><li><strong id="en-us_topic_0000001058670742_b6542135618131"><a name="en-us_topic_0000001058670742_b6542135618131"></a><a name="en-us_topic_0000001058670742_b6542135618131"></a>true</strong>: The local index is displayed.</li><li><strong id="en-us_topic_0000001058670742_b17362155812135"><a name="en-us_topic_0000001058670742_b17362155812135"></a><a name="en-us_topic_0000001058670742_b17362155812135"></a>false</strong>: The alphabetic index is displayed.</li></ul> 294</td> 295</tr> 296<tr id="en-us_topic_0000001058670742_row114421501148"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p31973347"><a name="en-us_topic_0000001058670742_p31973347"></a><a name="en-us_topic_0000001058670742_p31973347"></a>scroll</p> 297</td> 298<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p1119235413"><a name="en-us_topic_0000001058670742_p1119235413"></a><a name="en-us_topic_0000001058670742_p1119235413"></a>{ scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue }</p> 299</td> 300<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p719733413"><a name="en-us_topic_0000001058670742_p719733413"></a><a name="en-us_topic_0000001058670742_p719733413"></a>Triggered to indicate the offset and status of list scrolling.</p> 301<p id="en-us_topic_0000001058670742_p10191431046"><a name="en-us_topic_0000001058670742_p10191431046"></a><a name="en-us_topic_0000001058670742_p10191431046"></a><strong id="en-us_topic_0000001058670742_b19254154542413"><a name="en-us_topic_0000001058670742_b19254154542413"></a><a name="en-us_topic_0000001058670742_b19254154542413"></a>stateValue: 0</strong>: The list is not scrolling.</p> 302<p id="en-us_topic_0000001058670742_p119123746"><a name="en-us_topic_0000001058670742_p119123746"></a><a name="en-us_topic_0000001058670742_p119123746"></a><strong id="en-us_topic_0000001058670742_b679923542516"><a name="en-us_topic_0000001058670742_b679923542516"></a><a name="en-us_topic_0000001058670742_b679923542516"></a>stateValue: 1</strong>: The list is scrolling along with user's touches.</p> 303<p id="en-us_topic_0000001058670742_p81919316414"><a name="en-us_topic_0000001058670742_p81919316414"></a><a name="en-us_topic_0000001058670742_p81919316414"></a><strong id="en-us_topic_0000001058670742_b6111123911267"><a name="en-us_topic_0000001058670742_b6111123911267"></a><a name="en-us_topic_0000001058670742_b6111123911267"></a>stateValue: 2</strong>: The list is scrolling after the touches stop.</p> 304</td> 305</tr> 306<tr id="en-us_topic_0000001058670742_row17442501648"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p319153146"><a name="en-us_topic_0000001058670742_p319153146"></a><a name="en-us_topic_0000001058670742_p319153146"></a>scrollbottom </p> 307</td> 308<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p720532047"><a name="en-us_topic_0000001058670742_p720532047"></a><a name="en-us_topic_0000001058670742_p720532047"></a>-</p> 309</td> 310<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p22017311414"><a name="en-us_topic_0000001058670742_p22017311414"></a><a name="en-us_topic_0000001058670742_p22017311414"></a>Triggered when the list is scrolled to the bottom.</p> 311</td> 312</tr> 313<tr id="en-us_topic_0000001058670742_row14494115515315"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p1420153147"><a name="en-us_topic_0000001058670742_p1420153147"></a><a name="en-us_topic_0000001058670742_p1420153147"></a>scrolltop </p> 314</td> 315<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p3201835410"><a name="en-us_topic_0000001058670742_p3201835410"></a><a name="en-us_topic_0000001058670742_p3201835410"></a>-</p> 316</td> 317<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p1720113541"><a name="en-us_topic_0000001058670742_p1720113541"></a><a name="en-us_topic_0000001058670742_p1720113541"></a>Triggered when the list is scrolled to the top.</p> 318</td> 319</tr> 320<tr id="en-us_topic_0000001058670742_row0634652532"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p192013319419"><a name="en-us_topic_0000001058670742_p192013319419"></a><a name="en-us_topic_0000001058670742_p192013319419"></a>scrollend</p> 321</td> 322<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p152013319416"><a name="en-us_topic_0000001058670742_p152013319416"></a><a name="en-us_topic_0000001058670742_p152013319416"></a>-</p> 323</td> 324<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p19208310413"><a name="en-us_topic_0000001058670742_p19208310413"></a><a name="en-us_topic_0000001058670742_p19208310413"></a>Triggered when the list stops scrolling.</p> 325</td> 326</tr> 327<tr id="en-us_topic_0000001058670742_row19295512635"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p182033947"><a name="en-us_topic_0000001058670742_p182033947"></a><a name="en-us_topic_0000001058670742_p182033947"></a>scrolltouchup </p> 328</td> 329<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p12043947"><a name="en-us_topic_0000001058670742_p12043947"></a><a name="en-us_topic_0000001058670742_p12043947"></a>-</p> 330</td> 331<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p920931543"><a name="en-us_topic_0000001058670742_p920931543"></a><a name="en-us_topic_0000001058670742_p920931543"></a>Triggered when the list continues scrolling after the user lifts their fingers.</p> 332</td> 333</tr> 334<tr id="en-us_topic_0000001058670742_row162052912315"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p142111313418"><a name="en-us_topic_0000001058670742_p142111313418"></a><a name="en-us_topic_0000001058670742_p142111313418"></a>requestitem </p> 335</td> 336<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p15211731845"><a name="en-us_topic_0000001058670742_p15211731845"></a><a name="en-us_topic_0000001058670742_p15211731845"></a>-</p> 337</td> 338<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p192193143"><a name="en-us_topic_0000001058670742_p192193143"></a><a name="en-us_topic_0000001058670742_p192193143"></a>Triggered for a request to create a list-item.</p> 339<p id="en-us_topic_0000001058670742_p132112310420"><a name="en-us_topic_0000001058670742_p132112310420"></a><a name="en-us_topic_0000001058670742_p132112310420"></a>This event is triggered when the number of cached list items outside the visible area is less than the value of <strong id="en-us_topic_0000001058670742_b1090183116404"><a name="en-us_topic_0000001058670742_b1090183116404"></a><a name="en-us_topic_0000001058670742_b1090183116404"></a>cachedcount</strong> during long list loading with delay.</p> 340</td> 341</tr> 342<tr id="en-us_topic_0000001058670742_row17524715317"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a>touchstart</p> 343</td> 344<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 345</td> 346<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a>The tapping starts</p> 347</td> 348</tr> 349<tr id="en-us_topic_0000001058670742_row25241111537"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a>touchmove</p> 350</td> 351<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 352</td> 353<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a>The tapping moves</p> 354</td> 355</tr> 356<tr id="en-us_topic_0000001058670742_row17525311238"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a>touchcancel</p> 357</td> 358<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 359</td> 360<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a>The tapping is interrupted</p> 361</td> 362</tr> 363<tr id="en-us_topic_0000001058670742_row16525181337"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a>touchend</p> 364</td> 365<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 366</td> 367<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a>The tapping ends</p> 368</td> 369</tr> 370<tr id="en-us_topic_0000001058670742_row1852541138"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a>click</p> 371</td> 372<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a>-</p> 373</td> 374<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a>A component is clicked</p> 375</td> 376</tr> 377<tr id="en-us_topic_0000001058670742_row12526111030"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a>longpress</p> 378</td> 379<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a>-</p> 380</td> 381<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a>A component is long pressed</p> 382</td> 383</tr> 384<tr id="en-us_topic_0000001058670742_row552741437"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_p12706561061"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_p12706561061"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_p12706561061"></a>swipe<sup id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_sup35424382912"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_sup35424382912"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_sup35424382912"></a>5+</sup></p> 385</td> 386<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_p11711056161"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_p11711056161"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_p11711056161"></a><a href="universal-events.md#en-us_topic_0000001058460527_table111811577714">SwipeEvent</a></p> 387</td> 388<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001058460527_p2711556162"><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_p2711556162"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001058460527_p2711556162"></a>A user quickly swipes on a component.</p> 389</td> 390</tr> 391</tbody> 392</table> 393 394## Style<a name="en-us_topic_0000001058670742_section5775351116"></a> 395 396<a name="en-us_topic_0000001058670742_table1744514388541"></a> 397<table><thead align="left"><tr id="en-us_topic_0000001058670742_row1244614388545"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a>Name</p> 398</th> 399<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a>Type</p> 400</th> 401<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a>Default Value</p> 402</th> 403<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058670742_p117421754619"><a name="en-us_topic_0000001058670742_p117421754619"></a><a name="en-us_topic_0000001058670742_p117421754619"></a>Mandatory</p> 404</th> 405<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a>Description</p> 406</th> 407</tr> 408</thead> 409<tbody><tr id="en-us_topic_0000001058670742_row194212174919"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p199724441985"><a name="en-us_topic_0000001058670742_p199724441985"></a><a name="en-us_topic_0000001058670742_p199724441985"></a>divider-color<sup id="en-us_topic_0000001058670742_sup3982558172012"><a name="en-us_topic_0000001058670742_sup3982558172012"></a><a name="en-us_topic_0000001058670742_sup3982558172012"></a>5+</sup></p> 410</td> 411<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p097214420817"><a name="en-us_topic_0000001058670742_p097214420817"></a><a name="en-us_topic_0000001058670742_p097214420817"></a><color></p> 412</td> 413<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p2097211443820"><a name="en-us_topic_0000001058670742_p2097211443820"></a><a name="en-us_topic_0000001058670742_p2097211443820"></a>transparent</p> 414</td> 415<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p11972204415818"><a name="en-us_topic_0000001058670742_p11972204415818"></a><a name="en-us_topic_0000001058670742_p11972204415818"></a>No</p> 416</td> 417<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p1397215441382"><a name="en-us_topic_0000001058670742_p1397215441382"></a><a name="en-us_topic_0000001058670742_p1397215441382"></a>Item divider color. This style is valid only when the <strong id="en-us_topic_0000001058670742_b1297030161517"><a name="en-us_topic_0000001058670742_b1297030161517"></a><a name="en-us_topic_0000001058670742_b1297030161517"></a>divider</strong> attribute of <strong id="en-us_topic_0000001058670742_b5742145113148"><a name="en-us_topic_0000001058670742_b5742145113148"></a><a name="en-us_topic_0000001058670742_b5742145113148"></a><list></strong> is set to <strong id="en-us_topic_0000001058670742_b1358345714144"><a name="en-us_topic_0000001058670742_b1358345714144"></a><a name="en-us_topic_0000001058670742_b1358345714144"></a>true</strong>.</p> 418</td> 419</tr> 420<tr id="en-us_topic_0000001058670742_row391641412910"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p1098356680"><a name="en-us_topic_0000001058670742_p1098356680"></a><a name="en-us_topic_0000001058670742_p1098356680"></a>divider-height<sup id="en-us_topic_0000001058670742_sup19987635215"><a name="en-us_topic_0000001058670742_sup19987635215"></a><a name="en-us_topic_0000001058670742_sup19987635215"></a>5+</sup></p> 421</td> 422<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p149835619814"><a name="en-us_topic_0000001058670742_p149835619814"></a><a name="en-us_topic_0000001058670742_p149835619814"></a><length></p> 423</td> 424<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p1498145614817"><a name="en-us_topic_0000001058670742_p1498145614817"></a><a name="en-us_topic_0000001058670742_p1498145614817"></a>1</p> 425</td> 426<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p29815567820"><a name="en-us_topic_0000001058670742_p29815567820"></a><a name="en-us_topic_0000001058670742_p29815567820"></a>No</p> 427</td> 428<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p10983561383"><a name="en-us_topic_0000001058670742_p10983561383"></a><a name="en-us_topic_0000001058670742_p10983561383"></a>Item divider height. This style is valid only when the <strong id="en-us_topic_0000001058670742_b11937127141512"><a name="en-us_topic_0000001058670742_b11937127141512"></a><a name="en-us_topic_0000001058670742_b11937127141512"></a>divider</strong> attribute of <strong id="en-us_topic_0000001058670742_b189375713157"><a name="en-us_topic_0000001058670742_b189375713157"></a><a name="en-us_topic_0000001058670742_b189375713157"></a><list></strong> is set to <strong id="en-us_topic_0000001058670742_b69387717151"><a name="en-us_topic_0000001058670742_b69387717151"></a><a name="en-us_topic_0000001058670742_b69387717151"></a>true</strong>.</p> 429</td> 430</tr> 431<tr id="en-us_topic_0000001058670742_row28222110920"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p1144015414911"><a name="en-us_topic_0000001058670742_p1144015414911"></a><a name="en-us_topic_0000001058670742_p1144015414911"></a>divider-length<sup id="en-us_topic_0000001058670742_sup5326118102117"><a name="en-us_topic_0000001058670742_sup5326118102117"></a><a name="en-us_topic_0000001058670742_sup5326118102117"></a>5+</sup></p> 432</td> 433<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p3440174196"><a name="en-us_topic_0000001058670742_p3440174196"></a><a name="en-us_topic_0000001058670742_p3440174196"></a><length></p> 434</td> 435<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p0440741193"><a name="en-us_topic_0000001058670742_p0440741193"></a><a name="en-us_topic_0000001058670742_p0440741193"></a>The main axis width</p> 436</td> 437<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p15440541997"><a name="en-us_topic_0000001058670742_p15440541997"></a><a name="en-us_topic_0000001058670742_p15440541997"></a>No</p> 438</td> 439<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p10440341697"><a name="en-us_topic_0000001058670742_p10440341697"></a><a name="en-us_topic_0000001058670742_p10440341697"></a>Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the <strong id="en-us_topic_0000001058670742_b11621155518258"><a name="en-us_topic_0000001058670742_b11621155518258"></a><a name="en-us_topic_0000001058670742_b11621155518258"></a>divider-origin</strong> parameter. This style is valid only when the <strong id="en-us_topic_0000001058670742_b68621714152610"><a name="en-us_topic_0000001058670742_b68621714152610"></a><a name="en-us_topic_0000001058670742_b68621714152610"></a>divider</strong> attribute of the list is set to <strong id="en-us_topic_0000001058670742_b1040015185263"><a name="en-us_topic_0000001058670742_b1040015185263"></a><a name="en-us_topic_0000001058670742_b1040015185263"></a>true</strong>.</p> 440</td> 441</tr> 442<tr id="en-us_topic_0000001058670742_row46441281390"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p1223216191395"><a name="en-us_topic_0000001058670742_p1223216191395"></a><a name="en-us_topic_0000001058670742_p1223216191395"></a>divider-origin<sup id="en-us_topic_0000001058670742_sup18714913122119"><a name="en-us_topic_0000001058670742_sup18714913122119"></a><a name="en-us_topic_0000001058670742_sup18714913122119"></a>5+</sup></p> 443</td> 444<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p1232161919915"><a name="en-us_topic_0000001058670742_p1232161919915"></a><a name="en-us_topic_0000001058670742_p1232161919915"></a><length></p> 445</td> 446<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p723231910913"><a name="en-us_topic_0000001058670742_p723231910913"></a><a name="en-us_topic_0000001058670742_p723231910913"></a>0</p> 447</td> 448<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p3232141916912"><a name="en-us_topic_0000001058670742_p3232141916912"></a><a name="en-us_topic_0000001058670742_p3232141916912"></a>No</p> 449</td> 450<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p42327191895"><a name="en-us_topic_0000001058670742_p42327191895"></a><a name="en-us_topic_0000001058670742_p42327191895"></a>Item divider offset relative to the start point of the main axis. This style is valid only when the <strong id="en-us_topic_0000001058670742_b194511311204618"><a name="en-us_topic_0000001058670742_b194511311204618"></a><a name="en-us_topic_0000001058670742_b194511311204618"></a>divider</strong> attribute of the list is set to <strong id="en-us_topic_0000001058670742_b13844149467"><a name="en-us_topic_0000001058670742_b13844149467"></a><a name="en-us_topic_0000001058670742_b13844149467"></a>true</strong>.</p> 451</td> 452</tr> 453<tr id="en-us_topic_0000001058670742_row39106404819"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p11283866482"><a name="en-us_topic_0000001058670742_p11283866482"></a><a name="en-us_topic_0000001058670742_p11283866482"></a>flex-direction</p> 454</td> 455<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p7283162488"><a name="en-us_topic_0000001058670742_p7283162488"></a><a name="en-us_topic_0000001058670742_p7283162488"></a>string</p> 456<p id="en-us_topic_0000001058670742_p182831368480"><a name="en-us_topic_0000001058670742_p182831368480"></a><a name="en-us_topic_0000001058670742_p182831368480"></a></p> 457</td> 458<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p0283762488"><a name="en-us_topic_0000001058670742_p0283762488"></a><a name="en-us_topic_0000001058670742_p0283762488"></a>column</p> 459</td> 460<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p172837614485"><a name="en-us_topic_0000001058670742_p172837614485"></a><a name="en-us_topic_0000001058670742_p172837614485"></a>No</p> 461</td> 462<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p172837654814"><a name="en-us_topic_0000001058670742_p172837654814"></a><a name="en-us_topic_0000001058670742_p172837654814"></a>Main axis direction of the flex container. It specifies how items are placed in the flex container.</p> 463<a name="en-us_topic_0000001058670742_ul132831763482"></a><a name="en-us_topic_0000001058670742_ul132831763482"></a><ul id="en-us_topic_0000001058670742_ul132831763482"><li><strong id="en-us_topic_0000001058670742_b195531457856"><a name="en-us_topic_0000001058670742_b195531457856"></a><a name="en-us_topic_0000001058670742_b195531457856"></a>column</strong>: The y-axis is the maim axis.</li><li><strong id="en-us_topic_0000001058670742_b1454210619720"><a name="en-us_topic_0000001058670742_b1454210619720"></a><a name="en-us_topic_0000001058670742_b1454210619720"></a>row</strong>: The x-axis is the main axis.</li></ul> 464<p id="en-us_topic_0000001058670742_p132831263486"><a name="en-us_topic_0000001058670742_p132831263486"></a><a name="en-us_topic_0000001058670742_p132831263486"></a>For the <strong id="en-us_topic_0000001058670742_b587519315312"><a name="en-us_topic_0000001058670742_b587519315312"></a><a name="en-us_topic_0000001058670742_b587519315312"></a><list></strong> component, the default value is <strong id="en-us_topic_0000001058670742_b2766193510313"><a name="en-us_topic_0000001058670742_b2766193510313"></a><a name="en-us_topic_0000001058670742_b2766193510313"></a>column</strong>. For other components, the default value is <strong id="en-us_topic_0000001058670742_b1853133913313"><a name="en-us_topic_0000001058670742_b1853133913313"></a><a name="en-us_topic_0000001058670742_b1853133913313"></a>row</strong>. </p> 465</td> 466</tr> 467<tr id="en-us_topic_0000001058670742_row114441253204717"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p192847684817"><a name="en-us_topic_0000001058670742_p192847684817"></a><a name="en-us_topic_0000001058670742_p192847684817"></a>columns</p> 468</td> 469<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p92848613481"><a name="en-us_topic_0000001058670742_p92848613481"></a><a name="en-us_topic_0000001058670742_p92848613481"></a>number</p> 470</td> 471<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p1928410616485"><a name="en-us_topic_0000001058670742_p1928410616485"></a><a name="en-us_topic_0000001058670742_p1928410616485"></a>1</p> 472</td> 473<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p192844611485"><a name="en-us_topic_0000001058670742_p192844611485"></a><a name="en-us_topic_0000001058670742_p192844611485"></a>No</p> 474</td> 475<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p1928418624820"><a name="en-us_topic_0000001058670742_p1928418624820"></a><a name="en-us_topic_0000001058670742_p1928418624820"></a>Number of columns displayed in the cross axis direction of the list. The default value is <strong id="en-us_topic_0000001058670742_b106911824153820"><a name="en-us_topic_0000001058670742_b106911824153820"></a><a name="en-us_topic_0000001058670742_b106911824153820"></a>1</strong>.</p> 476<div class="note" id="en-us_topic_0000001058670742_note87762014175811"><a name="en-us_topic_0000001058670742_note87762014175811"></a><a name="en-us_topic_0000001058670742_note87762014175811"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058670742_p157761214205810"><a name="en-us_topic_0000001058670742_p157761214205810"></a><a name="en-us_topic_0000001058670742_p157761214205810"></a>When multiple columns are set, the columns are evenly distributed on the cross axis of the <strong id="en-us_topic_0000001058670742_b20419145511271"><a name="en-us_topic_0000001058670742_b20419145511271"></a><a name="en-us_topic_0000001058670742_b20419145511271"></a><list></strong> component. The size of each column is the same.</p> 477</div></div> 478</td> 479</tr> 480<tr id="en-us_topic_0000001058670742_row2220195185518"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p12617942184311"><a name="en-us_topic_0000001058670742_p12617942184311"></a><a name="en-us_topic_0000001058670742_p12617942184311"></a>align-items</p> 481</td> 482<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p15617194264312"><a name="en-us_topic_0000001058670742_p15617194264312"></a><a name="en-us_topic_0000001058670742_p15617194264312"></a>string</p> 483</td> 484<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p061744213433"><a name="en-us_topic_0000001058670742_p061744213433"></a><a name="en-us_topic_0000001058670742_p061744213433"></a>stretch</p> 485</td> 486<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p12617154214437"><a name="en-us_topic_0000001058670742_p12617154214437"></a><a name="en-us_topic_0000001058670742_p12617154214437"></a>No</p> 487</td> 488<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p9617542124318"><a name="en-us_topic_0000001058670742_p9617542124318"></a><a name="en-us_topic_0000001058670742_p9617542124318"></a>Alignment of items in each column on the cross axis. Available values are as follows:</p> 489<a name="en-us_topic_0000001058670742_ul166171442134312"></a><a name="en-us_topic_0000001058670742_ul166171442134312"></a><ul id="en-us_topic_0000001058670742_ul166171442134312"><li><strong id="en-us_topic_0000001058670742_b162552382282"><a name="en-us_topic_0000001058670742_b162552382282"></a><a name="en-us_topic_0000001058670742_b162552382282"></a>stretch</strong>: Items are stretched to the same height or width as the container in the cross axis direction. </li><li><strong id="en-us_topic_0000001058670742_b534154612815"><a name="en-us_topic_0000001058670742_b534154612815"></a><a name="en-us_topic_0000001058670742_b534154612815"></a>flex-start</strong>: Items are aligned to the start of the cross axis.</li><li><strong id="en-us_topic_0000001058670742_b12116104832812"><a name="en-us_topic_0000001058670742_b12116104832812"></a><a name="en-us_topic_0000001058670742_b12116104832812"></a>flex-end</strong>: Items are aligned to the end of the cross axis.</li><li><strong id="en-us_topic_0000001058670742_b16621855132813"><a name="en-us_topic_0000001058670742_b16621855132813"></a><a name="en-us_topic_0000001058670742_b16621855132813"></a>center</strong>: Items are aligned in the middle of the cross axis.<div class="note" id="en-us_topic_0000001058670742_note10891229703"><a name="en-us_topic_0000001058670742_note10891229703"></a><a name="en-us_topic_0000001058670742_note10891229703"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058670742_p18891029105"><a name="en-us_topic_0000001058670742_p18891029105"></a><a name="en-us_topic_0000001058670742_p18891029105"></a>This style takes effect only on items of each column. Columns are evenly distributed.</p> 490</div></div> 491</li></ul> 492</td> 493</tr> 494<tr id="en-us_topic_0000001058670742_row487325034719"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p2028420617487"><a name="en-us_topic_0000001058670742_p2028420617487"></a><a name="en-us_topic_0000001058670742_p2028420617487"></a>item-extent</p> 495</td> 496<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p828496164810"><a name="en-us_topic_0000001058670742_p828496164810"></a><a name="en-us_topic_0000001058670742_p828496164810"></a><length> | <percentage></p> 497</td> 498<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p928413644818"><a name="en-us_topic_0000001058670742_p928413644818"></a><a name="en-us_topic_0000001058670742_p928413644818"></a>-</p> 499</td> 500<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p2028416134815"><a name="en-us_topic_0000001058670742_p2028416134815"></a><a name="en-us_topic_0000001058670742_p2028416134815"></a>No</p> 501</td> 502<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p18284660488"><a name="en-us_topic_0000001058670742_p18284660488"></a><a name="en-us_topic_0000001058670742_p18284660488"></a>Size of an internal item. When a percentage is set, the value indicates the percentage of the length in the main axis direction relative to the list viewpoint.</p> 503</td> 504</tr> 505<tr id="en-us_topic_0000001058670742_row99041447114713"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_p172840624815"><a name="en-us_topic_0000001058670742_p172840624815"></a><a name="en-us_topic_0000001058670742_p172840624815"></a>fade-color</p> 506</td> 507<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_p132851863484"><a name="en-us_topic_0000001058670742_p132851863484"></a><a name="en-us_topic_0000001058670742_p132851863484"></a><color></p> 508</td> 509<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_p1728506174819"><a name="en-us_topic_0000001058670742_p1728506174819"></a><a name="en-us_topic_0000001058670742_p1728506174819"></a>grey</p> 510</td> 511<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p22852060481"><a name="en-us_topic_0000001058670742_p22852060481"></a><a name="en-us_topic_0000001058670742_p22852060481"></a>No</p> 512</td> 513<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_p428518694818"><a name="en-us_topic_0000001058670742_p428518694818"></a><a name="en-us_topic_0000001058670742_p428518694818"></a>Color of the physical dynamic effect. This attribute is valid only when <strong id="en-us_topic_0000001058670742_b1640719118429"><a name="en-us_topic_0000001058670742_b1640719118429"></a><a name="en-us_topic_0000001058670742_b1640719118429"></a>scrolleffect</strong> is set to <strong id="en-us_topic_0000001058670742_b1941331114423"><a name="en-us_topic_0000001058670742_b1941331114423"></a><a name="en-us_topic_0000001058670742_b1941331114423"></a>fade</strong>.</p> 514</td> 515</tr> 516<tr id="en-us_topic_0000001058670742_row13446238145410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"></a>width</p> 517</td> 518<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"></a><length> | <percentage></p> 519</td> 520<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p3948114217528"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p3948114217528"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p3948114217528"></a>-</p> 521</td> 522<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p13174101704612"><a name="en-us_topic_0000001058670742_p13174101704612"></a><a name="en-us_topic_0000001058670742_p13174101704612"></a>No</p> 523</td> 524<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p624653010258"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p624653010258"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p624653010258"></a>Component width.</p> 525<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p84811050134010"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p84811050134010"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p84811050134010"></a>If this attribute is not set, the width required for the element content is used. </p> 526</td> 527</tr> 528<tr id="en-us_topic_0000001058670742_row7446738195418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a>height</p> 529</td> 530<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"></a><length><span id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph11748352163918"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph11748352163918"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph11748352163918"></a></span> | <percentage></p> 531</td> 532<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"></a>-</p> 533</td> 534<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p71741417194619"><a name="en-us_topic_0000001058670742_p71741417194619"></a><a name="en-us_topic_0000001058670742_p71741417194619"></a>No</p> 535</td> 536<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1477601264"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1477601264"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1477601264"></a>Component height.</p> 537<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p208761554184020"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p208761554184020"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p208761554184020"></a>If this length attribute is not set, the length required for the element content is used. </p> 538</td> 539</tr> 540<tr id="en-us_topic_0000001058670742_row18446638145412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"></a>padding</p> 541</td> 542<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"></a><length> | <percentage><sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup1886516813013"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup1886516813013"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup1886516813013"></a>5+</sup></p> 543</td> 544<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"></a>0</p> 545</td> 546<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p19729127112814"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p19729127112814"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p19729127112814"></a>No</p> 547</td> 548<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p157435053316"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p157435053316"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p157435053316"></a>Shorthand attribute to set all padding attributes.</p> 549<div class="p" id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"></a>The attribute can have one to four values:<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul15202134923211"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul15202134923211"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul15202134923211"><li><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p10614155353215"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p10614155353215"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p10614155353215"></a>If you set only one value, it specifies the padding for four sides.</p> 550</li><li><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p10614175393216"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p10614175393216"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p10614175393216"></a>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.</p> 551</li><li><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p8614205393214"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p8614205393214"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p8614205393214"></a>If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.</p> 552</li><li><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p106141853193215"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p106141853193215"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p106141853193215"></a>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).</p> 553</li></ul> 554</div> 555</td> 556</tr> 557<tr id="en-us_topic_0000001058670742_row24464380544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"></a>padding-[left|top|right|bottom]</p> 558</td> 559<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"></a><length> | <percentage><sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup19949912807"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup19949912807"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup19949912807"></a>5+</sup></p> 560</td> 561<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"></a>0</p> 562</td> 563<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p11729374289"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p11729374289"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p11729374289"></a>No</p> 564</td> 565<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"></a>Left, top, right, and bottom padding (in px).</p> 566</td> 567</tr> 568<tr id="en-us_topic_0000001058670742_row1144723845412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p769124717365"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p769124717365"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p769124717365"></a>padding-[start|end]</p> 569</td> 570<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p157617124374"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p157617124374"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p157617124374"></a><length> | <percentage><sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup8490161513019"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup8490161513019"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup8490161513019"></a>5+</sup></p> 571</td> 572<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1069144703616"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1069144703616"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1069144703616"></a>0</p> 573</td> 574<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1373027182819"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1373027182819"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1373027182819"></a>No</p> 575</td> 576<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1269184753610"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1269184753610"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1269184753610"></a>Start and end padding.</p> 577</td> 578</tr> 579<tr id="en-us_topic_0000001058670742_row11447438175410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"></a>margin</p> 580</td> 581<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><length> | <percentage><sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup1433352175220"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup1433352175220"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup1433352175220"></a>5+</sup></p> 582</td> 583<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"></a>0</p> 584</td> 585<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p4730774285"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p4730774285"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p4730774285"></a>No</p> 586</td> 587<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"></a>Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:</p> 588<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul5333133311105"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul5333133311105"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul5333133311105"><li><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p03345339103"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p03345339103"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p03345339103"></a>If you set only one value, it specifies the margin for all the four sides.</p> 589</li><li><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1133420334108"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1133420334108"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1133420334108"></a>If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.</p> 590</li><li><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p193341533191015"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p193341533191015"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p193341533191015"></a>If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.</p> 591</li><li><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p733412334102"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p733412334102"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p733412334102"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p> 592</li></ul> 593</td> 594</tr> 595<tr id="en-us_topic_0000001058670742_row144473383544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"></a>margin-[left|top|right|bottom]</p> 596</td> 597<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"></a><length> | <percentage><sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup378331720532"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup378331720532"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup378331720532"></a>5+</sup></p> 598</td> 599<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"></a>0</p> 600</td> 601<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p773013742811"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p773013742811"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p773013742811"></a>No</p> 602</td> 603<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"></a>Left, top, right, and bottom margins.</p> 604</td> 605</tr> 606<tr id="en-us_topic_0000001058670742_row944743811541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p9492107123816"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p9492107123816"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p9492107123816"></a>margin-[start|end]</p> 607</td> 608<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p157617124374_1"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p157617124374_1"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p157617124374_1"></a><length> | <percentage><sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup8490161513019_1"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup8490161513019_1"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup8490161513019_1"></a>5+</sup></p> 609</td> 610<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1549213793811"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1549213793811"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1549213793811"></a>0</p> 611</td> 612<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p117511744618"><a name="en-us_topic_0000001058670742_p117511744618"></a><a name="en-us_topic_0000001058670742_p117511744618"></a>No</p> 613</td> 614<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1049212715388"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1049212715388"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1049212715388"></a>Start and end margins.</p> 615</td> 616</tr> 617<tr id="en-us_topic_0000001058670742_row16447238155411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"></a>border</p> 618</td> 619<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"></a>-</p> 620</td> 621<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"></a>0</p> 622</td> 623<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p11175131715467"><a name="en-us_topic_0000001058670742_p11175131715467"></a><a name="en-us_topic_0000001058670742_p11175131715467"></a>No</p> 624</td> 625<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"></a>Shorthand attribute to set all borders. You can set <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b79128342503"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b79128342503"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b79128342503"></a>border-width</strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b9366173919505"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b9366173919505"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b9366173919505"></a>border-style</strong>, and <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b184351248205019"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b184351248205019"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b184351248205019"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 626</td> 627</tr> 628<tr id="en-us_topic_0000001058670742_row4447138115414"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"></a>border-style</p> 629</td> 630<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p513631613319"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p513631613319"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p513631613319"></a>string</p> 631</td> 632<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"></a>solid</p> 633</td> 634<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p617531717464"><a name="en-us_topic_0000001058670742_p617531717464"></a><a name="en-us_topic_0000001058670742_p617531717464"></a>No</p> 635</td> 636<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p342285712314"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p342285712314"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p342285712314"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p> 637<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul1470834505612"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul1470834505612"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul1470834505612"><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b143453286360"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b143453286360"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b143453286360"></a>dotted</strong>: Dotted border. The radius of a dot is half of border-width.</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b792117280367"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b792117280367"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b792117280367"></a>dashed</strong>: Dashed border</li></ul> 638<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul15621125545612"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul15621125545612"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul15621125545612"><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1335862963610"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1335862963610"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1335862963610"></a>solid</strong>: Solid border</li></ul> 639</td> 640</tr> 641<tr id="en-us_topic_0000001058670742_row1656512239262"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p119531437370"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p119531437370"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p119531437370"></a>border-[left|top|right|bottom]-style</p> 642</td> 643<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p129532037175"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p129532037175"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p129532037175"></a>string</p> 644</td> 645<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p495312372717"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p495312372717"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p495312372717"></a>solid</p> 646</td> 647<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p169534375717"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p169534375717"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p169534375717"></a>No</p> 648</td> 649<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p595353718719"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p595353718719"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p595353718719"></a>Styles of the left, top, right, and bottom borders. The available values are <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b17769171311540"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b17769171311540"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b17769171311540"></a>dotted</strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b237141519547"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b237141519547"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b237141519547"></a>dashed</strong>, and <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b8949161613540"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b8949161613540"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b8949161613540"></a>solid</strong>.</p> 650</td> 651</tr> 652<tr id="en-us_topic_0000001058670742_row19448113811542"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"></a>border-[left|top|right|bottom]</p> 653</td> 654<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"></a>-</p> 655</td> 656<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"></a>-</p> 657</td> 658<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p67303762810"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p67303762810"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p67303762810"></a>No</p> 659</td> 660<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"></a>Shorthand attribute to set the borders for every side respectively. You can set <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b122415514554"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b122415514554"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b122415514554"></a>border-width</strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b12296178135513"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b12296178135513"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b12296178135513"></a>border-style</strong>, and <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1129701210553"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1129701210553"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1129701210553"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 661</td> 662</tr> 663<tr id="en-us_topic_0000001058670742_row124481638165417"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"></a>border-width</p> 664</td> 665<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><length></p> 666</td> 667<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"></a>0</p> 668</td> 669<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p16175131724618"><a name="en-us_topic_0000001058670742_p16175131724618"></a><a name="en-us_topic_0000001058670742_p16175131724618"></a>No</p> 670</td> 671<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"></a>Shorthand attribute to set the width of all borders<span id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph07997369365"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph07997369365"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph07997369365"></a>, or separately set the width of each border</span>.</p> 672</td> 673</tr> 674<tr id="en-us_topic_0000001058670742_row54481038165410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"></a>border-[left|top|right|bottom]-width</p> 675</td> 676<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"></a><length></p> 677</td> 678<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"></a>0</p> 679</td> 680<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p11175151717466"><a name="en-us_topic_0000001058670742_p11175151717466"></a><a name="en-us_topic_0000001058670742_p11175151717466"></a>No</p> 681</td> 682<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"></a>Attribute to set widths of left, top, right, and bottom borders.</p> 683</td> 684</tr> 685<tr id="en-us_topic_0000001058670742_row1744817385547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"></a>border-color</p> 686</td> 687<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"></a><color></p> 688</td> 689<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"></a>black</p> 690</td> 691<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p1017518177465"><a name="en-us_topic_0000001058670742_p1017518177465"></a><a name="en-us_topic_0000001058670742_p1017518177465"></a>No</p> 692</td> 693<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"></a>Shorthand attribute to set the color of all borders<span id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph9587639113619"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph9587639113619"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph9587639113619"></a>, or separately set the color of each border</span>.</p> 694</td> 695</tr> 696<tr id="en-us_topic_0000001058670742_row844813835410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"></a>border-[left|top|right|bottom]-color</p> 697</td> 698<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"></a><color></p> 699</td> 700<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"></a>black</p> 701</td> 702<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p11175417184611"><a name="en-us_topic_0000001058670742_p11175417184611"></a><a name="en-us_topic_0000001058670742_p11175417184611"></a>No</p> 703</td> 704<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"></a>Attribute to set colors of left, top, right, and bottom borders.</p> 705</td> 706</tr> 707<tr id="en-us_topic_0000001058670742_row944813389540"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"></a>border-radius</p> 708</td> 709<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"></a><length></p> 710</td> 711<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"></a>-</p> 712</td> 713<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p67306752816"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p67306752816"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p67306752816"></a>No</p> 714</td> 715<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"></a>Attribute to set the radius of round borders of an element. <span id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph1249443123611"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph1249443123611"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph1249443123611"></a>This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b124211434362"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b124211434362"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b124211434362"></a>border-width</strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b124894383615"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b124894383615"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b124894383615"></a>border-color</strong>, or <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b7166134516465"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b7166134516465"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b7166134516465"></a>border-style</strong> for all the borders at the same time.</span></p> 716</td> 717</tr> 718<tr id="en-us_topic_0000001058670742_row104494382546"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"></a>border-[top|bottom]-[left|right]-radius</p> 719</td> 720<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"></a><length></p> 721</td> 722<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"></a>-</p> 723</td> 724<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p27305718283"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p27305718283"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p27305718283"></a>No</p> 725</td> 726<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"></a>Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners</p> 727</td> 728</tr> 729<tr id="en-us_topic_0000001058670742_row1344912384548"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"></a>background</p> 730</td> 731<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><linear-gradient></p> 732</td> 733<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"></a>-</p> 734</td> 735<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p15730197132811"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p15730197132811"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p15730197132811"></a>No</p> 736</td> 737<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a>This attribute supports <a href="gradient-styles.md#EN-US_TOPIC_0000001115974726">Gradient Styles</a> only but is not compatible with <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b389373419292"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b389373419292"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b389373419292"></a>background-color</strong> or <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b0399637142918"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b0399637142918"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b0399637142918"></a>background-image</strong>.</p> 738</td> 739</tr> 740<tr id="en-us_topic_0000001058670742_row15449838185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"></a>background-color</p> 741</td> 742<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"></a><color></p> 743</td> 744<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"></a>-</p> 745</td> 746<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p17730577282"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p17730577282"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p17730577282"></a>No</p> 747</td> 748<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"></a>Background color.</p> 749</td> 750</tr> 751<tr id="en-us_topic_0000001058670742_row54491338115412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"></a>background-image</p> 752</td> 753<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"></a>string</p> 754</td> 755<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"></a>-</p> 756</td> 757<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p7730976285"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p7730976285"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p7730976285"></a>No</p> 758</td> 759<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b17699154763620"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b17699154763620"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b17699154763620"></a>background-color</strong> or <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b87001647163613"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b87001647163613"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b87001647163613"></a>background</strong>. Local image resources are supported.</p> 760<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p45914251572"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p45914251572"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p45914251572"></a>Example:</p> 761<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p16184973578"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p16184973578"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p16184973578"></a>background-image: url("/common/background.png")</p> 762</td> 763</tr> 764<tr id="en-us_topic_0000001058670742_row6449238185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"></a>background-size</p> 765</td> 766<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul1065173641310"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul1065173641310"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul1065173641310"><li>string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 767</td> 768<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"></a>auto</p> 769</td> 770<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p137309714282"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p137309714282"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p137309714282"></a>No</p> 771</td> 772<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p91971112114318"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p91971112114318"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p91971112114318"></a>Background image size.</p> 773<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul41331853154111"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul41331853154111"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul41331853154111"><li>The <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1229715499365"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1229715499365"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1229715499365"></a>string</strong> values are as follows:<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul13611494111"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul13611494111"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul13611494111"><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b4759749163610"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b4759749163610"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b4759749163610"></a>contain</strong>: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b437619381712"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b437619381712"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b437619381712"></a>cover</strong>: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1425512535366"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1425512535366"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1425512535366"></a>auto</strong>: The original image width-height ratio is retained.</li></ul> 774</li><li>The two <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b13309145193614"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b13309145193614"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b13309145193614"></a><length></strong> values are as follows:<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1840244924418"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1840244924418"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1840244924418"></a>Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b146661156143617"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b146661156143617"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b146661156143617"></a>auto</strong> by default.</p> 775</li><li>The two <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1667415763613"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1667415763613"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1667415763613"></a><percentage></strong> values are as follows:<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p17936154410457"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p17936154410457"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p17936154410457"></a>Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1524319254"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1524319254"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1524319254"></a>auto</strong> by default.</p> 776</li></ul> 777</td> 778</tr> 779<tr id="en-us_topic_0000001058670742_row94491238155415"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"></a>background-repeat</p> 780</td> 781<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"></a>string</p> 782</td> 783<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"></a>repeat</p> 784</td> 785<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1673015702810"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1673015702810"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1673015702810"></a>No</p> 786</td> 787<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"></a>How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.</p> 788<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul8236153103612"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul8236153103612"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul8236153103612"><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1363463710"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1363463710"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1363463710"></a>repeat</strong>: Repeatedly draws images along the x-axis and y-axis at the same time.</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b267416916377"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b267416916377"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b267416916377"></a>repeat-x</strong>: Repeatedly draws images along the x-axis.</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b625561011379"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b625561011379"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b625561011379"></a>repeat-y</strong>: Repeatedly draws images along the y-axis.</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1122181133715"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1122181133715"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1122181133715"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul> 789</td> 790</tr> 791<tr id="en-us_topic_0000001058670742_row94491738105419"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"></a>background-position</p> 792</td> 793<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul8874155216502"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul8874155216502"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul8874155216502"><li>string string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 794</td> 795<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"></a>0px 0px</p> 796</td> 797<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p173010720280"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p173010720280"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p173010720280"></a>No</p> 798</td> 799<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul1590812103363"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul1590812103363"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b5234102011540"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b5234102011540"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b5234102011540"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul1453531734716"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul1453531734716"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul1453531734716"><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b0982111273712"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b0982111273712"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b0982111273712"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b866713583912"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b866713583912"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b866713583912"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b5886013193716"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b5886013193716"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b5886013193716"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b84197142376"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b84197142376"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b84197142376"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b14894114103710"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b14894114103710"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b14894114103710"></a>center</strong>: center position</li></ul> 800</li></ul> 801<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul10908121023615"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul10908121023615"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul10908121023615"><li>Using <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b11401615193715"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b11401615193715"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b11401615193715"></a><length></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1341381819379"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1341381819379"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1341381819379"></a>0 0</strong> indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b48671516183714"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b48671516183714"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b48671516183714"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b5492717163712"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b5492717163712"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b5492717163712"></a><percentage></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b164741723183712"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b164741723183712"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b164741723183712"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b64022245377"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b64022245377"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b64022245377"></a>100% 100%</strong> indicates the lower right corner. If only one value is specified, the other one is <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b7893424163718"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b7893424163718"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b7893424163718"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b154811725193718"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b154811725193718"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b154811725193718"></a><percentage></strong> and <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b34834254377"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b34834254377"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b34834254377"></a><length></strong>.</li></ul> 802</td> 803</tr> 804<tr id="en-us_topic_0000001058670742_row20450143885416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p134581712103910"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p134581712103910"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p134581712103910"></a>opacity</p> 805</td> 806<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"></a>number</p> 807</td> 808<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"></a>1</p> 809</td> 810<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1873011722814"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1873011722814"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1873011722814"></a>No</p> 811</td> 812<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p122515161139"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p122515161139"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1871715526385"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1871715526385"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1871715526385"></a>0</strong> to <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b177181452103815"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b177181452103815"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b177181452103815"></a>1</strong>. The value <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b13718155210380"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b13718155210380"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b13718155210380"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b6718152103818"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b6718152103818"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b6718152103818"></a>0</strong> means completely transparent.</p> 813</td> 814</tr> 815<tr id="en-us_topic_0000001058670742_row1450123865418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aeda9e2f8d8344958bf4f43d429dcb55e"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aeda9e2f8d8344958bf4f43d429dcb55e"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aeda9e2f8d8344958bf4f43d429dcb55e"></a>display</p> 816</td> 817<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1544115441446"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1544115441446"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1544115441446"></a>string</p> 818<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aaaa164aa970b490fb048e5f260f1c661"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aaaa164aa970b490fb048e5f260f1c661"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aaaa164aa970b490fb048e5f260f1c661"></a></p> 819</td> 820<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aa5ce61466c9847dbb7f44852338d9006"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aa5ce61466c9847dbb7f44852338d9006"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aa5ce61466c9847dbb7f44852338d9006"></a>flex</p> 821</td> 822<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p167303762818"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p167303762818"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p167303762818"></a>No</p> 823</td> 824<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p23704018414"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p23704018414"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p23704018414"></a>How and whether to display the box containing an element. Available values are as follows:</p> 825<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul12227103394916"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul12227103394916"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul12227103394916"><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b57468289377"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b57468289377"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b57468289377"></a>flex</strong>: flexible layout</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b18887133293920"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b18887133293920"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b18887133293920"></a>none</strong>: The element is hidden.</li></ul> 826</td> 827</tr> 828<tr id="en-us_topic_0000001058670742_row194503380541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"></a>visibility</p> 829</td> 830<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p15475737486"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p15475737486"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p15475737486"></a>string</p> 831<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"></a></p> 832</td> 833<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a>visible</p> 834</td> 835<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p57301471281"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p57301471281"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p57301471281"></a>No</p> 836</td> 837<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1568839154517"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1568839154517"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1568839154517"></a>Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b15844103015378"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b15844103015378"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b15844103015378"></a>display</strong> attribute to <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b4845153013712"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b4845153013712"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b4845153013712"></a>none</strong>.) Available values are as follows:</p> 838<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul751984164920"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul751984164920"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul751984164920"><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b17429331133711"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b17429331133711"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b17429331133711"></a>visible</strong>: The element is visible.</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b109191231193710"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b109191231193710"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b109191231193710"></a>hidden</strong>: The element is hidden but still takes up space.</li></ul> 839<div class="note" id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note4549524649"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note4549524649"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note4549524649"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p25499241642"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p25499241642"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p25499241642"></a>If both <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b719810016405"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b719810016405"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b719810016405"></a>visibility</strong> and <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b187052264018"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b187052264018"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b187052264018"></a>display</strong> are set, only <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b107788924011"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b107788924011"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b107788924011"></a>display</strong> takes effect.</p> 840</div></div> 841</td> 842</tr> 843<tr id="en-us_topic_0000001058670742_row13450113811544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ad74a6a48aca7439e9344c18c26b4177e"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ad74a6a48aca7439e9344c18c26b4177e"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ad74a6a48aca7439e9344c18c26b4177e"></a>flex</p> 844</td> 845<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2e6e5192a1534872be5fcfd9f83e3fdc"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2e6e5192a1534872be5fcfd9f83e3fdc"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2e6e5192a1534872be5fcfd9f83e3fdc"></a>-</p> 846</td> 847<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8512eda38e25410685be8a8992890257"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8512eda38e25410685be8a8992890257"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a8512eda38e25410685be8a8992890257"></a>-</p> 848</td> 849<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1373057132812"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1373057132812"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1373057132812"></a>No</p> 850</td> 851<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a11c317cdfa7d4066878d86c6b3bcbd82"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a11c317cdfa7d4066878d86c6b3bcbd82"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a11c317cdfa7d4066878d86c6b3bcbd82"></a>How to divide available space of the parent component for a child component.</p> 852<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p6968144051814"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p6968144051814"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p6968144051814"></a>You can set one, two<sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup894453017315"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup894453017315"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup894453017315"></a>5+</sup>, or three<sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup1255142393114"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup1255142393114"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup1255142393114"></a>5+</sup> values for this style.</p> 853<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p16733313171911"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p16733313171911"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p16733313171911"></a>Set one value in either of the following ways:</p> 854<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul93371539192211"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul93371539192211"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul93371539192211"><li>A unitless number to set <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b152581117781"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b152581117781"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b152581117781"></a>flex-grow</strong>.</li><li>A valid width value<sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup133014373318"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup133014373318"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup133014373318"></a>5+</sup> to set <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b182101331199"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b182101331199"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b182101331199"></a>flex-basis</strong>.</li></ul> 855<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p6786171632018"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p6786171632018"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p6786171632018"></a>Set two values<sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup39514502313"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup39514502313"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup39514502313"></a>5+</sup> in the following ways:</p> 856<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p6400429122011"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p6400429122011"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p6400429122011"></a>The first value must be a unitless number used to set <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b171516283129"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b171516283129"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b171516283129"></a>flex-grow</strong>. The second value must be either of the following:</p> 857<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul767043502219"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul767043502219"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul767043502219"><li>A unitless number to set <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1428375141313"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1428375141313"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1428375141313"></a>flex-shrink</strong>.</li><li>A valid width value to set <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1632495651416"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1632495651416"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1632495651416"></a>flex-basis</strong>.</li></ul> 858<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p748416351217"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p748416351217"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p748416351217"></a>Set three values<sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup168671312151514"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup168671312151514"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup168671312151514"></a>5+</sup> in the following ways:</p> 859<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p7373204832111"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p7373204832111"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p7373204832111"></a>The first value must be a unitless number used to set <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b19419131221612"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b19419131221612"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b19419131221612"></a>flex-grow</strong>. The second value must be a unitless number used to set <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b19378733181612"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b19378733181612"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b19378733181612"></a>flex-shrink</strong>. The third value must be a valid width value used to set <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b47717118176"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b47717118176"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b47717118176"></a>flex-basis</strong>.</p> 860<div class="note" id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note34891253201520"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note34891253201520"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note34891253201520"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1248915538152"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1248915538152"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1248915538152"></a>This style takes effect only when the container is any of the following components: <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b17156153131"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b17156153131"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b17156153131"></a><div></strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1201415151311"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1201415151311"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1201415151311"></a><list-item></strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b72031515132"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b72031515132"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b72031515132"></a><refresh></strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1920131551310"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1920131551310"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1920131551310"></a><stepper-item></strong><sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup17201815121317"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup17201815121317"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup17201815121317"></a>5+</sup>, and <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b2211915121313"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b2211915121313"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b2211915121313"></a><tabs></strong>.</p> 861</div></div> 862</td> 863</tr> 864<tr id="en-us_topic_0000001058670742_row13450138205418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a5d88cacaaf5c4f6a87390ab916b695c6"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a5d88cacaaf5c4f6a87390ab916b695c6"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a5d88cacaaf5c4f6a87390ab916b695c6"></a>flex-grow</p> 865</td> 866<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2c379e3af283446da446f1631e572efd"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2c379e3af283446da446f1631e572efd"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2c379e3af283446da446f1631e572efd"></a>number</p> 867</td> 868<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aa374f6c7415a4ee48a06930d76c55be7"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aa374f6c7415a4ee48a06930d76c55be7"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_aa374f6c7415a4ee48a06930d76c55be7"></a>0</p> 869</td> 870<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p81768178466"><a name="en-us_topic_0000001058670742_p81768178466"></a><a name="en-us_topic_0000001058670742_p81768178466"></a>No</p> 871</td> 872<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p4437122419557"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p4437122419557"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p4437122419557"></a>How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1682343583716"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1682343583716"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1682343583716"></a>0</strong> indicates that the child component does not grow.</p> 873<div class="note" id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note201231734212"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note201231734212"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note201231734212"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p184555314553"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p184555314553"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p184555314553"></a>This style takes effect only when the container is any of the following components: <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b18575165615499"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b18575165615499"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b18575165615499"></a><div></strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b8575165618495"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b8575165618495"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b8575165618495"></a><list-item></strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b125751756164917"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b125751756164917"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b125751756164917"></a><refresh></strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b15751456104920"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b15751456104920"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b15751456104920"></a><stepper-item></strong><sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup257595611492"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup257595611492"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup257595611492"></a>5+</sup>, and <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b55761856114912"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b55761856114912"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b55761856114912"></a><tabs></strong>.</p> 874</div></div> 875</td> 876</tr> 877<tr id="en-us_topic_0000001058670742_row845016384549"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ac65ef7e2b1f24a13b09c495f643168c9"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ac65ef7e2b1f24a13b09c495f643168c9"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ac65ef7e2b1f24a13b09c495f643168c9"></a>flex-shrink</p> 878</td> 879<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a98e7d367f0e649699892ae5bad6ade37"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a98e7d367f0e649699892ae5bad6ade37"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a98e7d367f0e649699892ae5bad6ade37"></a>number</p> 880</td> 881<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a422d978368814d12a33201cb839060ee"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a422d978368814d12a33201cb839060ee"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a422d978368814d12a33201cb839060ee"></a>1</p> 882</td> 883<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p1917613178465"><a name="en-us_topic_0000001058670742_p1917613178465"></a><a name="en-us_topic_0000001058670742_p1917613178465"></a>No</p> 884</td> 885<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ab032342dfe56460ca742800de482ca0f"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ab032342dfe56460ca742800de482ca0f"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ab032342dfe56460ca742800de482ca0f"></a>How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b783242395"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b783242395"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b783242395"></a>0</strong> indicates that the child component does not shrink.</p> 886<div class="note" id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note147160917217"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note147160917217"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note147160917217"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p844914328577"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p844914328577"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p844914328577"></a>This style takes effect only when the container is any of the following components: <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1168212543127"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1168212543127"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1168212543127"></a><div></strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b76821454121211"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b76821454121211"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b76821454121211"></a><list-item></strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1168255411126"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1168255411126"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1168255411126"></a><refresh></strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b10682155415120"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b10682155415120"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b10682155415120"></a><stepper-item></strong><sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup10683145491215"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup10683145491215"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup10683145491215"></a>5+</sup>, and <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1868385461211"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1868385461211"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1868385461211"></a><tabs></strong>.</p> 887</div></div> 888</td> 889</tr> 890<tr id="en-us_topic_0000001058670742_row144511738195411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a82c323a994634032963169eeee1a55e4"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a82c323a994634032963169eeee1a55e4"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a82c323a994634032963169eeee1a55e4"></a>flex-basis</p> 891</td> 892<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1148910787"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1148910787"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1148910787"></a><length></p> 893<p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a43613cf0c2184c0d8b44e8d292f6edb7"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a43613cf0c2184c0d8b44e8d292f6edb7"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a43613cf0c2184c0d8b44e8d292f6edb7"></a></p> 894</td> 895<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ab9e1c7dc25f840e58993af05c1d32109"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ab9e1c7dc25f840e58993af05c1d32109"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ab9e1c7dc25f840e58993af05c1d32109"></a>-</p> 896</td> 897<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_p0176817154612"><a name="en-us_topic_0000001058670742_p0176817154612"></a><a name="en-us_topic_0000001058670742_p0176817154612"></a>No</p> 898</td> 899<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a0993ef9b0ef64785a76e6310dd834f09"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a0993ef9b0ef64785a76e6310dd834f09"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a0993ef9b0ef64785a76e6310dd834f09"></a>Initial length of the flex item on the main axis.</p> 900<div class="note" id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note62848141222"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note62848141222"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note62848141222"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p16711745115718"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p16711745115718"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p16711745115718"></a>This style takes effect only when the container is any of the following components: <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b18795155631219"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b18795155631219"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b18795155631219"></a><div></strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b107951056121217"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b107951056121217"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b107951056121217"></a><list-item></strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b2795105619128"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b2795105619128"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b2795105619128"></a><refresh></strong>, <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1579510564126"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1579510564126"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1579510564126"></a><stepper-item></strong><sup id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup187953565122"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup187953565122"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_sup187953565122"></a>5+</sup>, and <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b11796456201211"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b11796456201211"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b11796456201211"></a><tabs></strong>.</p> 901</div></div> 902</td> 903</tr> 904<tr id="en-us_topic_0000001058670742_row184519384544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a50180d720a374549ae72c848e53320cb"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a50180d720a374549ae72c848e53320cb"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a50180d720a374549ae72c848e53320cb"></a>position</p> 905</td> 906<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a63672ed9a4c040f7a6ec9c8089b79bb6"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a63672ed9a4c040f7a6ec9c8089b79bb6"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a63672ed9a4c040f7a6ec9c8089b79bb6"></a>string</p> 907</td> 908<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2666820c71eb420485e4d20e55b4eabe"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2666820c71eb420485e4d20e55b4eabe"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a2666820c71eb420485e4d20e55b4eabe"></a>relative</p> 909</td> 910<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1173107172814"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1173107172814"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1173107172814"></a>No</p> 911</td> 912<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ae28abf4e47a740efbd45a8f280577912"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ae28abf4e47a740efbd45a8f280577912"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ae28abf4e47a740efbd45a8f280577912"></a>Positioning type of an element. Dynamic changes are not supported.</p> 913<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul17185232185014"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul17185232185014"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul17185232185014"><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1894911155394"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1894911155394"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1894911155394"></a>fixed</strong>: The element is positioned related to the browser window.</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b823115152390"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b823115152390"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b823115152390"></a>absolute</strong>: The element is positioned absolutely to its parent element.</li><li><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b736151417395"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b736151417395"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b736151417395"></a>relative</strong>: The element is positioned relative to its normal position.</li></ul> 914<div class="note" id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note167617191219"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note167617191219"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_note167617191219"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1839092815101"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1839092815101"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1839092815101"></a>The <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b13941713133910"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b13941713133910"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b13941713133910"></a>absolute</strong> attribute takes effect only when the parent component is <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1099913173916"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1099913173916"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b1099913173916"></a><div></strong> or <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b181001413123919"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b181001413123919"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b181001413123919"></a><stack></strong>.</p> 915</div></div> 916</td> 917</tr> 918<tr id="en-us_topic_0000001058670742_row1545123811547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a70405cb9696b4329ac7625af93310018"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a70405cb9696b4329ac7625af93310018"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a70405cb9696b4329ac7625af93310018"></a>[left|top<span id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph14927143614712"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph14927143614712"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph14927143614712"></a>|right|bottom</span>]</p> 919</td> 920<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1849062221214"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1849062221214"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p1849062221214"></a><length></p> 921</td> 922<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a579ac7c03d1d46758ebaacd565d86ed3"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a579ac7c03d1d46758ebaacd565d86ed3"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a579ac7c03d1d46758ebaacd565d86ed3"></a>-</p> 923</td> 924<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p187314719288"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p187314719288"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_p187314719288"></a>No</p> 925</td> 926<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a9a662a62cd9b40eaa0cb9ca082b6d1c2"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a9a662a62cd9b40eaa0cb9ca082b6d1c2"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_a9a662a62cd9b40eaa0cb9ca082b6d1c2"></a><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b481348173914"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b481348173914"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b481348173914"></a>left|top</strong><span id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph4818118173914"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph4818118173914"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ph4818118173914"></a><strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b68143833912"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b68143833912"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b68143833912"></a>|right|bottom</strong></span> must be used together with <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b881916818394"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b881916818394"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b881916818394"></a>position</strong> to determine the offset position of an element.</p> 927<a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul12671003525"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul12671003525"></a><ul id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_ul12671003525"><li>The <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b885117712398"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b885117712398"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b885117712398"></a>left</strong> attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.</li><li>The <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b65591759395"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b65591759395"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b65591759395"></a>top</strong> attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.</li><li>The <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b179013323910"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b179013323910"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b179013323910"></a>right</strong> attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element. </li><li>The <strong id="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b77091602397"><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b77091602397"></a><a name="en-us_topic_0000001058670742_en-us_topic_0000001059340528_b77091602397"></a>bottom</strong> attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. </li></ul> 928</td> 929</tr> 930</tbody> 931</table> 932 933## Method <a name="en-us_topic_0000001058670742_section47669296127"></a> 934 935<a name="en-us_topic_0000001058670742_t0c307a0cf3734cb28f3adf6af246a486"></a> 936<table><thead align="left"><tr id="en-us_topic_0000001058670742_r83b0c5b4f4b54874b1b3d7a36bcfa36b"><th class="cellrowborder" valign="top" width="14.09%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058670742_af4002018158a424c9fe9ad1a0e8a395f"><a name="en-us_topic_0000001058670742_af4002018158a424c9fe9ad1a0e8a395f"></a><a name="en-us_topic_0000001058670742_af4002018158a424c9fe9ad1a0e8a395f"></a>Name</p> 937</th> 938<th class="cellrowborder" valign="top" width="34.910000000000004%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058670742_a08987b2b1bc34babb92dd601235b0e24"><a name="en-us_topic_0000001058670742_a08987b2b1bc34babb92dd601235b0e24"></a><a name="en-us_topic_0000001058670742_a08987b2b1bc34babb92dd601235b0e24"></a>Parameter</p> 939</th> 940<th class="cellrowborder" valign="top" width="51%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058670742_a5e3e3d76323a4ebe96e1bdb1d1c338eb"><a name="en-us_topic_0000001058670742_a5e3e3d76323a4ebe96e1bdb1d1c338eb"></a><a name="en-us_topic_0000001058670742_a5e3e3d76323a4ebe96e1bdb1d1c338eb"></a>Description</p> 941</th> 942</tr> 943</thead> 944<tbody><tr id="en-us_topic_0000001058670742_r6eb16143d32645c2ae58f1e4857b0d99"><td class="cellrowborder" valign="top" width="14.09%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_a16f9fd69364541c3bf57f9b2305ba51f"><a name="en-us_topic_0000001058670742_a16f9fd69364541c3bf57f9b2305ba51f"></a><a name="en-us_topic_0000001058670742_a16f9fd69364541c3bf57f9b2305ba51f"></a>scrollTo</p> 945</td> 946<td class="cellrowborder" valign="top" width="34.910000000000004%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_abfb4febc1ae4429b8f593e96c50c9bc7"><a name="en-us_topic_0000001058670742_abfb4febc1ae4429b8f593e96c50c9bc7"></a><a name="en-us_topic_0000001058670742_abfb4febc1ae4429b8f593e96c50c9bc7"></a>{ index: number(specified position) }</p> 947</td> 948<td class="cellrowborder" valign="top" width="51%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_a75c53230ef704966b5b25d2e2606584f"><a name="en-us_topic_0000001058670742_a75c53230ef704966b5b25d2e2606584f"></a><a name="en-us_topic_0000001058670742_a75c53230ef704966b5b25d2e2606584f"></a>Scrolls the list to the position of the item at the specified index.</p> 949</td> 950</tr> 951<tr id="en-us_topic_0000001058670742_row10674141618528"><td class="cellrowborder" valign="top" width="14.09%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p1166501614521"><a name="en-us_topic_0000001058670742_p1166501614521"></a><a name="en-us_topic_0000001058670742_p1166501614521"></a>scrollTop</p> 952</td> 953<td class="cellrowborder" valign="top" width="34.910000000000004%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p13665201655211"><a name="en-us_topic_0000001058670742_p13665201655211"></a><a name="en-us_topic_0000001058670742_p13665201655211"></a>{ smooth: boolean }</p> 954</td> 955<td class="cellrowborder" valign="top" width="51%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p1466520168521"><a name="en-us_topic_0000001058670742_p1466520168521"></a><a name="en-us_topic_0000001058670742_p1466520168521"></a>If <strong id="en-us_topic_0000001058670742_b984720142292"><a name="en-us_topic_0000001058670742_b984720142292"></a><a name="en-us_topic_0000001058670742_b984720142292"></a>smooth</strong> is set to <strong id="en-us_topic_0000001058670742_b2026210453280"><a name="en-us_topic_0000001058670742_b2026210453280"></a><a name="en-us_topic_0000001058670742_b2026210453280"></a>false</strong> (default value), the list is directly scrolled to the top.</p> 956<p id="en-us_topic_0000001058670742_p1166519160524"><a name="en-us_topic_0000001058670742_p1166519160524"></a><a name="en-us_topic_0000001058670742_p1166519160524"></a>If <strong id="en-us_topic_0000001058670742_b3593012162913"><a name="en-us_topic_0000001058670742_b3593012162913"></a><a name="en-us_topic_0000001058670742_b3593012162913"></a>smooth</strong> is set to <strong id="en-us_topic_0000001058670742_b1085141612919"><a name="en-us_topic_0000001058670742_b1085141612919"></a><a name="en-us_topic_0000001058670742_b1085141612919"></a>true</strong>, the list is smoothly scrolled to the top.</p> 957</td> 958</tr> 959<tr id="en-us_topic_0000001058670742_row1067461665217"><td class="cellrowborder" valign="top" width="14.09%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p96651616195214"><a name="en-us_topic_0000001058670742_p96651616195214"></a><a name="en-us_topic_0000001058670742_p96651616195214"></a>scrollBottom</p> 960</td> 961<td class="cellrowborder" valign="top" width="34.910000000000004%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p566501617522"><a name="en-us_topic_0000001058670742_p566501617522"></a><a name="en-us_topic_0000001058670742_p566501617522"></a>{ smooth: boolean }</p> 962</td> 963<td class="cellrowborder" valign="top" width="51%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p1966571635219"><a name="en-us_topic_0000001058670742_p1966571635219"></a><a name="en-us_topic_0000001058670742_p1966571635219"></a>If <strong id="en-us_topic_0000001058670742_b1850718335307"><a name="en-us_topic_0000001058670742_b1850718335307"></a><a name="en-us_topic_0000001058670742_b1850718335307"></a>smooth</strong> is set to <strong id="en-us_topic_0000001058670742_b155131133173012"><a name="en-us_topic_0000001058670742_b155131133173012"></a><a name="en-us_topic_0000001058670742_b155131133173012"></a>false</strong> (default value), the list is directly scrolled to the bottom.</p> 964<p id="en-us_topic_0000001058670742_p1566513161529"><a name="en-us_topic_0000001058670742_p1566513161529"></a><a name="en-us_topic_0000001058670742_p1566513161529"></a>If <strong id="en-us_topic_0000001058670742_b92856582554"><a name="en-us_topic_0000001058670742_b92856582554"></a><a name="en-us_topic_0000001058670742_b92856582554"></a>smooth</strong> is set to <strong id="en-us_topic_0000001058670742_b1285858195517"><a name="en-us_topic_0000001058670742_b1285858195517"></a><a name="en-us_topic_0000001058670742_b1285858195517"></a>true</strong>, the list is smoothly scrolled to the bottom.</p> 965</td> 966</tr> 967<tr id="en-us_topic_0000001058670742_row667481665218"><td class="cellrowborder" valign="top" width="14.09%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p966520161520"><a name="en-us_topic_0000001058670742_p966520161520"></a><a name="en-us_topic_0000001058670742_p966520161520"></a>scrollPage</p> 968</td> 969<td class="cellrowborder" valign="top" width="34.910000000000004%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p1166551610522"><a name="en-us_topic_0000001058670742_p1166551610522"></a><a name="en-us_topic_0000001058670742_p1166551610522"></a>{ reverse: boolean, smooth: boolean }</p> 970</td> 971<td class="cellrowborder" valign="top" width="51%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p156651016205211"><a name="en-us_topic_0000001058670742_p156651016205211"></a><a name="en-us_topic_0000001058670742_p156651016205211"></a>If <strong id="en-us_topic_0000001058670742_b4550185811294"><a name="en-us_topic_0000001058670742_b4550185811294"></a><a name="en-us_topic_0000001058670742_b4550185811294"></a>reverse</strong> is set to <strong id="en-us_topic_0000001058670742_b117247306"><a name="en-us_topic_0000001058670742_b117247306"></a><a name="en-us_topic_0000001058670742_b117247306"></a>false</strong> (default value), the next page is displayed. If there is no next page, the list scrolls to the bottom.</p> 972<p id="en-us_topic_0000001058670742_p11665141617522"><a name="en-us_topic_0000001058670742_p11665141617522"></a><a name="en-us_topic_0000001058670742_p11665141617522"></a>If <strong id="en-us_topic_0000001058670742_b930919101316"><a name="en-us_topic_0000001058670742_b930919101316"></a><a name="en-us_topic_0000001058670742_b930919101316"></a>reverse</strong> is set to <strong id="en-us_topic_0000001058670742_b143091510103117"><a name="en-us_topic_0000001058670742_b143091510103117"></a><a name="en-us_topic_0000001058670742_b143091510103117"></a>true</strong>, the previous page is displayed. If there is no previous page, the list scrolls to the top.</p> 973<p id="en-us_topic_0000001058670742_p466513161522"><a name="en-us_topic_0000001058670742_p466513161522"></a><a name="en-us_topic_0000001058670742_p466513161522"></a>If <strong id="en-us_topic_0000001058670742_b21022056123111"><a name="en-us_topic_0000001058670742_b21022056123111"></a><a name="en-us_topic_0000001058670742_b21022056123111"></a>smooth</strong> is set to <strong id="en-us_topic_0000001058670742_b16107155643115"><a name="en-us_topic_0000001058670742_b16107155643115"></a><a name="en-us_topic_0000001058670742_b16107155643115"></a>false</strong> (default value), the list is directly scrolled to another page.</p> 974<p id="en-us_topic_0000001058670742_p5665131615528"><a name="en-us_topic_0000001058670742_p5665131615528"></a><a name="en-us_topic_0000001058670742_p5665131615528"></a>If <strong id="en-us_topic_0000001058670742_b115833242327"><a name="en-us_topic_0000001058670742_b115833242327"></a><a name="en-us_topic_0000001058670742_b115833242327"></a>smooth</strong> is set to <strong id="en-us_topic_0000001058670742_b1058832493214"><a name="en-us_topic_0000001058670742_b1058832493214"></a><a name="en-us_topic_0000001058670742_b1058832493214"></a>true</strong>, the list is smoothly scrolled to another page.</p> 975</td> 976</tr> 977<tr id="en-us_topic_0000001058670742_row13674616205216"><td class="cellrowborder" valign="top" width="14.09%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p176652164528"><a name="en-us_topic_0000001058670742_p176652164528"></a><a name="en-us_topic_0000001058670742_p176652164528"></a>scrollArrow</p> 978</td> 979<td class="cellrowborder" valign="top" width="34.910000000000004%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p166513161529"><a name="en-us_topic_0000001058670742_p166513161529"></a><a name="en-us_topic_0000001058670742_p166513161529"></a>{ reverse: boolean, smooth: boolean }</p> 980</td> 981<td class="cellrowborder" valign="top" width="51%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p1966551617521"><a name="en-us_topic_0000001058670742_p1966551617521"></a><a name="en-us_topic_0000001058670742_p1966551617521"></a>If <strong id="en-us_topic_0000001058670742_b1549291018335"><a name="en-us_topic_0000001058670742_b1549291018335"></a><a name="en-us_topic_0000001058670742_b1549291018335"></a>reverse</strong> is set to <strong id="en-us_topic_0000001058670742_b20492111023311"><a name="en-us_topic_0000001058670742_b20492111023311"></a><a name="en-us_topic_0000001058670742_b20492111023311"></a>false</strong> (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom.</p> 982<p id="en-us_topic_0000001058670742_p266511168524"><a name="en-us_topic_0000001058670742_p266511168524"></a><a name="en-us_topic_0000001058670742_p266511168524"></a>If <strong id="en-us_topic_0000001058670742_b5940743113413"><a name="en-us_topic_0000001058670742_b5940743113413"></a><a name="en-us_topic_0000001058670742_b5940743113413"></a>reverse</strong> is set to <strong id="en-us_topic_0000001058670742_b5940243133413"><a name="en-us_topic_0000001058670742_b5940243133413"></a><a name="en-us_topic_0000001058670742_b5940243133413"></a>true</strong>, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top.</p> 983<p id="en-us_topic_0000001058670742_p466510161529"><a name="en-us_topic_0000001058670742_p466510161529"></a><a name="en-us_topic_0000001058670742_p466510161529"></a>If <strong id="en-us_topic_0000001058670742_b3360148173519"><a name="en-us_topic_0000001058670742_b3360148173519"></a><a name="en-us_topic_0000001058670742_b3360148173519"></a>smooth</strong> is set to <strong id="en-us_topic_0000001058670742_b436188123520"><a name="en-us_topic_0000001058670742_b436188123520"></a><a name="en-us_topic_0000001058670742_b436188123520"></a>false</strong> (default value), the list is directly scrolled.</p> 984<p id="en-us_topic_0000001058670742_p966561612526"><a name="en-us_topic_0000001058670742_p966561612526"></a><a name="en-us_topic_0000001058670742_p966561612526"></a>If <strong id="en-us_topic_0000001058670742_b914072419593"><a name="en-us_topic_0000001058670742_b914072419593"></a><a name="en-us_topic_0000001058670742_b914072419593"></a>smooth</strong> is set to <strong id="en-us_topic_0000001058670742_b5146224175917"><a name="en-us_topic_0000001058670742_b5146224175917"></a><a name="en-us_topic_0000001058670742_b5146224175917"></a>true</strong>, the list is smoothly scrolled.</p> 985</td> 986</tr> 987<tr id="en-us_topic_0000001058670742_row146741516135215"><td class="cellrowborder" valign="top" width="14.09%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p16666161613523"><a name="en-us_topic_0000001058670742_p16666161613523"></a><a name="en-us_topic_0000001058670742_p16666161613523"></a>collapseGroup</p> 988</td> 989<td class="cellrowborder" valign="top" width="34.910000000000004%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p466641685216"><a name="en-us_topic_0000001058670742_p466641685216"></a><a name="en-us_topic_0000001058670742_p466641685216"></a>{ groupid: string }</p> 990</td> 991<td class="cellrowborder" valign="top" width="51%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p206661165523"><a name="en-us_topic_0000001058670742_p206661165523"></a><a name="en-us_topic_0000001058670742_p206661165523"></a>Collapses a group.</p> 992<p id="en-us_topic_0000001058670742_p15666516205215"><a name="en-us_topic_0000001058670742_p15666516205215"></a><a name="en-us_topic_0000001058670742_p15666516205215"></a><strong id="en-us_topic_0000001058670742_b15480175617355"><a name="en-us_topic_0000001058670742_b15480175617355"></a><a name="en-us_topic_0000001058670742_b15480175617355"></a>groupid</strong>: ID of the group to collapse.</p> 993<p id="en-us_topic_0000001058670742_p1566613167526"><a name="en-us_topic_0000001058670742_p1566613167526"></a><a name="en-us_topic_0000001058670742_p1566613167526"></a>All groups are collapsed when <strong id="en-us_topic_0000001058670742_b717013733612"><a name="en-us_topic_0000001058670742_b717013733612"></a><a name="en-us_topic_0000001058670742_b717013733612"></a>groupid</strong> is not specified.</p> 994</td> 995</tr> 996<tr id="en-us_topic_0000001058670742_row2674171665212"><td class="cellrowborder" valign="top" width="14.09%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p16666716155214"><a name="en-us_topic_0000001058670742_p16666716155214"></a><a name="en-us_topic_0000001058670742_p16666716155214"></a>expandGroup</p> 997</td> 998<td class="cellrowborder" valign="top" width="34.910000000000004%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p1466681665219"><a name="en-us_topic_0000001058670742_p1466681665219"></a><a name="en-us_topic_0000001058670742_p1466681665219"></a>{ groupid: string }</p> 999</td> 1000<td class="cellrowborder" valign="top" width="51%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p11666816135210"><a name="en-us_topic_0000001058670742_p11666816135210"></a><a name="en-us_topic_0000001058670742_p11666816135210"></a>Expands a group.</p> 1001<p id="en-us_topic_0000001058670742_p1766615169528"><a name="en-us_topic_0000001058670742_p1766615169528"></a><a name="en-us_topic_0000001058670742_p1766615169528"></a><strong id="en-us_topic_0000001058670742_b15511066374"><a name="en-us_topic_0000001058670742_b15511066374"></a><a name="en-us_topic_0000001058670742_b15511066374"></a>groupid</strong>: ID of the group to expand.</p> 1002<p id="en-us_topic_0000001058670742_p1766616164528"><a name="en-us_topic_0000001058670742_p1766616164528"></a><a name="en-us_topic_0000001058670742_p1766616164528"></a>All groups are expanded when <strong id="en-us_topic_0000001058670742_b692019124376"><a name="en-us_topic_0000001058670742_b692019124376"></a><a name="en-us_topic_0000001058670742_b692019124376"></a>groupid</strong> is not specified.</p> 1003</td> 1004</tr> 1005<tr id="en-us_topic_0000001058670742_row9562194955312"><td class="cellrowborder" valign="top" width="14.09%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058670742_p4562174912536"><a name="en-us_topic_0000001058670742_p4562174912536"></a><a name="en-us_topic_0000001058670742_p4562174912536"></a>currentOffset</p> 1006</td> 1007<td class="cellrowborder" valign="top" width="34.910000000000004%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058670742_p5562449185318"><a name="en-us_topic_0000001058670742_p5562449185318"></a><a name="en-us_topic_0000001058670742_p5562449185318"></a>-</p> 1008</td> 1009<td class="cellrowborder" valign="top" width="51%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058670742_p8563144914534"><a name="en-us_topic_0000001058670742_p8563144914534"></a><a name="en-us_topic_0000001058670742_p8563144914534"></a>Returns the offset of the current scrolling. The return value type is <strong id="en-us_topic_0000001058670742_b619148183811"><a name="en-us_topic_0000001058670742_b619148183811"></a><a name="en-us_topic_0000001058670742_b619148183811"></a>Object</strong>. For details, see <a href="#en-us_topic_0000001058670742_table1145513617576">Table 2</a>.</p> 1010</td> 1011</tr> 1012</tbody> 1013</table> 1014 1015**Table 1** ListScrollByOptions 1016 1017<a name="en-us_topic_0000001058670742_t54327f53ea104788bc430b9047ecb47b"></a> 1018<table><thead align="left"><tr id="en-us_topic_0000001058670742_r6bc769560d884ebca11d7ef155cfc00c"><th class="cellrowborder" valign="top" width="12.000000000000002%" id="mcps1.2.6.1.1"><p id="en-us_topic_0000001058670742_a2b340d5b063045f9b972339877932f7d"><a name="en-us_topic_0000001058670742_a2b340d5b063045f9b972339877932f7d"></a><a name="en-us_topic_0000001058670742_a2b340d5b063045f9b972339877932f7d"></a>Name</p> 1019</th> 1020<th class="cellrowborder" valign="top" width="22.000000000000004%" id="mcps1.2.6.1.2"><p id="en-us_topic_0000001058670742_a9710da1e083c4c4980317ab1772446a1"><a name="en-us_topic_0000001058670742_a9710da1e083c4c4980317ab1772446a1"></a><a name="en-us_topic_0000001058670742_a9710da1e083c4c4980317ab1772446a1"></a>Type</p> 1021</th> 1022<th class="cellrowborder" valign="top" width="24.000000000000004%" id="mcps1.2.6.1.3"><p id="en-us_topic_0000001058670742_a273155109e9b41b1876c7b4944800ee4"><a name="en-us_topic_0000001058670742_a273155109e9b41b1876c7b4944800ee4"></a><a name="en-us_topic_0000001058670742_a273155109e9b41b1876c7b4944800ee4"></a>Mandatory/Optional</p> 1023</th> 1024<th class="cellrowborder" valign="top" width="21.000000000000004%" id="mcps1.2.6.1.4"><p id="en-us_topic_0000001058670742_ae31408099fa24514bac47cf09a9e7b1a"><a name="en-us_topic_0000001058670742_ae31408099fa24514bac47cf09a9e7b1a"></a><a name="en-us_topic_0000001058670742_ae31408099fa24514bac47cf09a9e7b1a"></a>Default Value</p> 1025</th> 1026<th class="cellrowborder" valign="top" width="21.000000000000004%" id="mcps1.2.6.1.5"><p id="en-us_topic_0000001058670742_a333063706a09429cbe9ac81130d2b6cc"><a name="en-us_topic_0000001058670742_a333063706a09429cbe9ac81130d2b6cc"></a><a name="en-us_topic_0000001058670742_a333063706a09429cbe9ac81130d2b6cc"></a>Remarks</p> 1027</th> 1028</tr> 1029</thead> 1030<tbody><tr id="en-us_topic_0000001058670742_r6d4c75c9670d49ada849ec9f6bef83dd"><td class="cellrowborder" valign="top" width="12.000000000000002%" headers="mcps1.2.6.1.1 "><p id="en-us_topic_0000001058670742_ac4d9ce9a62d9442cb65658878f44e018"><a name="en-us_topic_0000001058670742_ac4d9ce9a62d9442cb65658878f44e018"></a><a name="en-us_topic_0000001058670742_ac4d9ce9a62d9442cb65658878f44e018"></a>dx</p> 1031</td> 1032<td class="cellrowborder" valign="top" width="22.000000000000004%" headers="mcps1.2.6.1.2 "><p id="en-us_topic_0000001058670742_aa6b8f1f0155a4954aab3a9609cadaf3a"><a name="en-us_topic_0000001058670742_aa6b8f1f0155a4954aab3a9609cadaf3a"></a><a name="en-us_topic_0000001058670742_aa6b8f1f0155a4954aab3a9609cadaf3a"></a>number</p> 1033</td> 1034<td class="cellrowborder" valign="top" width="24.000000000000004%" headers="mcps1.2.6.1.3 "><p id="en-us_topic_0000001058670742_a95db84bc6a774d029883ad1abae2d022"><a name="en-us_topic_0000001058670742_a95db84bc6a774d029883ad1abae2d022"></a><a name="en-us_topic_0000001058670742_a95db84bc6a774d029883ad1abae2d022"></a>No</p> 1035</td> 1036<td class="cellrowborder" valign="top" width="21.000000000000004%" headers="mcps1.2.6.1.4 "><p id="en-us_topic_0000001058670742_aaa6df3c43c9b47bf81b339edcae98840"><a name="en-us_topic_0000001058670742_aaa6df3c43c9b47bf81b339edcae98840"></a><a name="en-us_topic_0000001058670742_aaa6df3c43c9b47bf81b339edcae98840"></a>0</p> 1037</td> 1038<td class="cellrowborder" valign="top" width="21.000000000000004%" headers="mcps1.2.6.1.5 "><p id="en-us_topic_0000001058670742_aaffe44e874d74b6297ea7841258cb941"><a name="en-us_topic_0000001058670742_aaffe44e874d74b6297ea7841258cb941"></a><a name="en-us_topic_0000001058670742_aaffe44e874d74b6297ea7841258cb941"></a>Offset for scrolling the list in the horizontal direction, in px.</p> 1039</td> 1040</tr> 1041<tr id="en-us_topic_0000001058670742_rf56d36eb7a184adc843f20b499344ed6"><td class="cellrowborder" valign="top" width="12.000000000000002%" headers="mcps1.2.6.1.1 "><p id="en-us_topic_0000001058670742_acb8223e7297d4dbfa243b4b974c92560"><a name="en-us_topic_0000001058670742_acb8223e7297d4dbfa243b4b974c92560"></a><a name="en-us_topic_0000001058670742_acb8223e7297d4dbfa243b4b974c92560"></a>dy</p> 1042</td> 1043<td class="cellrowborder" valign="top" width="22.000000000000004%" headers="mcps1.2.6.1.2 "><p id="en-us_topic_0000001058670742_aa88695593f93485a9b64158a7e05cda4"><a name="en-us_topic_0000001058670742_aa88695593f93485a9b64158a7e05cda4"></a><a name="en-us_topic_0000001058670742_aa88695593f93485a9b64158a7e05cda4"></a>number</p> 1044</td> 1045<td class="cellrowborder" valign="top" width="24.000000000000004%" headers="mcps1.2.6.1.3 "><p id="en-us_topic_0000001058670742_a08e26d1dfd3e406b849dfaa715b0e985"><a name="en-us_topic_0000001058670742_a08e26d1dfd3e406b849dfaa715b0e985"></a><a name="en-us_topic_0000001058670742_a08e26d1dfd3e406b849dfaa715b0e985"></a>No</p> 1046</td> 1047<td class="cellrowborder" valign="top" width="21.000000000000004%" headers="mcps1.2.6.1.4 "><p id="en-us_topic_0000001058670742_aede3e64e10724335b9297743fece7e4a"><a name="en-us_topic_0000001058670742_aede3e64e10724335b9297743fece7e4a"></a><a name="en-us_topic_0000001058670742_aede3e64e10724335b9297743fece7e4a"></a>0</p> 1048</td> 1049<td class="cellrowborder" valign="top" width="21.000000000000004%" headers="mcps1.2.6.1.5 "><p id="en-us_topic_0000001058670742_ade99317ad7354fee8e88ca282cf70446"><a name="en-us_topic_0000001058670742_ade99317ad7354fee8e88ca282cf70446"></a><a name="en-us_topic_0000001058670742_ade99317ad7354fee8e88ca282cf70446"></a>Offset for scrolling the list in the vertical direction, in px.</p> 1050</td> 1051</tr> 1052<tr id="en-us_topic_0000001058670742_r69d5b3d9c60a4a5ea242be132f754948"><td class="cellrowborder" valign="top" width="12.000000000000002%" headers="mcps1.2.6.1.1 "><p id="en-us_topic_0000001058670742_ae0636046822644c7b7a5289fbbcd53e6"><a name="en-us_topic_0000001058670742_ae0636046822644c7b7a5289fbbcd53e6"></a><a name="en-us_topic_0000001058670742_ae0636046822644c7b7a5289fbbcd53e6"></a>smooth</p> 1053</td> 1054<td class="cellrowborder" valign="top" width="22.000000000000004%" headers="mcps1.2.6.1.2 "><p id="en-us_topic_0000001058670742_a7d930786d83a4f9f92a4ba4e6cbb9db0"><a name="en-us_topic_0000001058670742_a7d930786d83a4f9f92a4ba4e6cbb9db0"></a><a name="en-us_topic_0000001058670742_a7d930786d83a4f9f92a4ba4e6cbb9db0"></a>boolean</p> 1055</td> 1056<td class="cellrowborder" valign="top" width="24.000000000000004%" headers="mcps1.2.6.1.3 "><p id="en-us_topic_0000001058670742_a643ff67584184620885e6ee1fddee8cb"><a name="en-us_topic_0000001058670742_a643ff67584184620885e6ee1fddee8cb"></a><a name="en-us_topic_0000001058670742_a643ff67584184620885e6ee1fddee8cb"></a>No</p> 1057</td> 1058<td class="cellrowborder" valign="top" width="21.000000000000004%" headers="mcps1.2.6.1.4 "><p id="en-us_topic_0000001058670742_ac86052e652c54edead6588ad0932a118"><a name="en-us_topic_0000001058670742_ac86052e652c54edead6588ad0932a118"></a><a name="en-us_topic_0000001058670742_ac86052e652c54edead6588ad0932a118"></a>true</p> 1059</td> 1060<td class="cellrowborder" valign="top" width="21.000000000000004%" headers="mcps1.2.6.1.5 "><p id="en-us_topic_0000001058670742_a1a8906b49d5e48f98a068f339df880e9"><a name="en-us_topic_0000001058670742_a1a8906b49d5e48f98a068f339df880e9"></a><a name="en-us_topic_0000001058670742_a1a8906b49d5e48f98a068f339df880e9"></a>Whether a sliding animation is displayed when the list position is changed.</p> 1061</td> 1062</tr> 1063</tbody> 1064</table> 1065 1066**Table 2** Attributes of the currentOffset return object 1067 1068<a name="en-us_topic_0000001058670742_table1145513617576"></a> 1069<table><thead align="left"><tr id="en-us_topic_0000001058670742_row1445543665717"><th class="cellrowborder" valign="top" width="21.82%" id="mcps1.2.4.1.1"><p id="en-us_topic_0000001058670742_p0455183695711"><a name="en-us_topic_0000001058670742_p0455183695711"></a><a name="en-us_topic_0000001058670742_p0455183695711"></a>Name</p> 1070</th> 1071<th class="cellrowborder" valign="top" width="40%" id="mcps1.2.4.1.2"><p id="en-us_topic_0000001058670742_p2045533685711"><a name="en-us_topic_0000001058670742_p2045533685711"></a><a name="en-us_topic_0000001058670742_p2045533685711"></a>Type</p> 1072</th> 1073<th class="cellrowborder" valign="top" width="38.18%" id="mcps1.2.4.1.3"><p id="en-us_topic_0000001058670742_p144557363572"><a name="en-us_topic_0000001058670742_p144557363572"></a><a name="en-us_topic_0000001058670742_p144557363572"></a>Remarks</p> 1074</th> 1075</tr> 1076</thead> 1077<tbody><tr id="en-us_topic_0000001058670742_row545516365576"><td class="cellrowborder" valign="top" width="21.82%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058670742_p6455136135712"><a name="en-us_topic_0000001058670742_p6455136135712"></a><a name="en-us_topic_0000001058670742_p6455136135712"></a>x</p> 1078</td> 1079<td class="cellrowborder" valign="top" width="40%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058670742_p14456113625711"><a name="en-us_topic_0000001058670742_p14456113625711"></a><a name="en-us_topic_0000001058670742_p14456113625711"></a>number</p> 1080</td> 1081<td class="cellrowborder" valign="top" width="38.18%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058670742_p19456436165717"><a name="en-us_topic_0000001058670742_p19456436165717"></a><a name="en-us_topic_0000001058670742_p19456436165717"></a>Scrolling offset in the x-axis, in px</p> 1082</td> 1083</tr> 1084<tr id="en-us_topic_0000001058670742_row134561936125711"><td class="cellrowborder" valign="top" width="21.82%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058670742_p194561736145714"><a name="en-us_topic_0000001058670742_p194561736145714"></a><a name="en-us_topic_0000001058670742_p194561736145714"></a>y</p> 1085</td> 1086<td class="cellrowborder" valign="top" width="40%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058670742_p1345612364579"><a name="en-us_topic_0000001058670742_p1345612364579"></a><a name="en-us_topic_0000001058670742_p1345612364579"></a>number</p> 1087</td> 1088<td class="cellrowborder" valign="top" width="38.18%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058670742_p1144122515599"><a name="en-us_topic_0000001058670742_p1144122515599"></a><a name="en-us_topic_0000001058670742_p1144122515599"></a>Scrolling offset in the y-axis, in px</p> 1089</td> 1090</tr> 1091</tbody> 1092</table> 1093 1094## Example<a name="en-us_topic_0000001058670742_section24931424488"></a> 1095 1096``` 1097<!-- index.hml --> 1098<div class="container"> 1099 <list class="todo-wraper"> 1100 <list-item for="{{todolist}}" class="todo-item"> 1101 <text class="todo-title">{{$item.title}}</text> 1102 <text class="todo-title">{{$item.date}}</text> 1103 </list-item> 1104 </list> 1105</div> 1106``` 1107 1108``` 1109// index.js 1110export default { 1111 data: { 1112 todolist: [{ 1113 title: 'Prepare for the interview', 1114 date: 'Dec 31, 2021 10:00:00', 1115 }, { 1116 title: 'Watch the movie', 1117 date: 'Dec 31, 2021 20:00:00', 1118 }], 1119 }, 1120} 1121``` 1122 1123``` 1124/* index.css */ 1125.container { 1126 display: flex; 1127 justify-content: center; 1128 align-items: center; 1129 left: 0px; 1130 top: 0px; 1131 width: 454px; 1132 height: 454px; 1133} 1134.todo-wraper { 1135 width: 454px; 1136 height: 300px; 1137} 1138.todo-item { 1139 width: 454px; 1140 height: 80px; 1141 flex-direction: column; 1142} 1143.todo-title { 1144 width: 454px; 1145 height: 40px; 1146 text-align: center; 1147} 1148``` 1149 1150 1151 1152
