1# toggle<a name="EN-US_TOPIC_0000001115974750"></a> 2 3- [Permission List](#en-us_topic_0000001061155984_section11257113618419) 4- [Child Component](#en-us_topic_0000001061155984_section9288143101012) 5- [Attribute](#en-us_topic_0000001061155984_section2598341175212) 6- [Style](#en-us_topic_0000001061155984_section3655917541) 7- [Event](#en-us_topic_0000001061155984_section3892191911214) 8- [Example Code](#en-us_topic_0000001061155984_section520313404174) 9 10The **<toggle\>** component allows your user to select from a group of options and may display the selection result in real time. Generally, the option group consists of many toggles. 11 12> **NOTE:** 13>This component is supported since API version 5. 14 15## Permission List<a name="en-us_topic_0000001061155984_section11257113618419"></a> 16 17None 18 19## Child Component<a name="en-us_topic_0000001061155984_section9288143101012"></a> 20 21Not supported 22 23## Attribute<a name="en-us_topic_0000001061155984_section2598341175212"></a> 24 25<a name="en-us_topic_0000001061155984_table20633101642315"></a> 26<table><thead align="left"><tr id="en-us_topic_0000001061155984_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a>Name</p> 27</th> 28<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a>Type</p> 29</th> 30<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a>Default Value</p> 31</th> 32<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001061155984_p2063810588455"><a name="en-us_topic_0000001061155984_p2063810588455"></a><a name="en-us_topic_0000001061155984_p2063810588455"></a>Mandatory</p> 33</th> 34<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a>Description</p> 35</th> 36</tr> 37</thead> 38<tbody><tr id="en-us_topic_0000001061155984_row128581827123812"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_p158151581017"><a name="en-us_topic_0000001061155984_p158151581017"></a><a name="en-us_topic_0000001061155984_p158151581017"></a>value</p> 39</td> 40<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_p98151887118"><a name="en-us_topic_0000001061155984_p98151887118"></a><a name="en-us_topic_0000001061155984_p98151887118"></a>string</p> 41</td> 42<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_p78158817112"><a name="en-us_topic_0000001061155984_p78158817112"></a><a name="en-us_topic_0000001061155984_p78158817112"></a>-</p> 43</td> 44<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p8638135854515"><a name="en-us_topic_0000001061155984_p8638135854515"></a><a name="en-us_topic_0000001061155984_p8638135854515"></a>Yes</p> 45</td> 46<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_p1981514819118"><a name="en-us_topic_0000001061155984_p1981514819118"></a><a name="en-us_topic_0000001061155984_p1981514819118"></a>Text content of the toggle.</p> 47</td> 48</tr> 49<tr id="en-us_topic_0000001061155984_row1314733811"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_p14144703815"><a name="en-us_topic_0000001061155984_p14144703815"></a><a name="en-us_topic_0000001061155984_p14144703815"></a>checked</p> 50</td> 51<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_p174104714389"><a name="en-us_topic_0000001061155984_p174104714389"></a><a name="en-us_topic_0000001061155984_p174104714389"></a>boolean</p> 52</td> 53<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_p174134719389"><a name="en-us_topic_0000001061155984_p174134719389"></a><a name="en-us_topic_0000001061155984_p174134719389"></a>false</p> 54</td> 55<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p86381558144516"><a name="en-us_topic_0000001061155984_p86381558144516"></a><a name="en-us_topic_0000001061155984_p86381558144516"></a>No</p> 56</td> 57<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_p184114763819"><a name="en-us_topic_0000001061155984_p184114763819"></a><a name="en-us_topic_0000001061155984_p184114763819"></a>Whether the toggle is selected.</p> 58</td> 59</tr> 60<tr id="en-us_topic_0000001061155984_row9193183195312"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a>id</p> 61</td> 62<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a>string</p> 63</td> 64<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a>-</p> 65</td> 66<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p7638658124519"><a name="en-us_topic_0000001061155984_p7638658124519"></a><a name="en-us_topic_0000001061155984_p7638658124519"></a>No</p> 67</td> 68<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a>Unique ID of the component.</p> 69</td> 70</tr> 71<tr id="en-us_topic_0000001061155984_row1219312385317"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a>style</p> 72</td> 73<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a>string</p> 74</td> 75<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a>-</p> 76</td> 77<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p1763945824512"><a name="en-us_topic_0000001061155984_p1763945824512"></a><a name="en-us_topic_0000001061155984_p1763945824512"></a>No</p> 78</td> 79<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a>Style declaration of the component.</p> 80</td> 81</tr> 82<tr id="en-us_topic_0000001061155984_row16193133125319"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a>class</p> 83</td> 84<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a>string</p> 85</td> 86<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a>-</p> 87</td> 88<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p1639158154514"><a name="en-us_topic_0000001061155984_p1639158154514"></a><a name="en-us_topic_0000001061155984_p1639158154514"></a>No</p> 89</td> 90<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"></a>Style class of the component, which is used to refer to a style table.</p> 91</td> 92</tr> 93<tr id="en-us_topic_0000001061155984_row71931634531"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_p1786251117156"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_p1786251117156"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_p1786251117156"></a>ref</p> 94</td> 95<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_p1086241119157"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_p1086241119157"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_p1086241119157"></a>string</p> 96</td> 97<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_p586281111151"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_p586281111151"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_p586281111151"></a>-</p> 98</td> 99<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p1763912586457"><a name="en-us_topic_0000001061155984_p1763912586457"></a><a name="en-us_topic_0000001061155984_p1763912586457"></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_0000001061155984_en-us_topic_0000001050831187_p113416153342"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_p113416153342"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001061155984_ph1341012584014"><a name="en-us_topic_0000001061155984_ph1341012584014"></a><a name="en-us_topic_0000001061155984_ph1341012584014"></a> or child components</span>. The reference information is registered with the parent component on <strong id="en-us_topic_0000001061155984_b64111558409"><a name="en-us_topic_0000001061155984_b64111558409"></a><a name="en-us_topic_0000001061155984_b64111558409"></a>$refs</strong>.</p> 102</td> 103</tr> 104<tr id="en-us_topic_0000001061155984_row15193153155316"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"></a>disabled</p> 105</td> 106<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"></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_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"></a>false</p> 109</td> 110<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p863913581451"><a name="en-us_topic_0000001061155984_p863913581451"></a><a name="en-us_topic_0000001061155984_p863913581451"></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_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"></a>Whether the component is disabled. If it is disabled, it cannot respond to user interaction.</p> 113</td> 114</tr> 115<tr id="en-us_topic_0000001061155984_row151931836536"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a>data</p> 116</td> 117<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a>string</p> 118</td> 119<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a>-</p> 120</td> 121<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p06397586457"><a name="en-us_topic_0000001061155984_p06397586457"></a><a name="en-us_topic_0000001061155984_p06397586457"></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_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a>Attribute set for the component to facilitate data storage and reading.</p> 124</td> 125</tr> 126</tbody> 127</table> 128 129## Style<a name="en-us_topic_0000001061155984_section3655917541"></a> 130 131<a name="en-us_topic_0000001061155984_table1744514388541"></a> 132<table><thead align="left"><tr id="en-us_topic_0000001061155984_row1244614388545"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001061155984_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"><a name="en-us_topic_0000001061155984_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a>Name</p> 133</th> 134<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001061155984_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"><a name="en-us_topic_0000001061155984_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a>Type</p> 135</th> 136<th class="cellrowborder" valign="top" width="22.577742225777424%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001061155984_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"><a name="en-us_topic_0000001061155984_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a>Default Value</p> 137</th> 138<th class="cellrowborder" valign="top" width="9.779022097790222%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001061155984_p117421754619"><a name="en-us_topic_0000001061155984_p117421754619"></a><a name="en-us_topic_0000001061155984_p117421754619"></a>Mandatory</p> 139</th> 140<th class="cellrowborder" valign="top" width="24.047595240475953%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001061155984_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"><a name="en-us_topic_0000001061155984_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a>Description</p> 141</th> 142</tr> 143</thead> 144<tbody><tr id="en-us_topic_0000001061155984_row2048791993512"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_p1239116217355"><a name="en-us_topic_0000001061155984_p1239116217355"></a><a name="en-us_topic_0000001061155984_p1239116217355"></a>color</p> 145</td> 146<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_p23912219356"><a name="en-us_topic_0000001061155984_p23912219356"></a><a name="en-us_topic_0000001061155984_p23912219356"></a><color></p> 147</td> 148<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_p18391122114351"><a name="en-us_topic_0000001061155984_p18391122114351"></a><a name="en-us_topic_0000001061155984_p18391122114351"></a>#ff007dff</p> 149</td> 150<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p12391182113514"><a name="en-us_topic_0000001061155984_p12391182113514"></a><a name="en-us_topic_0000001061155984_p12391182113514"></a>No</p> 151</td> 152<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_p1839116217353"><a name="en-us_topic_0000001061155984_p1839116217353"></a><a name="en-us_topic_0000001061155984_p1839116217353"></a>Text color of the toggle.</p> 153</td> 154</tr> 155<tr id="en-us_topic_0000001061155984_row178272168352"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_p939172117357"><a name="en-us_topic_0000001061155984_p939172117357"></a><a name="en-us_topic_0000001061155984_p939172117357"></a>font-size</p> 156</td> 157<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_p539119214356"><a name="en-us_topic_0000001061155984_p539119214356"></a><a name="en-us_topic_0000001061155984_p539119214356"></a><length></p> 158</td> 159<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_p153915215356"><a name="en-us_topic_0000001061155984_p153915215356"></a><a name="en-us_topic_0000001061155984_p153915215356"></a>16px</p> 160</td> 161<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p0391521183511"><a name="en-us_topic_0000001061155984_p0391521183511"></a><a name="en-us_topic_0000001061155984_p0391521183511"></a>No</p> 162</td> 163<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_p439162118359"><a name="en-us_topic_0000001061155984_p439162118359"></a><a name="en-us_topic_0000001061155984_p439162118359"></a>Font size of the toggle.</p> 164</td> 165</tr> 166<tr id="en-us_topic_0000001061155984_row128281916173519"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_p5391521103516"><a name="en-us_topic_0000001061155984_p5391521103516"></a><a name="en-us_topic_0000001061155984_p5391521103516"></a>allow-scale</p> 167</td> 168<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_p1839172113516"><a name="en-us_topic_0000001061155984_p1839172113516"></a><a name="en-us_topic_0000001061155984_p1839172113516"></a>boolean</p> 169</td> 170<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_p6391162111359"><a name="en-us_topic_0000001061155984_p6391162111359"></a><a name="en-us_topic_0000001061155984_p6391162111359"></a>true</p> 171</td> 172<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p0392102143513"><a name="en-us_topic_0000001061155984_p0392102143513"></a><a name="en-us_topic_0000001061155984_p0392102143513"></a>No</p> 173</td> 174<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_p143921121153510"><a name="en-us_topic_0000001061155984_p143921121153510"></a><a name="en-us_topic_0000001061155984_p143921121153510"></a>Whether the font size changes with the system's font size settings.</p> 175<div class="note" id="en-us_topic_0000001061155984_note18392202114356"><a name="en-us_topic_0000001061155984_note18392202114356"></a><a name="en-us_topic_0000001061155984_note18392202114356"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001061155984_p2392162117358"><a name="en-us_topic_0000001061155984_p2392162117358"></a><a name="en-us_topic_0000001061155984_p2392162117358"></a>If the <strong id="en-us_topic_0000001061155984_b129938321418"><a name="en-us_topic_0000001061155984_b129938321418"></a><a name="en-us_topic_0000001061155984_b129938321418"></a>config-changes</strong> tag of <strong id="en-us_topic_0000001061155984_b499915324110"><a name="en-us_topic_0000001061155984_b499915324110"></a><a name="en-us_topic_0000001061155984_b499915324110"></a>fontSize</strong> is configured for abilities in the <strong id="en-us_topic_0000001061155984_b1199911321012"><a name="en-us_topic_0000001061155984_b1199911321012"></a><a name="en-us_topic_0000001061155984_b1199911321012"></a>config.json</strong> file, the setting takes effect without application restart.</p> 176</div></div> 177</td> 178</tr> 179<tr id="en-us_topic_0000001061155984_row15828111619355"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_p16392162123518"><a name="en-us_topic_0000001061155984_p16392162123518"></a><a name="en-us_topic_0000001061155984_p16392162123518"></a>font-style</p> 180</td> 181<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_p14392221153518"><a name="en-us_topic_0000001061155984_p14392221153518"></a><a name="en-us_topic_0000001061155984_p14392221153518"></a>string</p> 182</td> 183<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_p7392192163514"><a name="en-us_topic_0000001061155984_p7392192163514"></a><a name="en-us_topic_0000001061155984_p7392192163514"></a>normal</p> 184</td> 185<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p8392162110352"><a name="en-us_topic_0000001061155984_p8392162110352"></a><a name="en-us_topic_0000001061155984_p8392162110352"></a>No</p> 186</td> 187<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_p14392162118356"><a name="en-us_topic_0000001061155984_p14392162118356"></a><a name="en-us_topic_0000001061155984_p14392162118356"></a>Font style of the toggle.</p> 188</td> 189</tr> 190<tr id="en-us_topic_0000001061155984_row10828111616352"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_p9392142183516"><a name="en-us_topic_0000001061155984_p9392142183516"></a><a name="en-us_topic_0000001061155984_p9392142183516"></a>font-weight</p> 191</td> 192<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_p1439212212355"><a name="en-us_topic_0000001061155984_p1439212212355"></a><a name="en-us_topic_0000001061155984_p1439212212355"></a>number | string</p> 193</td> 194<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_p93928219354"><a name="en-us_topic_0000001061155984_p93928219354"></a><a name="en-us_topic_0000001061155984_p93928219354"></a>normal</p> 195</td> 196<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p5392152111359"><a name="en-us_topic_0000001061155984_p5392152111359"></a><a name="en-us_topic_0000001061155984_p5392152111359"></a>No</p> 197</td> 198<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_p939202114352"><a name="en-us_topic_0000001061155984_p939202114352"></a><a name="en-us_topic_0000001061155984_p939202114352"></a>Font weight of the toggle. For details, see <strong id="en-us_topic_0000001061155984_b738112421315"><a name="en-us_topic_0000001061155984_b738112421315"></a><a name="en-us_topic_0000001061155984_b738112421315"></a>font-weight</strong> of the <a href="text.md#en-us_topic_0000001058830803_section5775351116">text</a> component.</p> 199</td> 200</tr> 201<tr id="en-us_topic_0000001061155984_row11297118352"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_p173926212355"><a name="en-us_topic_0000001061155984_p173926212355"></a><a name="en-us_topic_0000001061155984_p173926212355"></a>font-family</p> 202</td> 203<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_p1939332112358"><a name="en-us_topic_0000001061155984_p1939332112358"></a><a name="en-us_topic_0000001061155984_p1939332112358"></a><string></p> 204</td> 205<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_p73931215356"><a name="en-us_topic_0000001061155984_p73931215356"></a><a name="en-us_topic_0000001061155984_p73931215356"></a>sans-serif</p> 206</td> 207<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p139312218359"><a name="en-us_topic_0000001061155984_p139312218359"></a><a name="en-us_topic_0000001061155984_p139312218359"></a>No</p> 208</td> 209<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_p1039352115354"><a name="en-us_topic_0000001061155984_p1039352115354"></a><a name="en-us_topic_0000001061155984_p1039352115354"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by <a href="custom-font-styles.md#EN-US_TOPIC_0000001162414611">Custom Font Styles</a> is used for the text.</p> 210</td> 211</tr> 212<tr id="en-us_topic_0000001061155984_row180716316012"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1070mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1070mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1070mcpsimp"></a>width</p> 213</td> 214<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1072mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1072mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1072mcpsimp"></a><length><span id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ph597168143913"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ph597168143913"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ph597168143913"></a> | <percentage></span></p> 215</td> 216<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p3948114217528"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p3948114217528"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p3948114217528"></a>-</p> 217</td> 218<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p13174101704612"><a name="en-us_topic_0000001061155984_p13174101704612"></a><a name="en-us_topic_0000001061155984_p13174101704612"></a>No</p> 219</td> 220<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p624653010258"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p624653010258"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p624653010258"></a>Component width.</p> 221<p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p84811050134010"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p84811050134010"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p84811050134010"></a>If this attribute is not set, the width required for the element content is used. </p> 222</td> 223</tr> 224<tr id="en-us_topic_0000001061155984_row168079320018"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1079mcpsimp"></a>height</p> 225</td> 226<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1081mcpsimp"></a><length><span id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ph11748352163918"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ph11748352163918"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ph11748352163918"></a> | <percentage></span></p> 227</td> 228<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1083mcpsimp"></a>-</p> 229</td> 230<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p71741417194619"><a name="en-us_topic_0000001061155984_p71741417194619"></a><a name="en-us_topic_0000001061155984_p71741417194619"></a>No</p> 231</td> 232<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1477601264"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1477601264"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1477601264"></a>Component height.</p> 233<p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p208761554184020"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p208761554184020"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p208761554184020"></a>If this length attribute is not set, the length required for the element content is used. </p> 234</td> 235</tr> 236<tr id="en-us_topic_0000001061155984_row16807233020"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"></a>padding</p> 237</td> 238<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"></a><length></p> 239</td> 240<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"></a>0</p> 241</td> 242<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p19729127112814"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p19729127112814"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p19729127112814"></a>No</p> 243</td> 244<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><div class="p" id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"></a>The attribute can have one to four values:<a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul15202134923211"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul15202134923211"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul15202134923211"><li><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p10614155353215"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p10614155353215"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p10614155353215"></a>If you set only one value, it specifies the padding for four sides.</p> 245</li><li><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p10614175393216"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p10614175393216"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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> 246</li><li><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p8614205393214"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p8614205393214"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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> 247</li><li><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p106141853193215"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p106141853193215"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p106141853193215"></a>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).</p> 248</li></ul> 249</div> 250</td> 251</tr> 252<tr id="en-us_topic_0000001061155984_row128078314011"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"></a>padding-[left|top|right|bottom]</p> 253</td> 254<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"></a><length></p> 255</td> 256<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"></a>0</p> 257</td> 258<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p11729374289"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p11729374289"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p11729374289"></a>No</p> 259</td> 260<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"></a>Left, top, right, and bottom padding (in px).</p> 261</td> 262</tr> 263<tr id="en-us_topic_0000001061155984_row178071934012"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p769124717365"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p769124717365"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p769124717365"></a>padding-[start|end]</p> 264</td> 265<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p157617124374"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p157617124374"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p157617124374"></a><length></p> 266</td> 267<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1069144703616"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1069144703616"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1069144703616"></a>0</p> 268</td> 269<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1373027182819"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1373027182819"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1373027182819"></a>No</p> 270</td> 271<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1269184753610"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1269184753610"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1269184753610"></a>Start and end padding.</p> 272</td> 273</tr> 274<tr id="en-us_topic_0000001061155984_row1080713405"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"></a>margin</p> 275</td> 276<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"></a><length></p> 277</td> 278<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"></a>0</p> 279</td> 280<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p4730774285"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p4730774285"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p4730774285"></a>No</p> 281</td> 282<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"></a>Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:</p> 283<a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul5333133311105"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul5333133311105"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul5333133311105"><li><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p03345339103"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p03345339103"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p03345339103"></a>If you set only one value, it specifies the margin for all the four sides.</p> 284</li><li><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1133420334108"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1133420334108"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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> 285</li><li><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p193341533191015"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p193341533191015"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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> 286</li><li><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p733412334102"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p733412334102"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p733412334102"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p> 287</li></ul> 288</td> 289</tr> 290<tr id="en-us_topic_0000001061155984_row11806831809"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"></a>margin-[left|top|right|bottom]</p> 291</td> 292<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"></a><length></p> 293</td> 294<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"></a>0</p> 295</td> 296<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p773013742811"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p773013742811"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p773013742811"></a>No</p> 297</td> 298<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"></a>Left, top, right, and bottom margins.</p> 299</td> 300</tr> 301<tr id="en-us_topic_0000001061155984_row1680633402"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p9492107123816"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p9492107123816"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p9492107123816"></a>margin-[start|end]</p> 302</td> 303<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p157617124374_1"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p157617124374_1"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p157617124374_1"></a><length></p> 304</td> 305<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1549213793811"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1549213793811"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1549213793811"></a>0</p> 306</td> 307<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p117511744618"><a name="en-us_topic_0000001061155984_p117511744618"></a><a name="en-us_topic_0000001061155984_p117511744618"></a>No</p> 308</td> 309<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1049212715388"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1049212715388"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1049212715388"></a>Start and end margins.</p> 310</td> 311</tr> 312<tr id="en-us_topic_0000001061155984_row13805731308"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a>background</p> 313</td> 314<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a><linear-gradient></p> 315</td> 316<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a>-</p> 317</td> 318<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p15730197132811"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p15730197132811"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p15730197132811"></a>No</p> 319</td> 320<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"><a name="en-us_topic_0000001061155984_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a><a name="en-us_topic_0000001061155984_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_0000001061155984_b045092120719"><a name="en-us_topic_0000001061155984_b045092120719"></a><a name="en-us_topic_0000001061155984_b045092120719"></a>background-color</strong> or <strong id="en-us_topic_0000001061155984_b1245062111717"><a name="en-us_topic_0000001061155984_b1245062111717"></a><a name="en-us_topic_0000001061155984_b1245062111717"></a>background-image</strong>.</p> 321</td> 322</tr> 323<tr id="en-us_topic_0000001061155984_row1280593701"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a>background-color</p> 324</td> 325<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a><color></p> 326</td> 327<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a>-</p> 328</td> 329<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p17730577282"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p17730577282"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p17730577282"></a>No</p> 330</td> 331<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a>Background color.</p> 332</td> 333</tr> 334<tr id="en-us_topic_0000001061155984_row8805173901"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a>background-image</p> 335</td> 336<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a>string</p> 337</td> 338<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a>-</p> 339</td> 340<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p7730976285"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p7730976285"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p7730976285"></a>No</p> 341</td> 342<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b17699154763620"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b17699154763620"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b17699154763620"></a>background-color</strong> or <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b87001647163613"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b87001647163613"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b87001647163613"></a>background</strong>. Both Internet and local image resources are supported.</p> 343</td> 344</tr> 345<tr id="en-us_topic_0000001061155984_row118052031605"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a>background-size</p> 346</td> 347<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul1065173641310"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul1065173641310"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul1065173641310"><li>string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 348</td> 349<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a>auto</p> 350</td> 351<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p137309714282"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p137309714282"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p137309714282"></a>No</p> 352</td> 353<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p91971112114318"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p91971112114318"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p91971112114318"></a>Background image size.</p> 354<a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul41331853154111"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul41331853154111"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul41331853154111"><li>The <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1229715499365"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1229715499365"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1229715499365"></a>string</strong> values are as follows:<a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul13611494111"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul13611494111"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul13611494111"><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b4759749163610"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b4759749163610"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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_0000001061155984_en-us_topic_0000001050791158_b136485011365"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b136485011365"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b136485011365"></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 localization area.</li><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1425512535366"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1425512535366"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1425512535366"></a>auto</strong>: The original image width-height ratio is retained.</li></ul> 355</li><li>The two <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b13309145193614"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b13309145193614"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b13309145193614"></a><length></strong> values are as follows:<p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1840244924418"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1840244924418"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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_0000001061155984_en-us_topic_0000001050791158_b146661156143617"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b146661156143617"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b146661156143617"></a>auto</strong> by default.</p> 356</li><li>The two <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1667415763613"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1667415763613"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1667415763613"></a><percentage></strong> values are as follows:<p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p17936154410457"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p17936154410457"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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_0000001061155984_en-us_topic_0000001050791158_b17190164371"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b17190164371"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b17190164371"></a>auto</strong> by default.</p> 357</li></ul> 358</td> 359</tr> 360<tr id="en-us_topic_0000001061155984_row480563806"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a>background-repeat</p> 361</td> 362<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a>string</p> 363</td> 364<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a>repeat</p> 365</td> 366<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1673015702810"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1673015702810"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1673015702810"></a>No</p> 367</td> 368<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"></a>Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.</p> 369<a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul8236153103612"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul8236153103612"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul8236153103612"><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1363463710"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1363463710"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1363463710"></a>repeat</strong>: Draws images along the x-axis and y-axis at the same time.</li><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b267416916377"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b267416916377"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b267416916377"></a>repeat-x</strong>: Draws images along the x-axis.</li><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b625561011379"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b625561011379"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b625561011379"></a>repeat-y</strong>: Draws images along the y-axis.</li><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1122181133715"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1122181133715"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1122181133715"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul> 370</td> 371</tr> 372<tr id="en-us_topic_0000001061155984_row18054318017"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a>background-position</p> 373</td> 374<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul8874155216502"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul8874155216502"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul8874155216502"><li>string string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 375</td> 376<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a>0px 0px</p> 377</td> 378<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p173010720280"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p173010720280"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p173010720280"></a>No</p> 379</td> 380<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul1590812103363"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul1590812103363"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b997011116376"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b997011116376"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b997011116376"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul1453531734716"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul1453531734716"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul1453531734716"><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b0982111273712"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b0982111273712"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b0982111273712"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b866713583912"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b866713583912"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b866713583912"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b5886013193716"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b5886013193716"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b5886013193716"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b84197142376"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b84197142376"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b84197142376"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b14894114103710"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b14894114103710"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b14894114103710"></a>center</strong>: center position</li></ul> 381</li></ul> 382<a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul10908121023615"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul10908121023615"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul10908121023615"><li>Using <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b11401615193715"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b11401615193715"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b11401615193715"></a><length></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1341381819379"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1341381819379"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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_0000001061155984_en-us_topic_0000001050791158_b48671516183714"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b48671516183714"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b48671516183714"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b5492717163712"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b5492717163712"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b5492717163712"></a><percentage></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b164741723183712"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b164741723183712"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b164741723183712"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b64022245377"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b64022245377"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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_0000001061155984_en-us_topic_0000001050791158_b7893424163718"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b7893424163718"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b7893424163718"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b154811725193718"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b154811725193718"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b154811725193718"></a><percentage></strong> and <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b34834254377"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b34834254377"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b34834254377"></a><length></strong>.</li></ul> 383</td> 384</tr> 385<tr id="en-us_topic_0000001061155984_row138059310014"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p134581712103910"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p134581712103910"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p134581712103910"></a>opacity</p> 386</td> 387<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a>number</p> 388</td> 389<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a>1</p> 390</td> 391<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1873011722814"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1873011722814"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1873011722814"></a>No</p> 392</td> 393<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p122515161139"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p122515161139"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1871715526385"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1871715526385"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1871715526385"></a>0</strong> to <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b177181452103815"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b177181452103815"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b177181452103815"></a>1</strong>. The value <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b13718155210380"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b13718155210380"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b13718155210380"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b6718152103818"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b6718152103818"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b6718152103818"></a>0</strong> means completely transparent.</p> 394</td> 395</tr> 396<tr id="en-us_topic_0000001061155984_row780563408"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"></a>display</p> 397</td> 398<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1544115441446"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1544115441446"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1544115441446"></a>string</p> 399<p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"></a></p> 400</td> 401<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"></a>flex</p> 402</td> 403<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p167303762818"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p167303762818"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p167303762818"></a>No</p> 404</td> 405<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p23704018414"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p23704018414"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p23704018414"></a>How and whether to display the box containing an element. Available values are as follows:</p> 406<a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul12227103394916"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul12227103394916"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul12227103394916"><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b57468289377"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b57468289377"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b57468289377"></a>flex</strong>: flexible layout</li><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b18887133293920"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b18887133293920"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b18887133293920"></a>none</strong>: The element is hidden.</li></ul> 407</td> 408</tr> 409<tr id="en-us_topic_0000001061155984_row1805331306"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"></a>visibility</p> 410</td> 411<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p15475737486"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p15475737486"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p15475737486"></a>string</p> 412<p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"></a></p> 413</td> 414<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"></a>visible</p> 415</td> 416<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p57301471281"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p57301471281"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p57301471281"></a>No</p> 417</td> 418<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1568839154517"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1568839154517"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1568839154517"></a>Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b15844103015378"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b15844103015378"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b15844103015378"></a>display</strong> attribute to <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b4845153013712"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b4845153013712"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b4845153013712"></a>none</strong>.) Available values are as follows:</p> 419<a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul751984164920"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul751984164920"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul751984164920"><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b17429331133711"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b17429331133711"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b17429331133711"></a>visible</strong>: The element is visible.</li><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b109191231193710"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b109191231193710"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b109191231193710"></a>hidden</strong>: The element is hidden but still takes up space.</li></ul> 420<div class="note" id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note4549524649"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note4549524649"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note4549524649"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p25499241642"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p25499241642"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p25499241642"></a>If both <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b719810016405"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b719810016405"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b719810016405"></a>visibility</strong> and <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b187052264018"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b187052264018"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b187052264018"></a>display</strong> are set, only <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b107788924011"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b107788924011"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b107788924011"></a>display</strong> takes effect.</p> 421</div></div> 422</td> 423</tr> 424<tr id="en-us_topic_0000001061155984_row11805123204"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1292mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1292mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1292mcpsimp"></a>flex</p> 425</td> 426<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1294mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1294mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1294mcpsimp"></a>number</p> 427</td> 428<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1296mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1296mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1296mcpsimp"></a>-</p> 429</td> 430<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1373057132812"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1373057132812"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1373057132812"></a>No</p> 431</td> 432<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1298mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1298mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1298mcpsimp"></a>How to divide available space of the parent component for a child component. It is used as a shorthand attribute to set the <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b675073313371"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b675073313371"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b675073313371"></a>flex-grow</strong> attribute of the parent component.</p> 433<div class="note" id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note34891253201520"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note34891253201520"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note34891253201520"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1248915538152"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1248915538152"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1248915538152"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b5392113473716"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b5392113473716"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b5392113473716"></a><div></strong>, <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b18394103473713"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b18394103473713"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b18394103473713"></a><list-item></strong>, or <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b153951534103716"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b153951534103716"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b153951534103716"></a><tabs></strong>.</p> 434</div></div> 435</td> 436</tr> 437<tr id="en-us_topic_0000001061155984_row780419318011"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1301mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1301mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1301mcpsimp"></a>flex-grow</p> 438</td> 439<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1303mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1303mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1303mcpsimp"></a>number</p> 440</td> 441<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1305mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1305mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1305mcpsimp"></a>0</p> 442</td> 443<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p81768178466"><a name="en-us_topic_0000001061155984_p81768178466"></a><a name="en-us_topic_0000001061155984_p81768178466"></a>No</p> 444</td> 445<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p4437122419557"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p4437122419557"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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_0000001061155984_en-us_topic_0000001050791158_b1682343583716"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1682343583716"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1682343583716"></a>0</strong> indicates that the child component does not grow.</p> 446<div class="note" id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note201231734212"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note201231734212"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note201231734212"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p184555314553"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p184555314553"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p184555314553"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1444983613711"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1444983613711"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1444983613711"></a><div></strong>, <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b64501936153711"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b64501936153711"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b64501936153711"></a><list-item></strong>, or <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1145115367371"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1145115367371"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1145115367371"></a><tabs></strong>.</p> 447</div></div> 448</td> 449</tr> 450<tr id="en-us_topic_0000001061155984_row1980415318018"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1310mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1310mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1310mcpsimp"></a>flex-shrink</p> 451</td> 452<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1312mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1312mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1312mcpsimp"></a>number</p> 453</td> 454<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1314mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1314mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1314mcpsimp"></a>1</p> 455</td> 456<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p1917613178465"><a name="en-us_topic_0000001061155984_p1917613178465"></a><a name="en-us_topic_0000001061155984_p1917613178465"></a>No</p> 457</td> 458<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1316mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1316mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1316mcpsimp"></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_0000001061155984_en-us_topic_0000001050791158_b783242395"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b783242395"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b783242395"></a>0</strong> indicates that the child component does not shrink.</p> 459<div class="note" id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note147160917217"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note147160917217"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note147160917217"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p844914328577"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p844914328577"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p844914328577"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1441723203915"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1441723203915"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1441723203915"></a><div></strong>, <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b14282393913"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b14282393913"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b14282393913"></a><list-item></strong>, or <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b2043102343910"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b2043102343910"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b2043102343910"></a><tabs></strong>.</p> 460</div></div> 461</td> 462</tr> 463<tr id="en-us_topic_0000001061155984_row198042032012"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1319mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1319mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1319mcpsimp"></a>flex-basis</p> 464</td> 465<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1148910787"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1148910787"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1148910787"></a><length></p> 466<p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1321mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1321mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1321mcpsimp"></a></p> 467</td> 468<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1323mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1323mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1323mcpsimp"></a>-</p> 469</td> 470<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_p0176817154612"><a name="en-us_topic_0000001061155984_p0176817154612"></a><a name="en-us_topic_0000001061155984_p0176817154612"></a>No</p> 471</td> 472<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1325mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1325mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1325mcpsimp"></a>Initial length of the flex item on the main axis.</p> 473<div class="note" id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note62848141222"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note62848141222"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note62848141222"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p16711745115718"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p16711745115718"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p16711745115718"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1864241917398"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1864241917398"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1864241917398"></a><div></strong>, <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b19648111913920"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b19648111913920"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b19648111913920"></a><list-item></strong>, or <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b46497191399"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b46497191399"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b46497191399"></a><tabs></strong>.</p> 474</div></div> 475</td> 476</tr> 477<tr id="en-us_topic_0000001061155984_row16804638012"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1328mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1328mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1328mcpsimp"></a>position</p> 478</td> 479<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1330mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1330mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1330mcpsimp"></a>string</p> 480</td> 481<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1332mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1332mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1332mcpsimp"></a>relative</p> 482</td> 483<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1173107172814"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1173107172814"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1173107172814"></a>No</p> 484</td> 485<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1334mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1334mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1334mcpsimp"></a>Positioning type of an element. Dynamic changes are not supported.</p> 486<a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul17185232185014"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul17185232185014"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul17185232185014"><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1894911155394"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1894911155394"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1894911155394"></a>fixed</strong>: The element is positioned related to the browser window.</li><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b823115152390"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b823115152390"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b823115152390"></a>absolute</strong>: The element is positioned absolutely to its parent element.</li><li><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b736151417395"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b736151417395"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b736151417395"></a>relative</strong>: The element is positioned relative to its normal position.</li></ul> 487<div class="note" id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note167617191219"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note167617191219"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_note167617191219"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1839092815101"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1839092815101"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1839092815101"></a>The <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b13941713133910"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b13941713133910"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b13941713133910"></a>absolute</strong> attribute takes effect only when the parent component is <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1099913173916"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1099913173916"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b1099913173916"></a><div></strong> or <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b181001413123919"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b181001413123919"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b181001413123919"></a><stack></strong>.</p> 488</div></div> 489</td> 490</tr> 491<tr id="en-us_topic_0000001061155984_row9804632019"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1337mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1337mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1337mcpsimp"></a>[left|top<span id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ph14927143614712"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ph14927143614712"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ph14927143614712"></a>|right|bottom</span>]</p> 492</td> 493<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1849062221214"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1849062221214"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p1849062221214"></a><length></p> 494</td> 495<td class="cellrowborder" valign="top" width="22.577742225777424%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1341mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1341mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1341mcpsimp"></a>-</p> 496</td> 497<td class="cellrowborder" valign="top" width="9.779022097790222%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p187314719288"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p187314719288"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_p187314719288"></a>No</p> 498</td> 499<td class="cellrowborder" valign="top" width="24.047595240475953%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1343mcpsimp"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1343mcpsimp"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1343mcpsimp"></a><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b481348173914"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b481348173914"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b481348173914"></a>left|top</strong><span id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ph4818118173914"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ph4818118173914"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ph4818118173914"></a><strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b68143833912"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b68143833912"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b68143833912"></a>|right|bottom</strong></span> must be used together with <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b881916818394"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b881916818394"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b881916818394"></a>position</strong> to determine the offset position of an element.</p> 500<a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul12671003525"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul12671003525"></a><ul id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_ul12671003525"><li>The <strong id="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b885117712398"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b885117712398"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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_0000001061155984_en-us_topic_0000001050791158_b65591759395"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b65591759395"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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_0000001061155984_en-us_topic_0000001050791158_b179013323910"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b179013323910"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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_0000001061155984_en-us_topic_0000001050791158_b77091602397"><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_b77091602397"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001050791158_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> 501</td> 502</tr> 503</tbody> 504</table> 505 506## Event<a name="en-us_topic_0000001061155984_section3892191911214"></a> 507 508<a name="en-us_topic_0000001061155984_table101871711203115"></a> 509<table><thead align="left"><tr id="en-us_topic_0000001061155984_row1718751111316"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a>Name</p> 510</th> 511<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a>Parameter</p> 512</th> 513<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a>Triggered when</p> 514</th> 515</tr> 516</thead> 517<tbody><tr id="en-us_topic_0000001061155984_row105681412318"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061155984_p18889152411316"><a name="en-us_topic_0000001061155984_p18889152411316"></a><a name="en-us_topic_0000001061155984_p18889152411316"></a>change</p> 518</td> 519<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061155984_p138891924103112"><a name="en-us_topic_0000001061155984_p138891924103112"></a><a name="en-us_topic_0000001061155984_p138891924103112"></a>{ checked: isChecked }</p> 520</td> 521<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061155984_p1889002418312"><a name="en-us_topic_0000001061155984_p1889002418312"></a><a name="en-us_topic_0000001061155984_p1889002418312"></a>Triggered when the toggle is selected or unselected.</p> 522</td> 523</tr> 524<tr id="en-us_topic_0000001061155984_row336512569516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a>touchstart</p> 525</td> 526<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 527</td> 528<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a>The tapping starts</p> 529</td> 530</tr> 531<tr id="en-us_topic_0000001061155984_row1236519563517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a>touchmove</p> 532</td> 533<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 534</td> 535<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a>The tapping moves</p> 536</td> 537</tr> 538<tr id="en-us_topic_0000001061155984_row18365145615516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a>touchcancel</p> 539</td> 540<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 541</td> 542<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a>The tapping is interrupted</p> 543</td> 544</tr> 545<tr id="en-us_topic_0000001061155984_row63651566517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a>touchend</p> 546</td> 547<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 548</td> 549<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a>The tapping ends</p> 550</td> 551</tr> 552<tr id="en-us_topic_0000001061155984_row1536575611516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a>click</p> 553</td> 554<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a>-</p> 555</td> 556<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a>A component is clicked</p> 557</td> 558</tr> 559<tr id="en-us_topic_0000001061155984_row183661256758"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a>longpress</p> 560</td> 561<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a>-</p> 562</td> 563<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a>A component is long pressed</p> 564</td> 565</tr> 566<tr id="en-us_topic_0000001061155984_row5366185613517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_p12706561061"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_p12706561061"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_p12706561061"></a>swipe<sup id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_sup35424382912"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_sup35424382912"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_sup35424382912"></a>5+</sup></p> 567</td> 568<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_p11711056161"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_p11711056161"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_p11711056161"></a><a href="universal-events.md#en-us_topic_0000001058460527_table111811577714">SwipeEvent</a></p> 569</td> 570<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061155984_en-us_topic_0000001058460527_p2711556162"><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_p2711556162"></a><a name="en-us_topic_0000001061155984_en-us_topic_0000001058460527_p2711556162"></a>A user quickly swipes on a component.</p> 571</td> 572</tr> 573</tbody> 574</table> 575 576## Example Code<a name="en-us_topic_0000001061155984_section520313404174"></a> 577 578``` 579<!-- xxx.hml --> 580<div style="flex-direction: column;"> 581 <text class="margin">1. Multiple choice example</text> 582 <div style="flex-wrap: wrap"> 583 <toggle class="margin" for="{{toggles}}">{{$item}}</toggle> 584 </div> 585 <text class="margin">2. Single choice example</text> 586 <div style="flex-wrap: wrap"> 587 <toggle class="margin" for="{{toggle_list}}" id="{{$item.id}}" checked="{{$item.checked}}" 588 value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle> 589 </div> 590</div> 591``` 592 593``` 594/* xxx.css */ 595.margin { 596 margin: 7px; 597} 598``` 599 600``` 601// xxx.js 602export default { 603 data: { 604 toggle_list: [ 605 { "id":"1001", "name":"Living room", "checked":true }, 606 { "id":"1002", "name":"Bedroom", "checked":false }, 607 { "id":"1003", "name":"Second bedroom", "checked":false }, 608 { "id":"1004", "name":"Kitchen", "checked":false }, 609 { "id":"1005", "name":"Study", "checked":false }, 610 { "id":"1006", "name":"Garden", "checked":false }, 611 { "id":"1007", "name":"Bathroom", "checked":false }, 612 { "id":"1008", "name":"Balcony", "checked":false }, 613 ], 614 toggles: ["Living room","Bedroom","Kitchen","Study"], 615 idx: "" 616 }, 617 allclick(arg) { 618 this.idx = arg 619 }, 620 allchange(e) { 621 if (e.checked === true) { 622 for (var i = 0; i < this.toggle_list.length; i++) { 623 if (this.toggle_list[i].id === this.idx) { 624 this.toggle_list[i].checked = true 625 } else { 626 this.toggle_list[i].checked = false 627 } 628 } 629 } 630 } 631} 632``` 633 634 635 636
