1# swiper<a name="EN-US_TOPIC_0000001115814820"></a> 2 3- [Permission List](#en-us_topic_0000001058948921_section11257113618419) 4- [Child Component](#en-us_topic_0000001058948921_section9288143101012) 5- [Attribute](#en-us_topic_0000001058948921_section2907183951110) 6- [Event](#en-us_topic_0000001058948921_section5891352194417) 7- [Style](#en-us_topic_0000001058948921_section5775351116) 8- [Method](#en-us_topic_0000001058948921_section47669296127) 9- [Example](#en-us_topic_0000001058948921_section1933534232313) 10 11The **<swiper\>** component provides a container that allows users to switch among child components by swiping operations. 12 13## Permission List<a name="en-us_topic_0000001058948921_section11257113618419"></a> 14 15None 16 17## Child Component<a name="en-us_topic_0000001058948921_section9288143101012"></a> 18 19All child components except **<list\>** are supported. 20 21## Attribute<a name="en-us_topic_0000001058948921_section2907183951110"></a> 22 23<a name="en-us_topic_0000001058948921_table20633101642315"></a> 24<table><thead align="left"><tr id="en-us_topic_0000001058948921_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_p824610360217"><a name="en-us_topic_0000001058948921_p824610360217"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a>Description</p> 33</th> 34</tr> 35</thead> 36<tbody><tr id="en-us_topic_0000001058948921_row1319425616340"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p1892321283515"><a name="en-us_topic_0000001058948921_p1892321283515"></a><a name="en-us_topic_0000001058948921_p1892321283515"></a>index</p> 37</td> 38<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p59239126351"><a name="en-us_topic_0000001058948921_p59239126351"></a><a name="en-us_topic_0000001058948921_p59239126351"></a>number</p> 39</td> 40<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p492315120357"><a name="en-us_topic_0000001058948921_p492315120357"></a><a name="en-us_topic_0000001058948921_p492315120357"></a>0</p> 41</td> 42<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p8923141253518"><a name="en-us_topic_0000001058948921_p8923141253518"></a><a name="en-us_topic_0000001058948921_p8923141253518"></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_0000001058948921_p19923012153517"><a name="en-us_topic_0000001058948921_p19923012153517"></a><a name="en-us_topic_0000001058948921_p19923012153517"></a>Index of a child component currently displayed in the container.</p> 45</td> 46</tr> 47<tr id="en-us_topic_0000001058948921_row165481652113414"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p109230127357"><a name="en-us_topic_0000001058948921_p109230127357"></a><a name="en-us_topic_0000001058948921_p109230127357"></a>autoplay </p> 48</td> 49<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p6923151220359"><a name="en-us_topic_0000001058948921_p6923151220359"></a><a name="en-us_topic_0000001058948921_p6923151220359"></a>boolean</p> 50</td> 51<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p39241112163515"><a name="en-us_topic_0000001058948921_p39241112163515"></a><a name="en-us_topic_0000001058948921_p39241112163515"></a>false</p> 52</td> 53<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p19924912113514"><a name="en-us_topic_0000001058948921_p19924912113514"></a><a name="en-us_topic_0000001058948921_p19924912113514"></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_0000001058948921_p192451253512"><a name="en-us_topic_0000001058948921_p192451253512"></a><a name="en-us_topic_0000001058948921_p192451253512"></a>Whether to enable autoplay for child component switching. If this attribute is <strong id="en-us_topic_0000001058948921_b15681104972613"><a name="en-us_topic_0000001058948921_b15681104972613"></a><a name="en-us_topic_0000001058948921_b15681104972613"></a>true</strong>, the indicator does not take effect<sup id="en-us_topic_0000001058948921_sup285913711416"><a name="en-us_topic_0000001058948921_sup285913711416"></a><a name="en-us_topic_0000001058948921_sup285913711416"></a>5+</sup>.</p> 56</td> 57</tr> 58<tr id="en-us_topic_0000001058948921_row054835211347"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p592411211350"><a name="en-us_topic_0000001058948921_p592411211350"></a><a name="en-us_topic_0000001058948921_p592411211350"></a>interval </p> 59</td> 60<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p99243129357"><a name="en-us_topic_0000001058948921_p99243129357"></a><a name="en-us_topic_0000001058948921_p99243129357"></a>number</p> 61</td> 62<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p14924111218354"><a name="en-us_topic_0000001058948921_p14924111218354"></a><a name="en-us_topic_0000001058948921_p14924111218354"></a>3000</p> 63</td> 64<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p199241612143519"><a name="en-us_topic_0000001058948921_p199241612143519"></a><a name="en-us_topic_0000001058948921_p199241612143519"></a>No</p> 65</td> 66<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_p15924121219354"><a name="en-us_topic_0000001058948921_p15924121219354"></a><a name="en-us_topic_0000001058948921_p15924121219354"></a>Autoplay interval, in milliseconds, when autoplay is enabled.</p> 67</td> 68</tr> 69<tr id="en-us_topic_0000001058948921_row3548452123418"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p392419124357"><a name="en-us_topic_0000001058948921_p392419124357"></a><a name="en-us_topic_0000001058948921_p392419124357"></a>indicator </p> 70</td> 71<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p1992419126353"><a name="en-us_topic_0000001058948921_p1992419126353"></a><a name="en-us_topic_0000001058948921_p1992419126353"></a>boolean</p> 72</td> 73<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p129245120351"><a name="en-us_topic_0000001058948921_p129245120351"></a><a name="en-us_topic_0000001058948921_p129245120351"></a>true</p> 74</td> 75<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p39241412123514"><a name="en-us_topic_0000001058948921_p39241412123514"></a><a name="en-us_topic_0000001058948921_p39241412123514"></a>No</p> 76</td> 77<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_p139247126354"><a name="en-us_topic_0000001058948921_p139247126354"></a><a name="en-us_topic_0000001058948921_p139247126354"></a>Whether to enable the indicator. The default value is <strong id="en-us_topic_0000001058948921_b11169818165715"><a name="en-us_topic_0000001058948921_b11169818165715"></a><a name="en-us_topic_0000001058948921_b11169818165715"></a>true</strong>.</p> 78</td> 79</tr> 80<tr id="en-us_topic_0000001058948921_row2549452153416"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p11924181214359"><a name="en-us_topic_0000001058948921_p11924181214359"></a><a name="en-us_topic_0000001058948921_p11924181214359"></a>digital<sup id="en-us_topic_0000001058948921_sup862644131518"><a name="en-us_topic_0000001058948921_sup862644131518"></a><a name="en-us_topic_0000001058948921_sup862644131518"></a>5+</sup></p> 81</td> 82<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p992411203518"><a name="en-us_topic_0000001058948921_p992411203518"></a><a name="en-us_topic_0000001058948921_p992411203518"></a>boolean</p> 83</td> 84<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p99241312173519"><a name="en-us_topic_0000001058948921_p99241312173519"></a><a name="en-us_topic_0000001058948921_p99241312173519"></a>false</p> 85</td> 86<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p1692471216354"><a name="en-us_topic_0000001058948921_p1692471216354"></a><a name="en-us_topic_0000001058948921_p1692471216354"></a>No</p> 87</td> 88<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_p892412121355"><a name="en-us_topic_0000001058948921_p892412121355"></a><a name="en-us_topic_0000001058948921_p892412121355"></a>Whether to enable the digital indicator. The default value is <strong id="en-us_topic_0000001058948921_b186731053201012"><a name="en-us_topic_0000001058948921_b186731053201012"></a><a name="en-us_topic_0000001058948921_b186731053201012"></a>false</strong>.</p> 89<div class="note" id="en-us_topic_0000001058948921_note592581253511"><a name="en-us_topic_0000001058948921_note592581253511"></a><a name="en-us_topic_0000001058948921_note592581253511"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058948921_p1892581233520"><a name="en-us_topic_0000001058948921_p1892581233520"></a><a name="en-us_topic_0000001058948921_p1892581233520"></a>The digital indicator takes effect only when <strong id="en-us_topic_0000001058948921_b129911746141816"><a name="en-us_topic_0000001058948921_b129911746141816"></a><a name="en-us_topic_0000001058948921_b129911746141816"></a>indicator</strong> is set to <strong id="en-us_topic_0000001058948921_b1176765601811"><a name="en-us_topic_0000001058948921_b1176765601811"></a><a name="en-us_topic_0000001058948921_b1176765601811"></a>true</strong>.</p> 90</div></div> 91</td> 92</tr> 93<tr id="en-us_topic_0000001058948921_row18467181913175"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p104671419151719"><a name="en-us_topic_0000001058948921_p104671419151719"></a><a name="en-us_topic_0000001058948921_p104671419151719"></a>indicatordisabled<sup id="en-us_topic_0000001058948921_sup0227116141915"><a name="en-us_topic_0000001058948921_sup0227116141915"></a><a name="en-us_topic_0000001058948921_sup0227116141915"></a>5+</sup></p> 94</td> 95<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p64671319171712"><a name="en-us_topic_0000001058948921_p64671319171712"></a><a name="en-us_topic_0000001058948921_p64671319171712"></a>boolean</p> 96</td> 97<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p20467119161717"><a name="en-us_topic_0000001058948921_p20467119161717"></a><a name="en-us_topic_0000001058948921_p20467119161717"></a>false</p> 98</td> 99<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p11467519121712"><a name="en-us_topic_0000001058948921_p11467519121712"></a><a name="en-us_topic_0000001058948921_p11467519121712"></a>No</p> 100</td> 101<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_p12467101911179"><a name="en-us_topic_0000001058948921_p12467101911179"></a><a name="en-us_topic_0000001058948921_p12467101911179"></a>Whether gesture operations are disabled on the indicator. If this attribute is set to <strong id="en-us_topic_0000001058948921_b76131411183611"><a name="en-us_topic_0000001058948921_b76131411183611"></a><a name="en-us_topic_0000001058948921_b76131411183611"></a>true</strong>, the indicator does not respond to clicking or dragging operations.</p> 102</td> 103</tr> 104<tr id="en-us_topic_0000001058948921_row813404683416"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p29251112133511"><a name="en-us_topic_0000001058948921_p29251112133511"></a><a name="en-us_topic_0000001058948921_p29251112133511"></a>loop</p> 105</td> 106<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p59251129353"><a name="en-us_topic_0000001058948921_p59251129353"></a><a name="en-us_topic_0000001058948921_p59251129353"></a>boolean</p> 107</td> 108<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p1492511216359"><a name="en-us_topic_0000001058948921_p1492511216359"></a><a name="en-us_topic_0000001058948921_p1492511216359"></a>true</p> 109</td> 110<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p1925191217350"><a name="en-us_topic_0000001058948921_p1925191217350"></a><a name="en-us_topic_0000001058948921_p1925191217350"></a>No</p> 111</td> 112<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_p1492511233518"><a name="en-us_topic_0000001058948921_p1492511233518"></a><a name="en-us_topic_0000001058948921_p1492511233518"></a>Whether to enable looping.</p> 113</td> 114</tr> 115<tr id="en-us_topic_0000001058948921_row959023815340"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p18926141243510"><a name="en-us_topic_0000001058948921_p18926141243510"></a><a name="en-us_topic_0000001058948921_p18926141243510"></a>duration</p> 116</td> 117<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p1592618127351"><a name="en-us_topic_0000001058948921_p1592618127351"></a><a name="en-us_topic_0000001058948921_p1592618127351"></a>number</p> 118</td> 119<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p49269123351"><a name="en-us_topic_0000001058948921_p49269123351"></a><a name="en-us_topic_0000001058948921_p49269123351"></a>-</p> 120</td> 121<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p119261212183513"><a name="en-us_topic_0000001058948921_p119261212183513"></a><a name="en-us_topic_0000001058948921_p119261212183513"></a>No</p> 122</td> 123<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_p79261112123512"><a name="en-us_topic_0000001058948921_p79261112123512"></a><a name="en-us_topic_0000001058948921_p79261112123512"></a>Duration of the autoplay for child component switching.</p> 124</td> 125</tr> 126<tr id="en-us_topic_0000001058948921_row448465042919"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p1292671273516"><a name="en-us_topic_0000001058948921_p1292671273516"></a><a name="en-us_topic_0000001058948921_p1292671273516"></a>vertical</p> 127</td> 128<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p09261312133515"><a name="en-us_topic_0000001058948921_p09261312133515"></a><a name="en-us_topic_0000001058948921_p09261312133515"></a>boolean</p> 129</td> 130<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p6926191283518"><a name="en-us_topic_0000001058948921_p6926191283518"></a><a name="en-us_topic_0000001058948921_p6926191283518"></a>false</p> 131</td> 132<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p5926101223516"><a name="en-us_topic_0000001058948921_p5926101223516"></a><a name="en-us_topic_0000001058948921_p5926101223516"></a>No</p> 133</td> 134<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_p9926141215356"><a name="en-us_topic_0000001058948921_p9926141215356"></a><a name="en-us_topic_0000001058948921_p9926141215356"></a>Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator.</p> 135</td> 136</tr> 137<tr id="en-us_topic_0000001058948921_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a>id</p> 138</td> 139<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a>string</p> 140</td> 141<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a>-</p> 142</td> 143<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p42461736102118"><a name="en-us_topic_0000001058948921_p42461736102118"></a><a name="en-us_topic_0000001058948921_p42461736102118"></a>No</p> 144</td> 145<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a>Unique ID of a component.</p> 146</td> 147</tr> 148<tr id="en-us_topic_0000001058948921_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a>style</p> 149</td> 150<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a>string</p> 151</td> 152<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a>-</p> 153</td> 154<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p17246836142119"><a name="en-us_topic_0000001058948921_p17246836142119"></a><a name="en-us_topic_0000001058948921_p17246836142119"></a>No</p> 155</td> 156<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a>Style declaration of a component.</p> 157</td> 158</tr> 159<tr id="en-us_topic_0000001058948921_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a>class</p> 160</td> 161<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a>string</p> 162</td> 163<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a>-</p> 164</td> 165<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p324614367213"><a name="en-us_topic_0000001058948921_p324614367213"></a><a name="en-us_topic_0000001058948921_p324614367213"></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_0000001058948921_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a>Style class of a component, which is used to refer to a style table.</p> 168</td> 169</tr> 170<tr id="en-us_topic_0000001058948921_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_p1786251117156"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_p1786251117156"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_p1786251117156"></a>ref</p> 171</td> 172<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_p1086241119157"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_p1086241119157"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_p1086241119157"></a>string</p> 173</td> 174<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_p586281111151"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_p586281111151"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_p586281111151"></a>-</p> 175</td> 176<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p1624612362219"><a name="en-us_topic_0000001058948921_p1624612362219"></a><a name="en-us_topic_0000001058948921_p1624612362219"></a>No</p> 177</td> 178<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_p113416153342"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_p113416153342"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ph5815920163518"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ph5815920163518"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001058340523_b08212202354"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_b08212202354"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_b08212202354"></a>$refs</strong>.</p> 179</td> 180</tr> 181<tr id="en-us_topic_0000001058948921_row1863421642313"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a>disabled</p> 182</td> 183<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a>boolean</p> 184</td> 185<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a>false</p> 186</td> 187<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p192476368214"><a name="en-us_topic_0000001058948921_p192476368214"></a><a name="en-us_topic_0000001058948921_p192476368214"></a>No</p> 188</td> 189<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a>Whether a component is disabled. If it is disabled, it cannot respond to user interaction.</p> 190</td> 191</tr> 192<tr id="en-us_topic_0000001058948921_row1263451617236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a>data</p> 193</td> 194<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a>string</p> 195</td> 196<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a>-</p> 197</td> 198<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p22471736132114"><a name="en-us_topic_0000001058948921_p22471736132114"></a><a name="en-us_topic_0000001058948921_p22471736132114"></a>No</p> 199</td> 200<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a>Attribute set for a component to facilitate data storage and reading.</p> 201</td> 202</tr> 203</tbody> 204</table> 205 206## Event<a name="en-us_topic_0000001058948921_section5891352194417"></a> 207 208<a name="en-us_topic_0000001058948921_table836435619510"></a> 209<table><thead align="left"><tr id="en-us_topic_0000001058948921_row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a>Name</p> 210</th> 211<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a>Parameter</p> 212</th> 213<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a>Triggered when</p> 214</th> 215</tr> 216</thead> 217<tbody><tr id="en-us_topic_0000001058948921_row135881215451"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058948921_p2030252874519"><a name="en-us_topic_0000001058948921_p2030252874519"></a><a name="en-us_topic_0000001058948921_p2030252874519"></a>change</p> 218</td> 219<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058948921_p123024288459"><a name="en-us_topic_0000001058948921_p123024288459"></a><a name="en-us_topic_0000001058948921_p123024288459"></a>{ index: currentIndex }</p> 220</td> 221<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058948921_p4302728104511"><a name="en-us_topic_0000001058948921_p4302728104511"></a><a name="en-us_topic_0000001058948921_p4302728104511"></a>Triggered when the index of the currently displayed component changes.</p> 222</td> 223</tr> 224<tr id="en-us_topic_0000001058948921_row336512569516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a>touchstart</p> 225</td> 226<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 227</td> 228<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a>The tapping starts</p> 229</td> 230</tr> 231<tr id="en-us_topic_0000001058948921_row1236519563517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a>touchmove</p> 232</td> 233<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 234</td> 235<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a>The tapping moves</p> 236</td> 237</tr> 238<tr id="en-us_topic_0000001058948921_row18365145615516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a>touchcancel</p> 239</td> 240<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 241</td> 242<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a>The tapping is interrupted</p> 243</td> 244</tr> 245<tr id="en-us_topic_0000001058948921_row63651566517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a>touchend</p> 246</td> 247<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 248</td> 249<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a>The tapping ends</p> 250</td> 251</tr> 252<tr id="en-us_topic_0000001058948921_row1536575611516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a>click</p> 253</td> 254<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a>-</p> 255</td> 256<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a>A component is clicked</p> 257</td> 258</tr> 259<tr id="en-us_topic_0000001058948921_row183661256758"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a>longpress</p> 260</td> 261<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a>-</p> 262</td> 263<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a>A component is long pressed</p> 264</td> 265</tr> 266<tr id="en-us_topic_0000001058948921_row5366185613517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_p12706561061"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_p12706561061"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_p12706561061"></a>swipe<sup id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_sup35424382912"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_sup35424382912"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_sup35424382912"></a>5+</sup></p> 267</td> 268<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_p11711056161"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_p11711056161"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_p11711056161"></a><a href="universal-events.md#en-us_topic_0000001058460527_table111811577714">SwipeEvent</a></p> 269</td> 270<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001058460527_p2711556162"><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_p2711556162"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001058460527_p2711556162"></a>A user quickly swipes on a component.</p> 271</td> 272</tr> 273</tbody> 274</table> 275 276## Style<a name="en-us_topic_0000001058948921_section5775351116"></a> 277 278<a name="en-us_topic_0000001058948921_table7796143335310"></a> 279<table><thead align="left"><tr id="en-us_topic_0000001058948921_row6796933195312"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a>Name</p> 280</th> 281<th class="cellrowborder" valign="top" width="18.938106189381063%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a>Type</p> 282</th> 283<th class="cellrowborder" valign="top" width="10.408959104089591%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a>Default Value</p> 284</th> 285<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058948921_p0796123311536"><a name="en-us_topic_0000001058948921_p0796123311536"></a><a name="en-us_topic_0000001058948921_p0796123311536"></a>Mandatory</p> 286</th> 287<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a>Description</p> 288</th> 289</tr> 290</thead> 291<tbody><tr id="en-us_topic_0000001058948921_row13591102162420"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p1838294122420"><a name="en-us_topic_0000001058948921_p1838294122420"></a><a name="en-us_topic_0000001058948921_p1838294122420"></a>indicator-color</p> 292</td> 293<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p183831410244"><a name="en-us_topic_0000001058948921_p183831410244"></a><a name="en-us_topic_0000001058948921_p183831410244"></a><color></p> 294</td> 295<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p13830413248"><a name="en-us_topic_0000001058948921_p13830413248"></a><a name="en-us_topic_0000001058948921_p13830413248"></a>-</p> 296</td> 297<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p1338313412246"><a name="en-us_topic_0000001058948921_p1338313412246"></a><a name="en-us_topic_0000001058948921_p1338313412246"></a>No</p> 298</td> 299<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_p16383447248"><a name="en-us_topic_0000001058948921_p16383447248"></a><a name="en-us_topic_0000001058948921_p16383447248"></a>Fill color of the navigation point indicator.</p> 300</td> 301</tr> 302<tr id="en-us_topic_0000001058948921_row201291804245"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p1638316482416"><a name="en-us_topic_0000001058948921_p1638316482416"></a><a name="en-us_topic_0000001058948921_p1638316482416"></a>indicator-selected-color </p> 303</td> 304<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p1738316492413"><a name="en-us_topic_0000001058948921_p1738316492413"></a><a name="en-us_topic_0000001058948921_p1738316492413"></a><color></p> 305</td> 306<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p83836420249"><a name="en-us_topic_0000001058948921_p83836420249"></a><a name="en-us_topic_0000001058948921_p83836420249"></a>#ff007dff</p> 307</td> 308<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p1638310442410"><a name="en-us_topic_0000001058948921_p1638310442410"></a><a name="en-us_topic_0000001058948921_p1638310442410"></a>No</p> 309</td> 310<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_p13383144122414"><a name="en-us_topic_0000001058948921_p13383144122414"></a><a name="en-us_topic_0000001058948921_p13383144122414"></a>Color of the currently selected navigation point indicator.</p> 311</td> 312</tr> 313<tr id="en-us_topic_0000001058948921_row7475657112310"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p133844416249"><a name="en-us_topic_0000001058948921_p133844416249"></a><a name="en-us_topic_0000001058948921_p133844416249"></a>indicator-size </p> 314</td> 315<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p153846410246"><a name="en-us_topic_0000001058948921_p153846410246"></a><a name="en-us_topic_0000001058948921_p153846410246"></a><length></p> 316</td> 317<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p23842442418"><a name="en-us_topic_0000001058948921_p23842442418"></a><a name="en-us_topic_0000001058948921_p23842442418"></a>4px</p> 318</td> 319<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p203843412419"><a name="en-us_topic_0000001058948921_p203843412419"></a><a name="en-us_topic_0000001058948921_p203843412419"></a>No</p> 320</td> 321<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_p10384442244"><a name="en-us_topic_0000001058948921_p10384442244"></a><a name="en-us_topic_0000001058948921_p10384442244"></a>Diameter of the navigation point indicator.</p> 322</td> 323</tr> 324<tr id="en-us_topic_0000001058948921_row115151154122310"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_p10384241244"><a name="en-us_topic_0000001058948921_p10384241244"></a><a name="en-us_topic_0000001058948921_p10384241244"></a>indicator-top|left|right|bottom</p> 325</td> 326<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_p738416432418"><a name="en-us_topic_0000001058948921_p738416432418"></a><a name="en-us_topic_0000001058948921_p738416432418"></a><length> | <percentage></p> 327</td> 328<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_p153841945248"><a name="en-us_topic_0000001058948921_p153841945248"></a><a name="en-us_topic_0000001058948921_p153841945248"></a>-</p> 329</td> 330<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p2384134182420"><a name="en-us_topic_0000001058948921_p2384134182420"></a><a name="en-us_topic_0000001058948921_p2384134182420"></a>No</p> 331</td> 332<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_p23841349248"><a name="en-us_topic_0000001058948921_p23841349248"></a><a name="en-us_topic_0000001058948921_p23841349248"></a>Relative position of the navigation point indicator in the swiper.</p> 333</td> 334</tr> 335<tr id="en-us_topic_0000001058948921_row14796833185315"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"></a>width</p> 336</td> 337<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"></a><length> | <percentage></p> 338</td> 339<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p3948114217528"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p3948114217528"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p3948114217528"></a>-</p> 340</td> 341<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p57971133195318"><a name="en-us_topic_0000001058948921_p57971133195318"></a><a name="en-us_topic_0000001058948921_p57971133195318"></a>No</p> 342</td> 343<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p624653010258"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p624653010258"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p624653010258"></a>Component width.</p> 344<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p84811050134010"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p84811050134010"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p84811050134010"></a>If this attribute is not set, the width required for the element content is used. </p> 345</td> 346</tr> 347<tr id="en-us_topic_0000001058948921_row177979331538"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a>height</p> 348</td> 349<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"></a><length><span id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph11748352163918"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph11748352163918"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph11748352163918"></a></span> | <percentage></p> 350</td> 351<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"></a>-</p> 352</td> 353<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p4797183314532"><a name="en-us_topic_0000001058948921_p4797183314532"></a><a name="en-us_topic_0000001058948921_p4797183314532"></a>No</p> 354</td> 355<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1477601264"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1477601264"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1477601264"></a>Component height.</p> 356<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p208761554184020"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p208761554184020"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p208761554184020"></a>If this length attribute is not set, the length required for the element content is used. </p> 357</td> 358</tr> 359<tr id="en-us_topic_0000001058948921_row67976336536"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"></a>padding</p> 360</td> 361<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"></a><length> | <percentage><sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup1886516813013"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup1886516813013"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup1886516813013"></a>5+</sup></p> 362</td> 363<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"></a>0</p> 364</td> 365<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p19729127112814"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p19729127112814"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p19729127112814"></a>No</p> 366</td> 367<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p157435053316"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p157435053316"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p157435053316"></a>Shorthand attribute to set all padding attributes.</p> 368<div class="p" id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"></a>The attribute can have one to four values:<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul15202134923211"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul15202134923211"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul15202134923211"><li><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p10614155353215"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p10614155353215"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p10614155353215"></a>If you set only one value, it specifies the padding for four sides.</p> 369</li><li><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p10614175393216"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p10614175393216"></a><a name="en-us_topic_0000001058948921_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> 370</li><li><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p8614205393214"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p8614205393214"></a><a name="en-us_topic_0000001058948921_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> 371</li><li><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p106141853193215"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p106141853193215"></a><a name="en-us_topic_0000001058948921_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> 372</li></ul> 373</div> 374</td> 375</tr> 376<tr id="en-us_topic_0000001058948921_row1379853365316"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"></a>padding-[left|top|right|bottom]</p> 377</td> 378<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"></a><length> | <percentage><sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup19949912807"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup19949912807"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup19949912807"></a>5+</sup></p> 379</td> 380<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"></a>0</p> 381</td> 382<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p11729374289"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p11729374289"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p11729374289"></a>No</p> 383</td> 384<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"></a>Left, top, right, and bottom padding (in px).</p> 385</td> 386</tr> 387<tr id="en-us_topic_0000001058948921_row18799233195316"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p769124717365"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p769124717365"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p769124717365"></a>padding-[start|end]</p> 388</td> 389<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p157617124374"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p157617124374"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p157617124374"></a><length> | <percentage><sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup8490161513019"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup8490161513019"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup8490161513019"></a>5+</sup></p> 390</td> 391<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1069144703616"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1069144703616"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1069144703616"></a>0</p> 392</td> 393<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1373027182819"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1373027182819"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1373027182819"></a>No</p> 394</td> 395<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1269184753610"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1269184753610"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1269184753610"></a>Start and end padding.</p> 396</td> 397</tr> 398<tr id="en-us_topic_0000001058948921_row20799193315315"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"></a>margin</p> 399</td> 400<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><length> | <percentage><sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup1433352175220"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup1433352175220"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup1433352175220"></a>5+</sup></p> 401</td> 402<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"></a>0</p> 403</td> 404<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p4730774285"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p4730774285"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p4730774285"></a>No</p> 405</td> 406<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"></a><a name="en-us_topic_0000001058948921_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> 407<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul5333133311105"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul5333133311105"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul5333133311105"><li><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p03345339103"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p03345339103"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p03345339103"></a>If you set only one value, it specifies the margin for all the four sides.</p> 408</li><li><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1133420334108"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1133420334108"></a><a name="en-us_topic_0000001058948921_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> 409</li><li><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p193341533191015"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p193341533191015"></a><a name="en-us_topic_0000001058948921_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> 410</li><li><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p733412334102"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p733412334102"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p733412334102"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p> 411</li></ul> 412</td> 413</tr> 414<tr id="en-us_topic_0000001058948921_row20800233105319"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"></a>margin-[left|top|right|bottom]</p> 415</td> 416<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"></a><length> | <percentage><sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup378331720532"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup378331720532"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup378331720532"></a>5+</sup></p> 417</td> 418<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"></a>0</p> 419</td> 420<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p773013742811"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p773013742811"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p773013742811"></a>No</p> 421</td> 422<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"></a>Left, top, right, and bottom margins.</p> 423</td> 424</tr> 425<tr id="en-us_topic_0000001058948921_row6800833175313"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p9492107123816"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p9492107123816"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p9492107123816"></a>margin-[start|end]</p> 426</td> 427<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p157617124374_1"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p157617124374_1"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p157617124374_1"></a><length> | <percentage><sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup8490161513019_1"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup8490161513019_1"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup8490161513019_1"></a>5+</sup></p> 428</td> 429<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1549213793811"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1549213793811"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1549213793811"></a>0</p> 430</td> 431<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p1280053313537"><a name="en-us_topic_0000001058948921_p1280053313537"></a><a name="en-us_topic_0000001058948921_p1280053313537"></a>No</p> 432</td> 433<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1049212715388"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1049212715388"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1049212715388"></a>Start and end margins.</p> 434</td> 435</tr> 436<tr id="en-us_topic_0000001058948921_row780083311539"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"></a>border</p> 437</td> 438<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"></a>-</p> 439</td> 440<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"></a>0</p> 441</td> 442<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p1380163365311"><a name="en-us_topic_0000001058948921_p1380163365311"></a><a name="en-us_topic_0000001058948921_p1380163365311"></a>No</p> 443</td> 444<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"></a>Shorthand attribute to set all borders. You can set <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b79128342503"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b79128342503"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b79128342503"></a>border-width</strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b9366173919505"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b9366173919505"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b9366173919505"></a>border-style</strong>, and <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b184351248205019"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b184351248205019"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b184351248205019"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 445</td> 446</tr> 447<tr id="en-us_topic_0000001058948921_row148015336539"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"></a>border-style</p> 448</td> 449<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p513631613319"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p513631613319"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p513631613319"></a>string</p> 450</td> 451<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"></a>solid</p> 452</td> 453<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p4801103325319"><a name="en-us_topic_0000001058948921_p4801103325319"></a><a name="en-us_topic_0000001058948921_p4801103325319"></a>No</p> 454</td> 455<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p342285712314"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p342285712314"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p342285712314"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p> 456<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul1470834505612"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul1470834505612"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul1470834505612"><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b143453286360"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b143453286360"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b792117280367"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b792117280367"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b792117280367"></a>dashed</strong>: Dashed border</li></ul> 457<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul15621125545612"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul15621125545612"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul15621125545612"><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1335862963610"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1335862963610"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1335862963610"></a>solid</strong>: Solid border</li></ul> 458</td> 459</tr> 460<tr id="en-us_topic_0000001058948921_row280113331536"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p119531437370"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p119531437370"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p119531437370"></a>border-[left|top|right|bottom]-style</p> 461</td> 462<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p129532037175"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p129532037175"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p129532037175"></a>string</p> 463</td> 464<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p495312372717"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p495312372717"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p495312372717"></a>solid</p> 465</td> 466<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p169534375717"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p169534375717"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p169534375717"></a>No</p> 467</td> 468<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p595353718719"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p595353718719"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p595353718719"></a>Styles of the left, top, right, and bottom borders. The available values are <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b17769171311540"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b17769171311540"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b17769171311540"></a>dotted</strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b237141519547"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b237141519547"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b237141519547"></a>dashed</strong>, and <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b8949161613540"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b8949161613540"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b8949161613540"></a>solid</strong>.</p> 469</td> 470</tr> 471<tr id="en-us_topic_0000001058948921_row148021633105316"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"></a>border-[left|top|right|bottom]</p> 472</td> 473<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"></a>-</p> 474</td> 475<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"></a>-</p> 476</td> 477<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p67303762810"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p67303762810"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p67303762810"></a>No</p> 478</td> 479<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"></a>Shorthand attribute to set the borders for every side respectively. You can set <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b122415514554"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b122415514554"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b122415514554"></a>border-width</strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b12296178135513"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b12296178135513"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b12296178135513"></a>border-style</strong>, and <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1129701210553"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1129701210553"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1129701210553"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 480</td> 481</tr> 482<tr id="en-us_topic_0000001058948921_row1980263320535"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"></a>border-width</p> 483</td> 484<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><length></p> 485</td> 486<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"></a>0</p> 487</td> 488<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p38035338538"><a name="en-us_topic_0000001058948921_p38035338538"></a><a name="en-us_topic_0000001058948921_p38035338538"></a>No</p> 489</td> 490<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"></a>Shorthand attribute to set the width of all borders<span id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph07997369365"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph07997369365"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph07997369365"></a>, or separately set the width of each border</span>.</p> 491</td> 492</tr> 493<tr id="en-us_topic_0000001058948921_row280318333534"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"></a>border-[left|top|right|bottom]-width</p> 494</td> 495<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"></a><length></p> 496</td> 497<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"></a>0</p> 498</td> 499<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p9803733185317"><a name="en-us_topic_0000001058948921_p9803733185317"></a><a name="en-us_topic_0000001058948921_p9803733185317"></a>No</p> 500</td> 501<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"></a>Attribute to set widths of left, top, right, and bottom borders.</p> 502</td> 503</tr> 504<tr id="en-us_topic_0000001058948921_row1880353335319"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"></a>border-color</p> 505</td> 506<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"></a><color></p> 507</td> 508<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"></a>black</p> 509</td> 510<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p88038330537"><a name="en-us_topic_0000001058948921_p88038330537"></a><a name="en-us_topic_0000001058948921_p88038330537"></a>No</p> 511</td> 512<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"></a>Shorthand attribute to set the color of all borders<span id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph9587639113619"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph9587639113619"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph9587639113619"></a>, or separately set the color of each border</span>.</p> 513</td> 514</tr> 515<tr id="en-us_topic_0000001058948921_row480483311530"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"></a>border-[left|top|right|bottom]-color</p> 516</td> 517<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"></a><color></p> 518</td> 519<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"></a>black</p> 520</td> 521<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p780417336536"><a name="en-us_topic_0000001058948921_p780417336536"></a><a name="en-us_topic_0000001058948921_p780417336536"></a>No</p> 522</td> 523<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"></a>Attribute to set colors of left, top, right, and bottom borders.</p> 524</td> 525</tr> 526<tr id="en-us_topic_0000001058948921_row1380493365314"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"></a>border-radius</p> 527</td> 528<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"></a><length></p> 529</td> 530<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"></a>-</p> 531</td> 532<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p67306752816"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p67306752816"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p67306752816"></a>No</p> 533</td> 534<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"></a>Attribute to set the radius of round borders of an element. <span id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph1249443123611"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph1249443123611"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b124211434362"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b124211434362"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b124211434362"></a>border-width</strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b124894383615"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b124894383615"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b124894383615"></a>border-color</strong>, or <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b7166134516465"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b7166134516465"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b7166134516465"></a>border-style</strong> for all the borders at the same time.</span></p> 535</td> 536</tr> 537<tr id="en-us_topic_0000001058948921_row280417337534"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"></a>border-[top|bottom]-[left|right]-radius</p> 538</td> 539<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"></a><length></p> 540</td> 541<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"></a>-</p> 542</td> 543<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p27305718283"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p27305718283"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p27305718283"></a>No</p> 544</td> 545<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"></a><a name="en-us_topic_0000001058948921_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> 546</td> 547</tr> 548<tr id="en-us_topic_0000001058948921_row680433316539"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"></a>background</p> 549</td> 550<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><linear-gradient></p> 551</td> 552<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"></a>-</p> 553</td> 554<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p15730197132811"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p15730197132811"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p15730197132811"></a>No</p> 555</td> 556<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b389373419292"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b389373419292"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b389373419292"></a>background-color</strong> or <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b0399637142918"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b0399637142918"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b0399637142918"></a>background-image</strong>.</p> 557</td> 558</tr> 559<tr id="en-us_topic_0000001058948921_row12805133311532"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"></a>background-color</p> 560</td> 561<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"></a><color></p> 562</td> 563<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"></a>-</p> 564</td> 565<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p17730577282"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p17730577282"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p17730577282"></a>No</p> 566</td> 567<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"></a>Background color.</p> 568</td> 569</tr> 570<tr id="en-us_topic_0000001058948921_row980533335319"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"></a>background-image</p> 571</td> 572<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"></a>string</p> 573</td> 574<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"></a>-</p> 575</td> 576<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p7730976285"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p7730976285"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p7730976285"></a>No</p> 577</td> 578<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b17699154763620"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b17699154763620"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b17699154763620"></a>background-color</strong> or <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b87001647163613"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b87001647163613"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b87001647163613"></a>background</strong>. Local image resources are supported.</p> 579<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p45914251572"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p45914251572"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p45914251572"></a>Example:</p> 580<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p16184973578"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p16184973578"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p16184973578"></a>background-image: url("/common/background.png")</p> 581</td> 582</tr> 583<tr id="en-us_topic_0000001058948921_row8806333195315"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"></a>background-size</p> 584</td> 585<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul1065173641310"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul1065173641310"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul1065173641310"><li>string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 586</td> 587<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"></a>auto</p> 588</td> 589<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p137309714282"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p137309714282"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p137309714282"></a>No</p> 590</td> 591<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p91971112114318"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p91971112114318"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p91971112114318"></a>Background image size.</p> 592<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul41331853154111"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul41331853154111"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul41331853154111"><li>The <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1229715499365"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1229715499365"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1229715499365"></a>string</strong> values are as follows:<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul13611494111"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul13611494111"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul13611494111"><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b4759749163610"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b4759749163610"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b437619381712"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b437619381712"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b1425512535366"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1425512535366"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1425512535366"></a>auto</strong>: The original image width-height ratio is retained.</li></ul> 593</li><li>The two <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b13309145193614"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b13309145193614"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b13309145193614"></a><length></strong> values are as follows:<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1840244924418"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1840244924418"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b146661156143617"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b146661156143617"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b146661156143617"></a>auto</strong> by default.</p> 594</li><li>The two <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1667415763613"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1667415763613"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1667415763613"></a><percentage></strong> values are as follows:<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p17936154410457"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p17936154410457"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b1524319254"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1524319254"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1524319254"></a>auto</strong> by default.</p> 595</li></ul> 596</td> 597</tr> 598<tr id="en-us_topic_0000001058948921_row188061733195319"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"></a>background-repeat</p> 599</td> 600<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"></a>string</p> 601</td> 602<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"></a>repeat</p> 603</td> 604<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1673015702810"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1673015702810"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1673015702810"></a>No</p> 605</td> 606<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"></a><a name="en-us_topic_0000001058948921_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> 607<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul8236153103612"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul8236153103612"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul8236153103612"><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1363463710"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1363463710"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b267416916377"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b267416916377"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b267416916377"></a>repeat-x</strong>: Repeatedly draws images along the x-axis.</li><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b625561011379"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b625561011379"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b625561011379"></a>repeat-y</strong>: Repeatedly draws images along the y-axis.</li><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1122181133715"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1122181133715"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1122181133715"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul> 608</td> 609</tr> 610<tr id="en-us_topic_0000001058948921_row128061933145317"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"></a>background-position</p> 611</td> 612<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul8874155216502"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul8874155216502"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul8874155216502"><li>string string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 613</td> 614<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"></a>0px 0px</p> 615</td> 616<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p173010720280"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p173010720280"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p173010720280"></a>No</p> 617</td> 618<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul1590812103363"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul1590812103363"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b5234102011540"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b5234102011540"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_ul1453531734716"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul1453531734716"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul1453531734716"><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b0982111273712"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b0982111273712"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b0982111273712"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b866713583912"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b866713583912"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b866713583912"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b5886013193716"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b5886013193716"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b5886013193716"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b84197142376"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b84197142376"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b84197142376"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b14894114103710"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b14894114103710"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b14894114103710"></a>center</strong>: center position</li></ul> 619</li></ul> 620<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul10908121023615"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul10908121023615"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul10908121023615"><li>Using <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b11401615193715"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b11401615193715"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b1341381819379"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1341381819379"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b48671516183714"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b48671516183714"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b48671516183714"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b5492717163712"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b5492717163712"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b164741723183712"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b164741723183712"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b164741723183712"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b64022245377"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b64022245377"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b7893424163718"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b7893424163718"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b7893424163718"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b154811725193718"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b154811725193718"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b154811725193718"></a><percentage></strong> and <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b34834254377"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b34834254377"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b34834254377"></a><length></strong>.</li></ul> 621</td> 622</tr> 623<tr id="en-us_topic_0000001058948921_row2807203313533"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p134581712103910"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p134581712103910"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p134581712103910"></a>opacity</p> 624</td> 625<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"></a>number</p> 626</td> 627<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"></a>1</p> 628</td> 629<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1873011722814"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1873011722814"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1873011722814"></a>No</p> 630</td> 631<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p122515161139"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p122515161139"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1871715526385"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1871715526385"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1871715526385"></a>0</strong> to <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b177181452103815"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b177181452103815"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b177181452103815"></a>1</strong>. The value <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b13718155210380"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b13718155210380"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b13718155210380"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b6718152103818"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b6718152103818"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b6718152103818"></a>0</strong> means completely transparent.</p> 632</td> 633</tr> 634<tr id="en-us_topic_0000001058948921_row17807333135311"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aeda9e2f8d8344958bf4f43d429dcb55e"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aeda9e2f8d8344958bf4f43d429dcb55e"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aeda9e2f8d8344958bf4f43d429dcb55e"></a>display</p> 635</td> 636<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1544115441446"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1544115441446"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1544115441446"></a>string</p> 637<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aaaa164aa970b490fb048e5f260f1c661"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aaaa164aa970b490fb048e5f260f1c661"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aaaa164aa970b490fb048e5f260f1c661"></a></p> 638</td> 639<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aa5ce61466c9847dbb7f44852338d9006"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aa5ce61466c9847dbb7f44852338d9006"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aa5ce61466c9847dbb7f44852338d9006"></a>flex</p> 640</td> 641<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p167303762818"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p167303762818"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p167303762818"></a>No</p> 642</td> 643<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p23704018414"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p23704018414"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p23704018414"></a>How and whether to display the box containing an element. Available values are as follows:</p> 644<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul12227103394916"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul12227103394916"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul12227103394916"><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b57468289377"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b57468289377"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b57468289377"></a>flex</strong>: flexible layout</li><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b18887133293920"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b18887133293920"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b18887133293920"></a>none</strong>: The element is hidden.</li></ul> 645</td> 646</tr> 647<tr id="en-us_topic_0000001058948921_row380713315313"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"></a>visibility</p> 648</td> 649<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p15475737486"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p15475737486"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p15475737486"></a>string</p> 650<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"></a></p> 651</td> 652<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a>visible</p> 653</td> 654<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p57301471281"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p57301471281"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p57301471281"></a>No</p> 655</td> 656<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1568839154517"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1568839154517"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b15844103015378"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b15844103015378"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b15844103015378"></a>display</strong> attribute to <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b4845153013712"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b4845153013712"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b4845153013712"></a>none</strong>.) Available values are as follows:</p> 657<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul751984164920"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul751984164920"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul751984164920"><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b17429331133711"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b17429331133711"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b17429331133711"></a>visible</strong>: The element is visible.</li><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b109191231193710"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b109191231193710"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b109191231193710"></a>hidden</strong>: The element is hidden but still takes up space.</li></ul> 658<div class="note" id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note4549524649"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note4549524649"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note4549524649"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p25499241642"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p25499241642"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p25499241642"></a>If both <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b719810016405"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b719810016405"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b719810016405"></a>visibility</strong> and <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b187052264018"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b187052264018"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b187052264018"></a>display</strong> are set, only <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b107788924011"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b107788924011"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b107788924011"></a>display</strong> takes effect.</p> 659</div></div> 660</td> 661</tr> 662<tr id="en-us_topic_0000001058948921_row19808143316535"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ad74a6a48aca7439e9344c18c26b4177e"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ad74a6a48aca7439e9344c18c26b4177e"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ad74a6a48aca7439e9344c18c26b4177e"></a>flex</p> 663</td> 664<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2e6e5192a1534872be5fcfd9f83e3fdc"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2e6e5192a1534872be5fcfd9f83e3fdc"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2e6e5192a1534872be5fcfd9f83e3fdc"></a>-</p> 665</td> 666<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8512eda38e25410685be8a8992890257"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8512eda38e25410685be8a8992890257"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a8512eda38e25410685be8a8992890257"></a>-</p> 667</td> 668<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1373057132812"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1373057132812"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1373057132812"></a>No</p> 669</td> 670<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a11c317cdfa7d4066878d86c6b3bcbd82"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a11c317cdfa7d4066878d86c6b3bcbd82"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a11c317cdfa7d4066878d86c6b3bcbd82"></a>How to divide available space of the parent component for a child component.</p> 671<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p6968144051814"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p6968144051814"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p6968144051814"></a>You can set one, two<sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup894453017315"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup894453017315"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup894453017315"></a>5+</sup>, or three<sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup1255142393114"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup1255142393114"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup1255142393114"></a>5+</sup> values for this style.</p> 672<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p16733313171911"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p16733313171911"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p16733313171911"></a>Set one value in either of the following ways:</p> 673<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul93371539192211"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul93371539192211"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul93371539192211"><li>A unitless number to set <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b152581117781"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b152581117781"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b152581117781"></a>flex-grow</strong>.</li><li>A valid width value<sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup133014373318"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup133014373318"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup133014373318"></a>5+</sup> to set <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b182101331199"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b182101331199"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b182101331199"></a>flex-basis</strong>.</li></ul> 674<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p6786171632018"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p6786171632018"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p6786171632018"></a>Set two values<sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup39514502313"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup39514502313"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup39514502313"></a>5+</sup> in the following ways:</p> 675<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p6400429122011"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p6400429122011"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p6400429122011"></a>The first value must be a unitless number used to set <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b171516283129"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b171516283129"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b171516283129"></a>flex-grow</strong>. The second value must be either of the following:</p> 676<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul767043502219"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul767043502219"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul767043502219"><li>A unitless number to set <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1428375141313"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1428375141313"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1428375141313"></a>flex-shrink</strong>.</li><li>A valid width value to set <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1632495651416"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1632495651416"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1632495651416"></a>flex-basis</strong>.</li></ul> 677<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p748416351217"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p748416351217"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p748416351217"></a>Set three values<sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup168671312151514"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup168671312151514"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup168671312151514"></a>5+</sup> in the following ways:</p> 678<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p7373204832111"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p7373204832111"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p7373204832111"></a>The first value must be a unitless number used to set <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b19419131221612"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b19419131221612"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b19378733181612"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b19378733181612"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b47717118176"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b47717118176"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b47717118176"></a>flex-basis</strong>.</p> 679<div class="note" id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note34891253201520"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note34891253201520"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note34891253201520"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1248915538152"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1248915538152"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b17156153131"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b17156153131"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b17156153131"></a><div></strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1201415151311"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1201415151311"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1201415151311"></a><list-item></strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b72031515132"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b72031515132"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b72031515132"></a><refresh></strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1920131551310"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1920131551310"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1920131551310"></a><stepper-item></strong><sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup17201815121317"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup17201815121317"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup17201815121317"></a>5+</sup>, and <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b2211915121313"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b2211915121313"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b2211915121313"></a><tabs></strong>.</p> 680</div></div> 681</td> 682</tr> 683<tr id="en-us_topic_0000001058948921_row9808143319535"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a5d88cacaaf5c4f6a87390ab916b695c6"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a5d88cacaaf5c4f6a87390ab916b695c6"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a5d88cacaaf5c4f6a87390ab916b695c6"></a>flex-grow</p> 684</td> 685<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2c379e3af283446da446f1631e572efd"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2c379e3af283446da446f1631e572efd"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2c379e3af283446da446f1631e572efd"></a>number</p> 686</td> 687<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aa374f6c7415a4ee48a06930d76c55be7"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aa374f6c7415a4ee48a06930d76c55be7"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_aa374f6c7415a4ee48a06930d76c55be7"></a>0</p> 688</td> 689<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p38081433145310"><a name="en-us_topic_0000001058948921_p38081433145310"></a><a name="en-us_topic_0000001058948921_p38081433145310"></a>No</p> 690</td> 691<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p4437122419557"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p4437122419557"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b1682343583716"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1682343583716"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1682343583716"></a>0</strong> indicates that the child component does not grow.</p> 692<div class="note" id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note201231734212"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note201231734212"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note201231734212"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p184555314553"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p184555314553"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b18575165615499"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b18575165615499"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b18575165615499"></a><div></strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b8575165618495"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b8575165618495"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b8575165618495"></a><list-item></strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b125751756164917"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b125751756164917"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b125751756164917"></a><refresh></strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b15751456104920"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b15751456104920"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b15751456104920"></a><stepper-item></strong><sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup257595611492"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup257595611492"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup257595611492"></a>5+</sup>, and <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b55761856114912"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b55761856114912"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b55761856114912"></a><tabs></strong>.</p> 693</div></div> 694</td> 695</tr> 696<tr id="en-us_topic_0000001058948921_row58088337536"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ac65ef7e2b1f24a13b09c495f643168c9"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ac65ef7e2b1f24a13b09c495f643168c9"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ac65ef7e2b1f24a13b09c495f643168c9"></a>flex-shrink</p> 697</td> 698<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a98e7d367f0e649699892ae5bad6ade37"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a98e7d367f0e649699892ae5bad6ade37"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a98e7d367f0e649699892ae5bad6ade37"></a>number</p> 699</td> 700<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a422d978368814d12a33201cb839060ee"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a422d978368814d12a33201cb839060ee"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a422d978368814d12a33201cb839060ee"></a>1</p> 701</td> 702<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p128081533195319"><a name="en-us_topic_0000001058948921_p128081533195319"></a><a name="en-us_topic_0000001058948921_p128081533195319"></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_0000001058948921_en-us_topic_0000001059340528_ab032342dfe56460ca742800de482ca0f"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ab032342dfe56460ca742800de482ca0f"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b783242395"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b783242395"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b783242395"></a>0</strong> indicates that the child component does not shrink.</p> 705<div class="note" id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note147160917217"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note147160917217"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note147160917217"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p844914328577"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p844914328577"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b1168212543127"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1168212543127"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1168212543127"></a><div></strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b76821454121211"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b76821454121211"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b76821454121211"></a><list-item></strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1168255411126"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1168255411126"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1168255411126"></a><refresh></strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b10682155415120"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b10682155415120"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b10682155415120"></a><stepper-item></strong><sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup10683145491215"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup10683145491215"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup10683145491215"></a>5+</sup>, and <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1868385461211"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1868385461211"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1868385461211"></a><tabs></strong>.</p> 706</div></div> 707</td> 708</tr> 709<tr id="en-us_topic_0000001058948921_row18099339532"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a82c323a994634032963169eeee1a55e4"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a82c323a994634032963169eeee1a55e4"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a82c323a994634032963169eeee1a55e4"></a>flex-basis</p> 710</td> 711<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1148910787"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1148910787"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1148910787"></a><length></p> 712<p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a43613cf0c2184c0d8b44e8d292f6edb7"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a43613cf0c2184c0d8b44e8d292f6edb7"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a43613cf0c2184c0d8b44e8d292f6edb7"></a></p> 713</td> 714<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ab9e1c7dc25f840e58993af05c1d32109"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ab9e1c7dc25f840e58993af05c1d32109"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ab9e1c7dc25f840e58993af05c1d32109"></a>-</p> 715</td> 716<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_p2809433185313"><a name="en-us_topic_0000001058948921_p2809433185313"></a><a name="en-us_topic_0000001058948921_p2809433185313"></a>No</p> 717</td> 718<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a0993ef9b0ef64785a76e6310dd834f09"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a0993ef9b0ef64785a76e6310dd834f09"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a0993ef9b0ef64785a76e6310dd834f09"></a>Initial length of the flex item on the main axis.</p> 719<div class="note" id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note62848141222"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note62848141222"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note62848141222"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p16711745115718"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p16711745115718"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b18795155631219"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b18795155631219"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b18795155631219"></a><div></strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b107951056121217"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b107951056121217"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b107951056121217"></a><list-item></strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b2795105619128"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b2795105619128"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b2795105619128"></a><refresh></strong>, <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1579510564126"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1579510564126"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1579510564126"></a><stepper-item></strong><sup id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup187953565122"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup187953565122"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_sup187953565122"></a>5+</sup>, and <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b11796456201211"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b11796456201211"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b11796456201211"></a><tabs></strong>.</p> 720</div></div> 721</td> 722</tr> 723<tr id="en-us_topic_0000001058948921_row1980919333533"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a50180d720a374549ae72c848e53320cb"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a50180d720a374549ae72c848e53320cb"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a50180d720a374549ae72c848e53320cb"></a>position</p> 724</td> 725<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a63672ed9a4c040f7a6ec9c8089b79bb6"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a63672ed9a4c040f7a6ec9c8089b79bb6"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a63672ed9a4c040f7a6ec9c8089b79bb6"></a>string</p> 726</td> 727<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2666820c71eb420485e4d20e55b4eabe"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2666820c71eb420485e4d20e55b4eabe"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a2666820c71eb420485e4d20e55b4eabe"></a>relative</p> 728</td> 729<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1173107172814"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1173107172814"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1173107172814"></a>No</p> 730</td> 731<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ae28abf4e47a740efbd45a8f280577912"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ae28abf4e47a740efbd45a8f280577912"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ae28abf4e47a740efbd45a8f280577912"></a>Positioning type of an element. Dynamic changes are not supported.</p> 732<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul17185232185014"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul17185232185014"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul17185232185014"><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1894911155394"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1894911155394"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1894911155394"></a>fixed</strong>: The element is positioned related to the browser window.</li><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b823115152390"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b823115152390"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b823115152390"></a>absolute</strong>: The element is positioned absolutely to its parent element.</li><li><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b736151417395"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b736151417395"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b736151417395"></a>relative</strong>: The element is positioned relative to its normal position.</li></ul> 733<div class="note" id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note167617191219"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note167617191219"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_note167617191219"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1839092815101"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1839092815101"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1839092815101"></a>The <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b13941713133910"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b13941713133910"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b13941713133910"></a>absolute</strong> attribute takes effect only when the parent component is <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1099913173916"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1099913173916"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b1099913173916"></a><div></strong> or <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b181001413123919"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b181001413123919"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b181001413123919"></a><stack></strong>.</p> 734</div></div> 735</td> 736</tr> 737<tr id="en-us_topic_0000001058948921_row13809153395318"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a70405cb9696b4329ac7625af93310018"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a70405cb9696b4329ac7625af93310018"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a70405cb9696b4329ac7625af93310018"></a>[left|top<span id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph14927143614712"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph14927143614712"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph14927143614712"></a>|right|bottom</span>]</p> 738</td> 739<td class="cellrowborder" valign="top" width="18.938106189381063%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1849062221214"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1849062221214"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p1849062221214"></a><length></p> 740</td> 741<td class="cellrowborder" valign="top" width="10.408959104089591%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a579ac7c03d1d46758ebaacd565d86ed3"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a579ac7c03d1d46758ebaacd565d86ed3"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a579ac7c03d1d46758ebaacd565d86ed3"></a>-</p> 742</td> 743<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p187314719288"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p187314719288"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_p187314719288"></a>No</p> 744</td> 745<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a9a662a62cd9b40eaa0cb9ca082b6d1c2"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a9a662a62cd9b40eaa0cb9ca082b6d1c2"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_a9a662a62cd9b40eaa0cb9ca082b6d1c2"></a><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b481348173914"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b481348173914"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b481348173914"></a>left|top</strong><span id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph4818118173914"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph4818118173914"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ph4818118173914"></a><strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b68143833912"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b68143833912"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b68143833912"></a>|right|bottom</strong></span> must be used together with <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b881916818394"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b881916818394"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b881916818394"></a>position</strong> to determine the offset position of an element.</p> 746<a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul12671003525"></a><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul12671003525"></a><ul id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_ul12671003525"><li>The <strong id="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b885117712398"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b885117712398"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b65591759395"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b65591759395"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b179013323910"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b179013323910"></a><a name="en-us_topic_0000001058948921_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_0000001058948921_en-us_topic_0000001059340528_b77091602397"><a name="en-us_topic_0000001058948921_en-us_topic_0000001059340528_b77091602397"></a><a name="en-us_topic_0000001058948921_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> 747</td> 748</tr> 749</tbody> 750</table> 751 752## Method <a name="en-us_topic_0000001058948921_section47669296127"></a> 753 754<a name="en-us_topic_0000001058948921_te7404653e7d24f40acacb0305c705aa2"></a> 755<table><thead align="left"><tr id="en-us_topic_0000001058948921_r7df84ee4172341538bc618c4345bbdfb"><th class="cellrowborder" valign="top" width="19.439999999999998%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058948921_a84cfe32d70ef464c8469ce267d0d73e8"><a name="en-us_topic_0000001058948921_a84cfe32d70ef464c8469ce267d0d73e8"></a><a name="en-us_topic_0000001058948921_a84cfe32d70ef464c8469ce267d0d73e8"></a>Name</p> 756</th> 757<th class="cellrowborder" valign="top" width="30.56%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058948921_a9f4903e9b8134a1e9fadce6a61670fb8"><a name="en-us_topic_0000001058948921_a9f4903e9b8134a1e9fadce6a61670fb8"></a><a name="en-us_topic_0000001058948921_a9f4903e9b8134a1e9fadce6a61670fb8"></a>Parameter</p> 758</th> 759<th class="cellrowborder" valign="top" width="50%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058948921_a4c4693c36e024fb2a0cb911f30c93c56"><a name="en-us_topic_0000001058948921_a4c4693c36e024fb2a0cb911f30c93c56"></a><a name="en-us_topic_0000001058948921_a4c4693c36e024fb2a0cb911f30c93c56"></a>Description</p> 760</th> 761</tr> 762</thead> 763<tbody><tr id="en-us_topic_0000001058948921_r8554a956136c49f8a359d08629dad179"><td class="cellrowborder" valign="top" width="19.439999999999998%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058948921_aed0f2fb3d4cd4e36a97feb6e7109d93e"><a name="en-us_topic_0000001058948921_aed0f2fb3d4cd4e36a97feb6e7109d93e"></a><a name="en-us_topic_0000001058948921_aed0f2fb3d4cd4e36a97feb6e7109d93e"></a>swipeTo</p> 764</td> 765<td class="cellrowborder" valign="top" width="30.56%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058948921_a455221cd9db84f4e8e07d33556a6cc21"><a name="en-us_topic_0000001058948921_a455221cd9db84f4e8e07d33556a6cc21"></a><a name="en-us_topic_0000001058948921_a455221cd9db84f4e8e07d33556a6cc21"></a>{ index: number(specified position) }</p> 766</td> 767<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058948921_a446f14fd895449f68d98b2a7e1c4bd04"><a name="en-us_topic_0000001058948921_a446f14fd895449f68d98b2a7e1c4bd04"></a><a name="en-us_topic_0000001058948921_a446f14fd895449f68d98b2a7e1c4bd04"></a>Scrolls the child component to the position at the specified index.</p> 768</td> 769</tr> 770<tr id="en-us_topic_0000001058948921_row47605285519"><td class="cellrowborder" valign="top" width="19.439999999999998%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058948921_p37655213550"><a name="en-us_topic_0000001058948921_p37655213550"></a><a name="en-us_topic_0000001058948921_p37655213550"></a>showNext</p> 771</td> 772<td class="cellrowborder" valign="top" width="30.56%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058948921_p117613529552"><a name="en-us_topic_0000001058948921_p117613529552"></a><a name="en-us_topic_0000001058948921_p117613529552"></a>N/A</p> 773</td> 774<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058948921_p47675220555"><a name="en-us_topic_0000001058948921_p47675220555"></a><a name="en-us_topic_0000001058948921_p47675220555"></a>Shows the next child component.</p> 775</td> 776</tr> 777<tr id="en-us_topic_0000001058948921_row5694155435516"><td class="cellrowborder" valign="top" width="19.439999999999998%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058948921_p3694185420554"><a name="en-us_topic_0000001058948921_p3694185420554"></a><a name="en-us_topic_0000001058948921_p3694185420554"></a>showPrevious</p> 778</td> 779<td class="cellrowborder" valign="top" width="30.56%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058948921_p369455411559"><a name="en-us_topic_0000001058948921_p369455411559"></a><a name="en-us_topic_0000001058948921_p369455411559"></a>N/A</p> 780</td> 781<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058948921_p2694135412552"><a name="en-us_topic_0000001058948921_p2694135412552"></a><a name="en-us_topic_0000001058948921_p2694135412552"></a>Shows the previous child component.</p> 782</td> 783</tr> 784</tbody> 785</table> 786 787## Example<a name="en-us_topic_0000001058948921_section1933534232313"></a> 788 789``` 790<!-- xxx.hml --> 791<div class="container"> 792 <swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false"> 793 <div class = "swiperContent" > 794 <text class = "text">First screen</text> 795 </div> 796 <div class = "swiperContent"> 797 <text class = "text">Second screen</text> 798 </div> 799 <div class = "swiperContent"> 800 <text class = "text">Third screen</text> 801 </div> 802 </swiper> 803 <input class="button" type="button" value="swipeTo" onclick="swipeTo"></input> 804 <input class="button" type="button" value="showNext" onclick="showNext"></input> 805 <input class="button" type="button" value="showPrevious" onclick="showPrevious"></input> 806</div> 807``` 808 809``` 810/* xxx.css */ 811.container { 812 flex-direction: column; 813 width: 100%; 814 height: 100%; 815 align-items: center; 816} 817.swiper { 818 flex-direction: column; 819 align-content: center; 820 align-items: center; 821 width: 70%; 822 height: 130px; 823 border: 1px solid #000000; 824 indicator-color: #cf2411; 825 indicator-size: 14px; 826 indicator-bottom: 20px; 827 indicator-right: 30px; 828 margin-top: 100px; 829} 830.swiperContent { 831 height: 100%; 832 justify-content: center; 833} 834.button { 835 width: 70%; 836 margin: 10px; 837} 838.text { 839 font-size: 40px; 840} 841``` 842 843``` 844// xxx.js 845export default { 846 swipeTo() { 847 this.$element('swiper').swipeTo({index: 2}); 848 }, 849 showNext() { 850 this.$element('swiper').showNext(); 851 }, 852 showPrevious() { 853 this.$element('swiper').showPrevious(); 854 } 855} 856``` 857 858 859 860
