1# panel<a name="EN-US_TOPIC_0000001115974732"></a> 2 3- [Permission List](#en-us_topic_0000001062321291_section11257113618419) 4- [Child Component](#en-us_topic_0000001062321291_section19368335134016) 5- [Attribute](#en-us_topic_0000001062321291_section1100152194018) 6- [Style](#en-us_topic_0000001062321291_section1137118175437) 7- [Event](#en-us_topic_0000001062321291_section1614413538447) 8- [Method](#en-us_topic_0000001062321291_section165301745164719) 9- [Example Code](#en-us_topic_0000001062321291_section36743614499) 10 11The **<panel\>** component is a slidable panel. It provides a lightweight content display window with flexible sizes. The **<panel\>** component pops up when it is displayed. 12 13> **NOTE:** 14>This component is supported since API version 5. 15 16## Permission List<a name="en-us_topic_0000001062321291_section11257113618419"></a> 17 18None 19 20## Child Component<a name="en-us_topic_0000001062321291_section19368335134016"></a> 21 22Yes 23 24## Attribute<a name="en-us_topic_0000001062321291_section1100152194018"></a> 25 26<a name="en-us_topic_0000001062321291_table20633101642315"></a> 27<table><thead align="left"><tr id="en-us_topic_0000001062321291_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a>Name</p> 28</th> 29<th class="cellrowborder" valign="top" width="23.169999999999998%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a>Type</p> 30</th> 31<th class="cellrowborder" valign="top" width="10.43%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a>Default Value</p> 32</th> 33<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001062321291_p824610360217"><a name="en-us_topic_0000001062321291_p824610360217"></a><a name="en-us_topic_0000001062321291_p824610360217"></a>Mandatory</p> 34</th> 35<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a>Description</p> 36</th> 37</tr> 38</thead> 39<tbody><tr id="en-us_topic_0000001062321291_row741201424216"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_p1555482064215"><a name="en-us_topic_0000001062321291_p1555482064215"></a><a name="en-us_topic_0000001062321291_p1555482064215"></a>type</p> 40</td> 41<td class="cellrowborder" valign="top" width="23.169999999999998%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_p195541120124212"><a name="en-us_topic_0000001062321291_p195541120124212"></a><a name="en-us_topic_0000001062321291_p195541120124212"></a>string</p> 42</td> 43<td class="cellrowborder" valign="top" width="10.43%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_p05541220194219"><a name="en-us_topic_0000001062321291_p05541220194219"></a><a name="en-us_topic_0000001062321291_p05541220194219"></a>-</p> 44</td> 45<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p155541220104216"><a name="en-us_topic_0000001062321291_p155541220104216"></a><a name="en-us_topic_0000001062321291_p155541220104216"></a>Yes</p> 46</td> 47<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_p175541420104219"><a name="en-us_topic_0000001062321291_p175541420104219"></a><a name="en-us_topic_0000001062321291_p175541420104219"></a>Type of the slidable panel. This attribute cannot be dynamically changed. Available values are as follows:</p> 48<a name="en-us_topic_0000001062321291_ul15554620204219"></a><a name="en-us_topic_0000001062321291_ul15554620204219"></a><ul id="en-us_topic_0000001062321291_ul15554620204219"><li><p id="en-us_topic_0000001062321291_p555417208423"><a name="en-us_topic_0000001062321291_p555417208423"></a><a name="en-us_topic_0000001062321291_p555417208423"></a><strong id="en-us_topic_0000001062321291_b75944818331"><a name="en-us_topic_0000001062321291_b75944818331"></a><a name="en-us_topic_0000001062321291_b75944818331"></a>minibar</strong>: A minibar panel displays content in the minibar area or a large (fullscreen-like) area.</p> 49</li><li><p id="en-us_topic_0000001062321291_p15554920204216"><a name="en-us_topic_0000001062321291_p15554920204216"></a><a name="en-us_topic_0000001062321291_p15554920204216"></a><strong id="en-us_topic_0000001062321291_b1346141143510"><a name="en-us_topic_0000001062321291_b1346141143510"></a><a name="en-us_topic_0000001062321291_b1346141143510"></a>foldable</strong>: A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.</p> 50</li><li><p id="en-us_topic_0000001062321291_p35545206423"><a name="en-us_topic_0000001062321291_p35545206423"></a><a name="en-us_topic_0000001062321291_p35545206423"></a><strong id="en-us_topic_0000001062321291_b11403369397"><a name="en-us_topic_0000001062321291_b11403369397"></a><a name="en-us_topic_0000001062321291_b11403369397"></a>temporary</strong>: A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.</p> 51</li></ul> 52</td> 53</tr> 54<tr id="en-us_topic_0000001062321291_row1815511615424"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_p1755419206420"><a name="en-us_topic_0000001062321291_p1755419206420"></a><a name="en-us_topic_0000001062321291_p1755419206420"></a>mode</p> 55</td> 56<td class="cellrowborder" valign="top" width="23.169999999999998%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_p135544206422"><a name="en-us_topic_0000001062321291_p135544206422"></a><a name="en-us_topic_0000001062321291_p135544206422"></a>string</p> 57</td> 58<td class="cellrowborder" valign="top" width="10.43%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_p13554192010427"><a name="en-us_topic_0000001062321291_p13554192010427"></a><a name="en-us_topic_0000001062321291_p13554192010427"></a>full</p> 59</td> 60<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p155418205426"><a name="en-us_topic_0000001062321291_p155418205426"></a><a name="en-us_topic_0000001062321291_p155418205426"></a>No</p> 61</td> 62<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_p655415206425"><a name="en-us_topic_0000001062321291_p655415206425"></a><a name="en-us_topic_0000001062321291_p655415206425"></a>Initial status of the slidable panel. Available values are as follows:</p> 63<a name="en-us_topic_0000001062321291_ol6554220154216"></a><a name="en-us_topic_0000001062321291_ol6554220154216"></a><ol id="en-us_topic_0000001062321291_ol6554220154216"><li><p id="en-us_topic_0000001062321291_p12554520154216"><a name="en-us_topic_0000001062321291_p12554520154216"></a><a name="en-us_topic_0000001062321291_p12554520154216"></a><strong id="en-us_topic_0000001062321291_b13227603353"><a name="en-us_topic_0000001062321291_b13227603353"></a><a name="en-us_topic_0000001062321291_b13227603353"></a>mini</strong>: Displays a <strong id="en-us_topic_0000001062321291_b18230114212422"><a name="en-us_topic_0000001062321291_b18230114212422"></a><a name="en-us_topic_0000001062321291_b18230114212422"></a>minibar</strong> or <strong id="en-us_topic_0000001062321291_b3615459421"><a name="en-us_topic_0000001062321291_b3615459421"></a><a name="en-us_topic_0000001062321291_b3615459421"></a>foldable</strong> panel in its minimum size. This attribute does not take effect for <strong id="en-us_topic_0000001062321291_b65822124212"><a name="en-us_topic_0000001062321291_b65822124212"></a><a name="en-us_topic_0000001062321291_b65822124212"></a>temporary</strong> panels.</p> 64</li><li><p id="en-us_topic_0000001062321291_p1955422014218"><a name="en-us_topic_0000001062321291_p1955422014218"></a><a name="en-us_topic_0000001062321291_p1955422014218"></a><strong id="en-us_topic_0000001062321291_b7388181616411"><a name="en-us_topic_0000001062321291_b7388181616411"></a><a name="en-us_topic_0000001062321291_b7388181616411"></a>half</strong>: Displays a <strong id="en-us_topic_0000001062321291_b14130550104216"><a name="en-us_topic_0000001062321291_b14130550104216"></a><a name="en-us_topic_0000001062321291_b14130550104216"></a>foldable</strong> or <strong id="en-us_topic_0000001062321291_b1347545294213"><a name="en-us_topic_0000001062321291_b1347545294213"></a><a name="en-us_topic_0000001062321291_b1347545294213"></a>temporary</strong> panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for <strong id="en-us_topic_0000001062321291_b17461163424318"><a name="en-us_topic_0000001062321291_b17461163424318"></a><a name="en-us_topic_0000001062321291_b17461163424318"></a>minibar</strong> panels.</p> 65</li><li><p id="en-us_topic_0000001062321291_p15541020134214"><a name="en-us_topic_0000001062321291_p15541020134214"></a><a name="en-us_topic_0000001062321291_p15541020134214"></a><strong id="en-us_topic_0000001062321291_b56264913506"><a name="en-us_topic_0000001062321291_b56264913506"></a><a name="en-us_topic_0000001062321291_b56264913506"></a>full</strong>: Displays a panel in a large (fullscree-like) area.</p> 66</li></ol> 67</td> 68</tr> 69<tr id="en-us_topic_0000001062321291_row1213173154220"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_p855432019421"><a name="en-us_topic_0000001062321291_p855432019421"></a><a name="en-us_topic_0000001062321291_p855432019421"></a>dragbar</p> 70</td> 71<td class="cellrowborder" valign="top" width="23.169999999999998%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_p155482015422"><a name="en-us_topic_0000001062321291_p155482015422"></a><a name="en-us_topic_0000001062321291_p155482015422"></a>boolean</p> 72</td> 73<td class="cellrowborder" valign="top" width="10.43%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_p1955552064210"><a name="en-us_topic_0000001062321291_p1955552064210"></a><a name="en-us_topic_0000001062321291_p1955552064210"></a>true</p> 74</td> 75<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p755542024213"><a name="en-us_topic_0000001062321291_p755542024213"></a><a name="en-us_topic_0000001062321291_p755542024213"></a>No</p> 76</td> 77<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_p135551520114215"><a name="en-us_topic_0000001062321291_p135551520114215"></a><a name="en-us_topic_0000001062321291_p135551520114215"></a>Whether to enable a drag bar. The value <strong id="en-us_topic_0000001062321291_b899416435214"><a name="en-us_topic_0000001062321291_b899416435214"></a><a name="en-us_topic_0000001062321291_b899416435214"></a>true</strong> indicates that the drag bar will be displayed, and <strong id="en-us_topic_0000001062321291_b1834810239526"><a name="en-us_topic_0000001062321291_b1834810239526"></a><a name="en-us_topic_0000001062321291_b1834810239526"></a>false</strong> indicates the opposite.</p> 78</td> 79</tr> 80<tr id="en-us_topic_0000001062321291_row827211578416"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_p55550201428"><a name="en-us_topic_0000001062321291_p55550201428"></a><a name="en-us_topic_0000001062321291_p55550201428"></a>fullheight</p> 81</td> 82<td class="cellrowborder" valign="top" width="23.169999999999998%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_p2055572012425"><a name="en-us_topic_0000001062321291_p2055572012425"></a><a name="en-us_topic_0000001062321291_p2055572012425"></a><length></p> 83</td> 84<td class="cellrowborder" valign="top" width="10.43%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_p145551220104214"><a name="en-us_topic_0000001062321291_p145551220104214"></a><a name="en-us_topic_0000001062321291_p145551220104214"></a>-</p> 85</td> 86<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p1555182013429"><a name="en-us_topic_0000001062321291_p1555182013429"></a><a name="en-us_topic_0000001062321291_p1555182013429"></a>No</p> 87</td> 88<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_p16555102011423"><a name="en-us_topic_0000001062321291_p16555102011423"></a><a name="en-us_topic_0000001062321291_p16555102011423"></a>Panel height in the <strong id="en-us_topic_0000001062321291_b190616511539"><a name="en-us_topic_0000001062321291_b190616511539"></a><a name="en-us_topic_0000001062321291_b190616511539"></a>full</strong> mode. The default value is the screen height minus 8 px.</p> 89</td> 90</tr> 91<tr id="en-us_topic_0000001062321291_row9344751124116"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_p10555162017420"><a name="en-us_topic_0000001062321291_p10555162017420"></a><a name="en-us_topic_0000001062321291_p10555162017420"></a>halfheight</p> 92</td> 93<td class="cellrowborder" valign="top" width="23.169999999999998%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_p1055572011422"><a name="en-us_topic_0000001062321291_p1055572011422"></a><a name="en-us_topic_0000001062321291_p1055572011422"></a><length></p> 94</td> 95<td class="cellrowborder" valign="top" width="10.43%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_p19555192018423"><a name="en-us_topic_0000001062321291_p19555192018423"></a><a name="en-us_topic_0000001062321291_p19555192018423"></a>-</p> 96</td> 97<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p5555720134214"><a name="en-us_topic_0000001062321291_p5555720134214"></a><a name="en-us_topic_0000001062321291_p5555720134214"></a>No</p> 98</td> 99<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_p17555320194211"><a name="en-us_topic_0000001062321291_p17555320194211"></a><a name="en-us_topic_0000001062321291_p17555320194211"></a>Panel height in the <strong id="en-us_topic_0000001062321291_b360733265415"><a name="en-us_topic_0000001062321291_b360733265415"></a><a name="en-us_topic_0000001062321291_b360733265415"></a>half</strong> mode. The default value is half of the screen height.</p> 100</td> 101</tr> 102<tr id="en-us_topic_0000001062321291_row278634674117"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_p18556132014422"><a name="en-us_topic_0000001062321291_p18556132014422"></a><a name="en-us_topic_0000001062321291_p18556132014422"></a>miniheight</p> 103</td> 104<td class="cellrowborder" valign="top" width="23.169999999999998%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_p5556920194212"><a name="en-us_topic_0000001062321291_p5556920194212"></a><a name="en-us_topic_0000001062321291_p5556920194212"></a><length></p> 105</td> 106<td class="cellrowborder" valign="top" width="10.43%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_p15561207425"><a name="en-us_topic_0000001062321291_p15561207425"></a><a name="en-us_topic_0000001062321291_p15561207425"></a>-</p> 107</td> 108<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p55565208428"><a name="en-us_topic_0000001062321291_p55565208428"></a><a name="en-us_topic_0000001062321291_p55565208428"></a>No</p> 109</td> 110<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_p115561020164217"><a name="en-us_topic_0000001062321291_p115561020164217"></a><a name="en-us_topic_0000001062321291_p115561020164217"></a>Panel height in the <strong id="en-us_topic_0000001062321291_b634712315173"><a name="en-us_topic_0000001062321291_b634712315173"></a><a name="en-us_topic_0000001062321291_b634712315173"></a>mini</strong> mode. The default value is <strong id="en-us_topic_0000001062321291_b1170192112410"><a name="en-us_topic_0000001062321291_b1170192112410"></a><a name="en-us_topic_0000001062321291_b1170192112410"></a>48px</strong>.</p> 111</td> 112</tr> 113<tr id="en-us_topic_0000001062321291_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a>id</p> 114</td> 115<td class="cellrowborder" valign="top" width="23.169999999999998%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a>string</p> 116</td> 117<td class="cellrowborder" valign="top" width="10.43%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a>-</p> 118</td> 119<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p42461736102118"><a name="en-us_topic_0000001062321291_p42461736102118"></a><a name="en-us_topic_0000001062321291_p42461736102118"></a>No</p> 120</td> 121<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a>Unique ID of a component.</p> 122</td> 123</tr> 124<tr id="en-us_topic_0000001062321291_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a>style</p> 125</td> 126<td class="cellrowborder" valign="top" width="23.169999999999998%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a>string</p> 127</td> 128<td class="cellrowborder" valign="top" width="10.43%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a>-</p> 129</td> 130<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p17246836142119"><a name="en-us_topic_0000001062321291_p17246836142119"></a><a name="en-us_topic_0000001062321291_p17246836142119"></a>No</p> 131</td> 132<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a>Style declaration of a component.</p> 133</td> 134</tr> 135<tr id="en-us_topic_0000001062321291_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a>class</p> 136</td> 137<td class="cellrowborder" valign="top" width="23.169999999999998%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a>string</p> 138</td> 139<td class="cellrowborder" valign="top" width="10.43%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a>-</p> 140</td> 141<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p324614367213"><a name="en-us_topic_0000001062321291_p324614367213"></a><a name="en-us_topic_0000001062321291_p324614367213"></a>No</p> 142</td> 143<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"></a>Style class of a component, which is used to refer to a style table.</p> 144</td> 145</tr> 146<tr id="en-us_topic_0000001062321291_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_p1786251117156"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_p1786251117156"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_p1786251117156"></a>ref</p> 147</td> 148<td class="cellrowborder" valign="top" width="23.169999999999998%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_p1086241119157"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_p1086241119157"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_p1086241119157"></a>string</p> 149</td> 150<td class="cellrowborder" valign="top" width="10.43%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_p586281111151"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_p586281111151"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_p586281111151"></a>-</p> 151</td> 152<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p1624612362219"><a name="en-us_topic_0000001062321291_p1624612362219"></a><a name="en-us_topic_0000001062321291_p1624612362219"></a>No</p> 153</td> 154<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_p113416153342"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_p113416153342"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_ph5815920163518"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_ph5815920163518"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_ph5815920163518"></a> or child components</span>. The reference information is registered with the parent component on <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_b08212202354"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_b08212202354"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_b08212202354"></a>$refs</strong>.</p> 155</td> 156</tr> 157<tr id="en-us_topic_0000001062321291_row1263451617236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a>data</p> 158</td> 159<td class="cellrowborder" valign="top" width="23.169999999999998%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a>string</p> 160</td> 161<td class="cellrowborder" valign="top" width="10.43%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a>-</p> 162</td> 163<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p22471736132114"><a name="en-us_topic_0000001062321291_p22471736132114"></a><a name="en-us_topic_0000001062321291_p22471736132114"></a>No</p> 164</td> 165<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a>Attribute set for components to facilitate data storage and reading.</p> 166</td> 167</tr> 168</tbody> 169</table> 170 171> **NOTE:** 172>Currently, the **<panel\>** component does not support rendering attributes, including **for**, **if**, and **show**. 173 174## Style<a name="en-us_topic_0000001062321291_section1137118175437"></a> 175 176<a name="en-us_topic_0000001062321291_table1744514388541"></a> 177<table><thead align="left"><tr id="en-us_topic_0000001062321291_row1244614388545"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"></a>Name</p> 178</th> 179<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"></a>Type</p> 180</th> 181<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"></a>Default Value</p> 182</th> 183<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001062321291_p117421754619"><a name="en-us_topic_0000001062321291_p117421754619"></a><a name="en-us_topic_0000001062321291_p117421754619"></a>Mandatory</p> 184</th> 185<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"></a>Description</p> 186</th> 187</tr> 188</thead> 189<tbody><tr id="en-us_topic_0000001062321291_row18446638145412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1088mcpsimp"></a>padding</p> 190</td> 191<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1090mcpsimp"></a><length></p> 192</td> 193<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1092mcpsimp"></a>0</p> 194</td> 195<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p19729127112814"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p19729127112814"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p19729127112814"></a>No</p> 196</td> 197<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><div class="p" id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1094mcpsimp"></a>The attribute can have one to four values:<a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul15202134923211"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul15202134923211"></a><ul id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul15202134923211"><li><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p10614155353215"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p10614155353215"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p10614155353215"></a>If you set only one value, it specifies the padding for four sides.</p> 198</li><li><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p10614175393216"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p10614175393216"></a><a name="en-us_topic_0000001062321291_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> 199</li><li><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p8614205393214"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p8614205393214"></a><a name="en-us_topic_0000001062321291_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> 200</li><li><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p106141853193215"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p106141853193215"></a><a name="en-us_topic_0000001062321291_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> 201</li></ul> 202</div> 203</td> 204</tr> 205<tr id="en-us_topic_0000001062321291_row24464380544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1097mcpsimp"></a>padding-[left|top|right|bottom]</p> 206</td> 207<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1099mcpsimp"></a><length></p> 208</td> 209<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1101mcpsimp"></a>0</p> 210</td> 211<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p11729374289"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p11729374289"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p11729374289"></a>No</p> 212</td> 213<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1103mcpsimp"></a>Left, top, right, and bottom padding (in px).</p> 214</td> 215</tr> 216<tr id="en-us_topic_0000001062321291_row1144723845412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p769124717365"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p769124717365"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p769124717365"></a>padding-[start|end]</p> 217</td> 218<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p157617124374"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p157617124374"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p157617124374"></a><length></p> 219</td> 220<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1069144703616"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1069144703616"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1069144703616"></a>0</p> 221</td> 222<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1373027182819"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1373027182819"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1373027182819"></a>No</p> 223</td> 224<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1269184753610"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1269184753610"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1269184753610"></a>Start and end padding.</p> 225</td> 226</tr> 227<tr id="en-us_topic_0000001062321291_row11447438175410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1106mcpsimp"></a>margin</p> 228</td> 229<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1108mcpsimp"></a><length></p> 230</td> 231<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1110mcpsimp"></a>0</p> 232</td> 233<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p4730774285"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p4730774285"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p4730774285"></a>No</p> 234</td> 235<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1112mcpsimp"></a><a name="en-us_topic_0000001062321291_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> 236<a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul5333133311105"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul5333133311105"></a><ul id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul5333133311105"><li><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p03345339103"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p03345339103"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p03345339103"></a>If you set only one value, it specifies the margin for all the four sides.</p> 237</li><li><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1133420334108"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1133420334108"></a><a name="en-us_topic_0000001062321291_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> 238</li><li><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p193341533191015"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p193341533191015"></a><a name="en-us_topic_0000001062321291_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> 239</li><li><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p733412334102"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p733412334102"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p733412334102"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p> 240</li></ul> 241</td> 242</tr> 243<tr id="en-us_topic_0000001062321291_row144473383544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1115mcpsimp"></a>margin-[left|top|right|bottom]</p> 244</td> 245<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1117mcpsimp"></a><length></p> 246</td> 247<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1119mcpsimp"></a>0</p> 248</td> 249<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p773013742811"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p773013742811"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p773013742811"></a>No</p> 250</td> 251<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1121mcpsimp"></a>Left, top, right, and bottom margins.</p> 252</td> 253</tr> 254<tr id="en-us_topic_0000001062321291_row944743811541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p9492107123816"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p9492107123816"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p9492107123816"></a>margin-[start|end]</p> 255</td> 256<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p157617124374_1"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p157617124374_1"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p157617124374_1"></a><length></p> 257</td> 258<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1549213793811"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1549213793811"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1549213793811"></a>0</p> 259</td> 260<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p117511744618"><a name="en-us_topic_0000001062321291_p117511744618"></a><a name="en-us_topic_0000001062321291_p117511744618"></a>No</p> 261</td> 262<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1049212715388"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1049212715388"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1049212715388"></a>Start and end margins.</p> 263</td> 264</tr> 265<tr id="en-us_topic_0000001062321291_row16447238155411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1124mcpsimp"></a>border</p> 266</td> 267<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1126mcpsimp"></a>-</p> 268</td> 269<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1128mcpsimp"></a>0</p> 270</td> 271<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p11175131715467"><a name="en-us_topic_0000001062321291_p11175131715467"></a><a name="en-us_topic_0000001062321291_p11175131715467"></a>No</p> 272</td> 273<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1130mcpsimp"></a>Shorthand attribute to set all borders. You can set <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b79128342503"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b79128342503"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b79128342503"></a>border-width</strong>, <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b9366173919505"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b9366173919505"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b9366173919505"></a>border-style</strong>, and <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b184351248205019"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b184351248205019"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b184351248205019"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 274</td> 275</tr> 276<tr id="en-us_topic_0000001062321291_row4447138115414"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1133mcpsimp"></a>border-style</p> 277</td> 278<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p513631613319"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p513631613319"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p513631613319"></a>string</p> 279</td> 280<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1137mcpsimp"></a>solid</p> 281</td> 282<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p617531717464"><a name="en-us_topic_0000001062321291_p617531717464"></a><a name="en-us_topic_0000001062321291_p617531717464"></a>No</p> 283</td> 284<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p342285712314"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p342285712314"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p342285712314"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p> 285<a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul1470834505612"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul1470834505612"></a><ul id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul1470834505612"><li><strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b143453286360"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b143453286360"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b143453286360"></a>dotted</strong>: Dotted border. The radius of a dot is half of border-width.</li><li><strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b792117280367"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b792117280367"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b792117280367"></a>dashed</strong>: Dashed border</li></ul> 286<a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul15621125545612"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul15621125545612"></a><ul id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul15621125545612"><li><strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1335862963610"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1335862963610"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1335862963610"></a>solid</strong>: Solid border</li></ul> 287</td> 288</tr> 289<tr id="en-us_topic_0000001062321291_row1656512239262"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p119531437370"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p119531437370"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p119531437370"></a>border-[left|top|right|bottom]-style</p> 290</td> 291<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p129532037175"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p129532037175"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p129532037175"></a>string</p> 292</td> 293<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p495312372717"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p495312372717"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p495312372717"></a>solid</p> 294</td> 295<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p169534375717"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p169534375717"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p169534375717"></a>No</p> 296</td> 297<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p595353718719"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p595353718719"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p595353718719"></a>Styles of the left, top, right, and bottom borders. The available values are <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b17769171311540"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b17769171311540"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b17769171311540"></a>dotted</strong>, <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b237141519547"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b237141519547"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b237141519547"></a>dashed</strong>, and <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b8949161613540"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b8949161613540"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b8949161613540"></a>solid</strong>.</p> 298</td> 299</tr> 300<tr id="en-us_topic_0000001062321291_row19448113811542"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1142mcpsimp"></a>border-[left|top|right|bottom]</p> 301</td> 302<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1144mcpsimp"></a>-</p> 303</td> 304<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1146mcpsimp"></a>-</p> 305</td> 306<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p67303762810"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p67303762810"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p67303762810"></a>No</p> 307</td> 308<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1148mcpsimp"></a>Shorthand attribute to set the borders for every side respectively. You can set <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b122415514554"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b122415514554"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b122415514554"></a>border-width</strong>, <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b12296178135513"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b12296178135513"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b12296178135513"></a>border-style</strong>, and <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1129701210553"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1129701210553"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1129701210553"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p> 309</td> 310</tr> 311<tr id="en-us_topic_0000001062321291_row124481638165417"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1151mcpsimp"></a>border-width</p> 312</td> 313<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1153mcpsimp"></a><length></p> 314</td> 315<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1155mcpsimp"></a>0</p> 316</td> 317<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p16175131724618"><a name="en-us_topic_0000001062321291_p16175131724618"></a><a name="en-us_topic_0000001062321291_p16175131724618"></a>No</p> 318</td> 319<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1157mcpsimp"></a>Shorthand attribute to set the width of all borders<span id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ph07997369365"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ph07997369365"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ph07997369365"></a>, or separately set the width of each border</span>.</p> 320</td> 321</tr> 322<tr id="en-us_topic_0000001062321291_row54481038165410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1160mcpsimp"></a>border-[left|top|right|bottom]-width</p> 323</td> 324<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1162mcpsimp"></a><length></p> 325</td> 326<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1164mcpsimp"></a>0</p> 327</td> 328<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p11175151717466"><a name="en-us_topic_0000001062321291_p11175151717466"></a><a name="en-us_topic_0000001062321291_p11175151717466"></a>No</p> 329</td> 330<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1166mcpsimp"></a>Attribute to set widths of left, top, right, and bottom borders.</p> 331</td> 332</tr> 333<tr id="en-us_topic_0000001062321291_row1744817385547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1169mcpsimp"></a>border-color</p> 334</td> 335<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1171mcpsimp"></a><color></p> 336</td> 337<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1173mcpsimp"></a>black</p> 338</td> 339<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p1017518177465"><a name="en-us_topic_0000001062321291_p1017518177465"></a><a name="en-us_topic_0000001062321291_p1017518177465"></a>No</p> 340</td> 341<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1175mcpsimp"></a>Shorthand attribute to set the color of all borders<span id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ph9587639113619"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ph9587639113619"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ph9587639113619"></a>, or separately set the color of each border</span>.</p> 342</td> 343</tr> 344<tr id="en-us_topic_0000001062321291_row844813835410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1178mcpsimp"></a>border-[left|top|right|bottom]-color</p> 345</td> 346<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1180mcpsimp"></a><color></p> 347</td> 348<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1182mcpsimp"></a>black</p> 349</td> 350<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_p11175417184611"><a name="en-us_topic_0000001062321291_p11175417184611"></a><a name="en-us_topic_0000001062321291_p11175417184611"></a>No</p> 351</td> 352<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1184mcpsimp"></a>Attribute to set colors of left, top, right, and bottom borders.</p> 353</td> 354</tr> 355<tr id="en-us_topic_0000001062321291_row944813389540"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1187mcpsimp"></a>border-radius</p> 356</td> 357<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1189mcpsimp"></a><length></p> 358</td> 359<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1191mcpsimp"></a>-</p> 360</td> 361<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p67306752816"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p67306752816"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p67306752816"></a>No</p> 362</td> 363<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p18998933174117"></a>Attribute to set the radius of round borders of an element. <span id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ph1249443123611"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ph1249443123611"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ph1249443123611"></a>This attribute cannot be used to set the width or color of a specific border. To set the width or color, you need to set <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b124211434362"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b124211434362"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b124211434362"></a>border-width</strong> or <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b124894383615"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b124894383615"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b124894383615"></a>border-color</strong> for all the borders at the same time.</span></p> 364</td> 365</tr> 366<tr id="en-us_topic_0000001062321291_row104494382546"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1198mcpsimp"></a>border-[top|bottom]-[left|right]-radius</p> 367</td> 368<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1200mcpsimp"></a><length></p> 369</td> 370<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1202mcpsimp"></a>-</p> 371</td> 372<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p27305718283"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p27305718283"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p27305718283"></a>No</p> 373</td> 374<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1204mcpsimp"></a>Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners</p> 375</td> 376</tr> 377<tr id="en-us_topic_0000001062321291_row1344912384548"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a>background</p> 378</td> 379<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a><linear-gradient></p> 380</td> 381<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a>-</p> 382</td> 383<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p15730197132811"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p15730197132811"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p15730197132811"></a>No</p> 384</td> 385<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1213mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1213mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1213mcpsimp"></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_0000001062321291_b10695758175019"><a name="en-us_topic_0000001062321291_b10695758175019"></a><a name="en-us_topic_0000001062321291_b10695758175019"></a>background-color</strong> or <strong id="en-us_topic_0000001062321291_b1369505895010"><a name="en-us_topic_0000001062321291_b1369505895010"></a><a name="en-us_topic_0000001062321291_b1369505895010"></a>background-image</strong>.</p> 386</td> 387</tr> 388<tr id="en-us_topic_0000001062321291_row15449838185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a>background-color</p> 389</td> 390<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a><color></p> 391</td> 392<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a>-</p> 393</td> 394<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p17730577282"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p17730577282"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p17730577282"></a>No</p> 395</td> 396<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a>Background color.</p> 397</td> 398</tr> 399<tr id="en-us_topic_0000001062321291_row54491338115412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a>background-image</p> 400</td> 401<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a>string</p> 402</td> 403<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a>-</p> 404</td> 405<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p7730976285"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p7730976285"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p7730976285"></a>No</p> 406</td> 407<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b17699154763620"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b17699154763620"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b17699154763620"></a>background-color</strong> or <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b87001647163613"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b87001647163613"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b87001647163613"></a>background</strong>. Both Internet and local image resources are supported.</p> 408</td> 409</tr> 410<tr id="en-us_topic_0000001062321291_row6449238185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a>background-size</p> 411</td> 412<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul1065173641310"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul1065173641310"></a><ul id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul1065173641310"><li>string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 413</td> 414<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a>auto</p> 415</td> 416<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p137309714282"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p137309714282"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p137309714282"></a>No</p> 417</td> 418<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p91971112114318"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p91971112114318"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p91971112114318"></a>Background image size.</p> 419<a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul41331853154111"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul41331853154111"></a><ul id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul41331853154111"><li>The <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1229715499365"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1229715499365"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1229715499365"></a>string</strong> values are as follows:<a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul13611494111"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul13611494111"></a><ul id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul13611494111"><li><strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b4759749163610"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b4759749163610"></a><a name="en-us_topic_0000001062321291_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_0000001062321291_en-us_topic_0000001050791158_b136485011365"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b136485011365"></a><a name="en-us_topic_0000001062321291_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_0000001062321291_en-us_topic_0000001050791158_b1425512535366"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1425512535366"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1425512535366"></a>auto</strong>: The original image width-height ratio is retained.</li></ul> 420</li><li>The two <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b13309145193614"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b13309145193614"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b13309145193614"></a><length></strong> values are as follows:<p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1840244924418"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1840244924418"></a><a name="en-us_topic_0000001062321291_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_0000001062321291_en-us_topic_0000001050791158_b146661156143617"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b146661156143617"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b146661156143617"></a>auto</strong> by default.</p> 421</li><li>The two <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1667415763613"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1667415763613"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1667415763613"></a><percentage></strong> values are as follows:<p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p17936154410457"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p17936154410457"></a><a name="en-us_topic_0000001062321291_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_0000001062321291_en-us_topic_0000001050791158_b17190164371"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b17190164371"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b17190164371"></a>auto</strong> by default.</p> 422</li></ul> 423</td> 424</tr> 425<tr id="en-us_topic_0000001062321291_row94491238155415"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a>background-repeat</p> 426</td> 427<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a>string</p> 428</td> 429<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a>repeat</p> 430</td> 431<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1673015702810"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1673015702810"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1673015702810"></a>No</p> 432</td> 433<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"></a><a name="en-us_topic_0000001062321291_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> 434<a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul8236153103612"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul8236153103612"></a><ul id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul8236153103612"><li><strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1363463710"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1363463710"></a><a name="en-us_topic_0000001062321291_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_0000001062321291_en-us_topic_0000001050791158_b267416916377"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b267416916377"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b267416916377"></a>repeat-x</strong>: Draws images along the x-axis.</li><li><strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b625561011379"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b625561011379"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b625561011379"></a>repeat-y</strong>: Draws images along the y-axis.</li><li><strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1122181133715"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1122181133715"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1122181133715"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul> 435</td> 436</tr> 437<tr id="en-us_topic_0000001062321291_row94491738105419"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a>background-position</p> 438</td> 439<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul8874155216502"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul8874155216502"></a><ul id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul8874155216502"><li>string string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 440</td> 441<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a>0px 0px</p> 442</td> 443<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p173010720280"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p173010720280"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p173010720280"></a>No</p> 444</td> 445<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul1590812103363"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul1590812103363"></a><ul id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b997011116376"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b997011116376"></a><a name="en-us_topic_0000001062321291_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_0000001062321291_en-us_topic_0000001050791158_ul1453531734716"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul1453531734716"></a><ul id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul1453531734716"><li><strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b0982111273712"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b0982111273712"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b0982111273712"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b866713583912"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b866713583912"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b866713583912"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b5886013193716"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b5886013193716"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b5886013193716"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b84197142376"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b84197142376"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b84197142376"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b14894114103710"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b14894114103710"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b14894114103710"></a>center</strong>: center position</li></ul> 446</li></ul> 447<a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul10908121023615"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul10908121023615"></a><ul id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_ul10908121023615"><li>Using <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b11401615193715"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b11401615193715"></a><a name="en-us_topic_0000001062321291_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_0000001062321291_en-us_topic_0000001050791158_b1341381819379"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1341381819379"></a><a name="en-us_topic_0000001062321291_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_0000001062321291_en-us_topic_0000001050791158_b48671516183714"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b48671516183714"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b48671516183714"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b5492717163712"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b5492717163712"></a><a name="en-us_topic_0000001062321291_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_0000001062321291_en-us_topic_0000001050791158_b164741723183712"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b164741723183712"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b164741723183712"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b64022245377"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b64022245377"></a><a name="en-us_topic_0000001062321291_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_0000001062321291_en-us_topic_0000001050791158_b7893424163718"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b7893424163718"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b7893424163718"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b154811725193718"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b154811725193718"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b154811725193718"></a><percentage></strong> and <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b34834254377"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b34834254377"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b34834254377"></a><length></strong>.</li></ul> 448</td> 449</tr> 450<tr id="en-us_topic_0000001062321291_row20450143885416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p134581712103910"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p134581712103910"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p134581712103910"></a>opacity</p> 451</td> 452<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a>number</p> 453</td> 454<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a>1</p> 455</td> 456<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1873011722814"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1873011722814"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p1873011722814"></a>No</p> 457</td> 458<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p122515161139"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p122515161139"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1871715526385"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1871715526385"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b1871715526385"></a>0</strong> to <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b177181452103815"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b177181452103815"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b177181452103815"></a>1</strong>. The value <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b13718155210380"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b13718155210380"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b13718155210380"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b6718152103818"><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b6718152103818"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001050791158_b6718152103818"></a>0</strong> means completely transparent.</p> 459</td> 460</tr> 461</tbody> 462</table> 463 464## Event<a name="en-us_topic_0000001062321291_section1614413538447"></a> 465 466<a name="en-us_topic_0000001062321291_table836435619510"></a> 467<table><thead align="left"><tr id="en-us_topic_0000001062321291_row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001062321291_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p619mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p619mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p619mcpsimp"></a>Name</p> 468</th> 469<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001062321291_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p621mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p621mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p621mcpsimp"></a>Parameter</p> 470</th> 471<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001062321291_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p623mcpsimp"><a name="en-us_topic_0000001062321291_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p623mcpsimp"></a><a name="en-us_topic_0000001062321291_en-us_topic_0000001051151132_en-us_topic_0000000000611460_p623mcpsimp"></a>Description</p> 472</th> 473</tr> 474</thead> 475<tbody><tr id="en-us_topic_0000001062321291_row0576209174715"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001062321291_p1652031354715"><a name="en-us_topic_0000001062321291_p1652031354715"></a><a name="en-us_topic_0000001062321291_p1652031354715"></a>sizechange</p> 476</td> 477<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001062321291_p2520913204711"><a name="en-us_topic_0000001062321291_p2520913204711"></a><a name="en-us_topic_0000001062321291_p2520913204711"></a>{ size: { height: heightLength, width: widthLength }, mode: modeStr }</p> 478</td> 479<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001062321291_p8520101364714"><a name="en-us_topic_0000001062321291_p8520101364714"></a><a name="en-us_topic_0000001062321291_p8520101364714"></a>Triggered when the status of the slidable panel changes. Available <strong id="en-us_topic_0000001062321291_b122905111282"><a name="en-us_topic_0000001062321291_b122905111282"></a><a name="en-us_topic_0000001062321291_b122905111282"></a>mode</strong> values are as follows:</p> 480<a name="en-us_topic_0000001062321291_ol5520181316476"></a><a name="en-us_topic_0000001062321291_ol5520181316476"></a><ol id="en-us_topic_0000001062321291_ol5520181316476"><li><p id="en-us_topic_0000001062321291_p4520141364713"><a name="en-us_topic_0000001062321291_p4520141364713"></a><a name="en-us_topic_0000001062321291_p4520141364713"></a><strong id="en-us_topic_0000001062321291_b45816387277"><a name="en-us_topic_0000001062321291_b45816387277"></a><a name="en-us_topic_0000001062321291_b45816387277"></a>mini</strong>: Displays a <strong id="en-us_topic_0000001062321291_b10542195774416"><a name="en-us_topic_0000001062321291_b10542195774416"></a><a name="en-us_topic_0000001062321291_b10542195774416"></a>minibar</strong> or <strong id="en-us_topic_0000001062321291_b134141855164411"><a name="en-us_topic_0000001062321291_b134141855164411"></a><a name="en-us_topic_0000001062321291_b134141855164411"></a>foldable</strong> panel in its minimum size.</p> 481</li><li><p id="en-us_topic_0000001062321291_p6520191324711"><a name="en-us_topic_0000001062321291_p6520191324711"></a><a name="en-us_topic_0000001062321291_p6520191324711"></a><strong id="en-us_topic_0000001062321291_b2065484932810"><a name="en-us_topic_0000001062321291_b2065484932810"></a><a name="en-us_topic_0000001062321291_b2065484932810"></a>half</strong>: Displays a <strong id="en-us_topic_0000001062321291_b166951703457"><a name="en-us_topic_0000001062321291_b166951703457"></a><a name="en-us_topic_0000001062321291_b166951703457"></a>foldable</strong> panel in a medium-sized (halfscreen-like) area.</p> 482</li><li><p id="en-us_topic_0000001062321291_p252018137477"><a name="en-us_topic_0000001062321291_p252018137477"></a><a name="en-us_topic_0000001062321291_p252018137477"></a><strong id="en-us_topic_0000001062321291_b1696104211503"><a name="en-us_topic_0000001062321291_b1696104211503"></a><a name="en-us_topic_0000001062321291_b1696104211503"></a>full</strong>: Displays a panel in a large (fullscreen-like) area.</p> 483<div class="note" id="en-us_topic_0000001062321291_note1672712533287"><a name="en-us_topic_0000001062321291_note1672712533287"></a><a name="en-us_topic_0000001062321291_note1672712533287"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001062321291_p1672795314285"><a name="en-us_topic_0000001062321291_p1672795314285"></a><a name="en-us_topic_0000001062321291_p1672795314285"></a>The returned <strong id="en-us_topic_0000001062321291_b17504232153714"><a name="en-us_topic_0000001062321291_b17504232153714"></a><a name="en-us_topic_0000001062321291_b17504232153714"></a>height</strong> value indicates the content area height. However, when the <strong id="en-us_topic_0000001062321291_b6111851103715"><a name="en-us_topic_0000001062321291_b6111851103715"></a><a name="en-us_topic_0000001062321291_b6111851103715"></a>dragbar</strong> attribute is <strong id="en-us_topic_0000001062321291_b1019713539372"><a name="en-us_topic_0000001062321291_b1019713539372"></a><a name="en-us_topic_0000001062321291_b1019713539372"></a>true</strong>, the <strong id="en-us_topic_0000001062321291_b21622103812"><a name="en-us_topic_0000001062321291_b21622103812"></a><a name="en-us_topic_0000001062321291_b21622103812"></a>height</strong> value is the height of the drag bar plus that of the content area.</p> 484</div></div> 485</li></ol> 486</td> 487</tr> 488</tbody> 489</table> 490 491## Method<a name="en-us_topic_0000001062321291_section165301745164719"></a> 492 493<a name="en-us_topic_0000001062321291_table20753173210251"></a> 494<table><thead align="left"><tr id="en-us_topic_0000001062321291_row575363214257"><th class="cellrowborder" valign="top" width="18.459999999999997%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001062321291_p157531032112517"><a name="en-us_topic_0000001062321291_p157531032112517"></a><a name="en-us_topic_0000001062321291_p157531032112517"></a>Name</p> 495</th> 496<th class="cellrowborder" valign="top" width="30.769999999999996%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001062321291_p77531632132518"><a name="en-us_topic_0000001062321291_p77531632132518"></a><a name="en-us_topic_0000001062321291_p77531632132518"></a>Parameter</p> 497</th> 498<th class="cellrowborder" valign="top" width="50.77%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001062321291_p147531232132512"><a name="en-us_topic_0000001062321291_p147531232132512"></a><a name="en-us_topic_0000001062321291_p147531232132512"></a>Description</p> 499</th> 500</tr> 501</thead> 502<tbody><tr id="en-us_topic_0000001062321291_row15753113210251"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001062321291_p2314135812511"><a name="en-us_topic_0000001062321291_p2314135812511"></a><a name="en-us_topic_0000001062321291_p2314135812511"></a>show</p> 503</td> 504<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001062321291_p7314115819256"><a name="en-us_topic_0000001062321291_p7314115819256"></a><a name="en-us_topic_0000001062321291_p7314115819256"></a>-</p> 505</td> 506<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001062321291_p0314958162512"><a name="en-us_topic_0000001062321291_p0314958162512"></a><a name="en-us_topic_0000001062321291_p0314958162512"></a>Pops the slidable panel up.</p> 507</td> 508</tr> 509<tr id="en-us_topic_0000001062321291_row393410526251"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001062321291_p7314358182512"><a name="en-us_topic_0000001062321291_p7314358182512"></a><a name="en-us_topic_0000001062321291_p7314358182512"></a>close</p> 510</td> 511<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001062321291_p1231455814253"><a name="en-us_topic_0000001062321291_p1231455814253"></a><a name="en-us_topic_0000001062321291_p1231455814253"></a>-</p> 512</td> 513<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001062321291_p10314105842512"><a name="en-us_topic_0000001062321291_p10314105842512"></a><a name="en-us_topic_0000001062321291_p10314105842512"></a>Closes the slidable panel that has been popped up.</p> 514</td> 515</tr> 516</tbody> 517</table> 518 519## Example Code<a name="en-us_topic_0000001062321291_section36743614499"></a> 520 521``` 522<!-- xxx.hml --> 523<div class="doc-page"> 524 <div class="btn-div"> 525 <button type="capsule" value="Click here" onclick="showPanel"></button> 526 </div> 527 <panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px"> 528 <div class="panel-div"> 529 <div class="inner-txt"> 530 <text class="txt">Simple panel in {{modeFlag}} mode</text> 531 </div> 532 <div class="inner-btn"> 533 <button type="capsule" value="Close" onclick="closePanel"></button> 534 </div> 535 </div> 536 </panel> 537</div> 538``` 539 540``` 541/* xxx.css */ 542.doc-page { 543 flex-direction: column; 544 justify-content: center; 545 align-items: center; 546} 547.btn-div { 548 width: 100%; 549 height: 200px; 550 flex-direction: column; 551 align-items: center; 552 justify-content: center; 553} 554.txt { 555 color: #000000; 556 font-weight: bold; 557 font-size: 39px; 558} 559.panel-div { 560 width: 100%; 561 flex-direction: column; 562 align-items: center; 563} 564.inner-txt { 565 width: 100%; 566 height: 160px; 567 flex-direction: column; 568 align-items: center; 569 justify-content: center; 570} 571.inner-btn { 572 width: 100%; 573 height: 120px; 574 justify-content: center; 575 align-items: center; 576} 577``` 578 579``` 580// xxx.js 581export default { 582 data: { 583 modeFlag: "half" 584 }, 585 showPanel(e) { 586 this.$element('simplepanel').show() 587 }, 588 closePanel(e) { 589 this.$element('simplepanel').close() 590 }, 591 changeMode(e) { 592 this.modeFlag = e.mode 593 } 594} 595``` 596 597 598 599
