1# toolbar-item<a name="EN-US_TOPIC_0000001162414635"></a> 2 3- [Permission List](#en-us_topic_0000001061931453_section11257113618419) 4- [Child Component](#en-us_topic_0000001061931453_section9288143101012) 5- [Attribute](#en-us_topic_0000001061931453_section19217161499) 6- [Style](#en-us_topic_0000001061931453_section184493015533) 7- [Event](#en-us_topic_0000001061931453_section571865310552) 8- [Method](#en-us_topic_0000001061931453_section568225514199) 9- [Example Code](#en-us_topic_0000001061931453_section1240714821316) 10 11The **<toolbar-item\>** component displays an operation option on the toolbar. This component is the child component of **<toolbar\>**. 12 13> **NOTE:** 14>This component is supported since API version 5. 15 16## Permission List<a name="en-us_topic_0000001061931453_section11257113618419"></a> 17 18None 19 20## Child Component<a name="en-us_topic_0000001061931453_section9288143101012"></a> 21 22None 23 24## Attribute<a name="en-us_topic_0000001061931453_section19217161499"></a> 25 26<a name="en-us_topic_0000001061931453_table20633101642315"></a> 27<table><thead align="left"><tr id="en-us_topic_0000001061931453_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p942mcpsimp"></a>Name</p> 28</th> 29<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p944mcpsimp"></a>Type</p> 30</th> 31<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p946mcpsimp"></a><a name="en-us_topic_0000001061931453_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_0000001061931453_p824610360217"><a name="en-us_topic_0000001061931453_p824610360217"></a><a name="en-us_topic_0000001061931453_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_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p948mcpsimp"></a><a name="en-us_topic_0000001061931453_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_0000001061931453_row1745453714917"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_p1345453714498"><a name="en-us_topic_0000001061931453_p1345453714498"></a><a name="en-us_topic_0000001061931453_p1345453714498"></a>value</p> 40</td> 41<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_p8454537164910"><a name="en-us_topic_0000001061931453_p8454537164910"></a><a name="en-us_topic_0000001061931453_p8454537164910"></a>string</p> 42</td> 43<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_p645511377498"><a name="en-us_topic_0000001061931453_p645511377498"></a><a name="en-us_topic_0000001061931453_p645511377498"></a>-</p> 44</td> 45<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p10455637114917"><a name="en-us_topic_0000001061931453_p10455637114917"></a><a name="en-us_topic_0000001061931453_p10455637114917"></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_0000001061931453_p18883831183010"><a name="en-us_topic_0000001061931453_p18883831183010"></a><a name="en-us_topic_0000001061931453_p18883831183010"></a>Text content of the operation option.</p> 48</td> 49</tr> 50<tr id="en-us_topic_0000001061931453_row1937143418494"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_p15372163494913"><a name="en-us_topic_0000001061931453_p15372163494913"></a><a name="en-us_topic_0000001061931453_p15372163494913"></a>icon</p> 51</td> 52<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_p13726344494"><a name="en-us_topic_0000001061931453_p13726344494"></a><a name="en-us_topic_0000001061931453_p13726344494"></a>string</p> 53</td> 54<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_p937223417498"><a name="en-us_topic_0000001061931453_p937223417498"></a><a name="en-us_topic_0000001061931453_p937223417498"></a>-</p> 55</td> 56<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p19372183413493"><a name="en-us_topic_0000001061931453_p19372183413493"></a><a name="en-us_topic_0000001061931453_p19372183413493"></a>Yes</p> 57</td> 58<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_p837212344498"><a name="en-us_topic_0000001061931453_p837212344498"></a><a name="en-us_topic_0000001061931453_p837212344498"></a>Icon image path, which is displayed on the option text. The value can be a local path. Supported image formats are PNG, JPG, and SVG.</p> 59</td> 60</tr> 61<tr id="en-us_topic_0000001061931453_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p952mcpsimp"></a>id</p> 62</td> 63<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p954mcpsimp"></a>string</p> 64</td> 65<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p956mcpsimp"></a>-</p> 66</td> 67<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p42461736102118"><a name="en-us_topic_0000001061931453_p42461736102118"></a><a name="en-us_topic_0000001061931453_p42461736102118"></a>No</p> 68</td> 69<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p958mcpsimp"></a>Unique ID of a component.</p> 70</td> 71</tr> 72<tr id="en-us_topic_0000001061931453_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p961mcpsimp"></a>style</p> 73</td> 74<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p963mcpsimp"></a>string</p> 75</td> 76<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p965mcpsimp"></a>-</p> 77</td> 78<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p17246836142119"><a name="en-us_topic_0000001061931453_p17246836142119"></a><a name="en-us_topic_0000001061931453_p17246836142119"></a>No</p> 79</td> 80<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p967mcpsimp"></a>Style declaration of a component.</p> 81</td> 82</tr> 83<tr id="en-us_topic_0000001061931453_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p970mcpsimp"></a>class</p> 84</td> 85<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p972mcpsimp"></a>string</p> 86</td> 87<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p974mcpsimp"></a>-</p> 88</td> 89<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p324614367213"><a name="en-us_topic_0000001061931453_p324614367213"></a><a name="en-us_topic_0000001061931453_p324614367213"></a>No</p> 90</td> 91<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p976mcpsimp"></a><a name="en-us_topic_0000001061931453_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> 92</td> 93</tr> 94<tr id="en-us_topic_0000001061931453_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_p1786251117156"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_p1786251117156"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_p1786251117156"></a>ref</p> 95</td> 96<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_p1086241119157"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_p1086241119157"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_p1086241119157"></a>string</p> 97</td> 98<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_p586281111151"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_p586281111151"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_p586281111151"></a>-</p> 99</td> 100<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p1624612362219"><a name="en-us_topic_0000001061931453_p1624612362219"></a><a name="en-us_topic_0000001061931453_p1624612362219"></a>No</p> 101</td> 102<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_p113416153342"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_p113416153342"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_ph5815920163518"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_ph5815920163518"></a><a name="en-us_topic_0000001061931453_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_0000001061931453_en-us_topic_0000001050831187_b08212202354"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_b08212202354"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_b08212202354"></a>$refs</strong>.</p> 103</td> 104</tr> 105<tr id="en-us_topic_0000001061931453_row1863421642313"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p979mcpsimp"></a>disabled</p> 106</td> 107<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p981mcpsimp"></a>boolean</p> 108</td> 109<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p983mcpsimp"></a>false</p> 110</td> 111<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p192476368214"><a name="en-us_topic_0000001061931453_p192476368214"></a><a name="en-us_topic_0000001061931453_p192476368214"></a>No</p> 112</td> 113<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p985mcpsimp"></a>Whether the component is disabled. If it is disabled, it cannot respond to user interaction.</p> 114</td> 115</tr> 116<tr id="en-us_topic_0000001061931453_row1263451617236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p997mcpsimp"></a>data</p> 117</td> 118<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p999mcpsimp"></a>string</p> 119</td> 120<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1001mcpsimp"></a>-</p> 121</td> 122<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p22471736132114"><a name="en-us_topic_0000001061931453_p22471736132114"></a><a name="en-us_topic_0000001061931453_p22471736132114"></a>No</p> 123</td> 124<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050831187_en-us_topic_0000000000611464_p1003mcpsimp"></a>Attribute set for components to facilitate data storage and reading.</p> 125</td> 126</tr> 127</tbody> 128</table> 129 130## Style<a name="en-us_topic_0000001061931453_section184493015533"></a> 131 132<a name="en-us_topic_0000001061931453_table1744514388541"></a> 133<table><thead align="left"><tr id="en-us_topic_0000001061931453_row1244614388545"><th class="cellrowborder" valign="top" width="17.98%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1060mcpsimp"></a>Name</p> 134</th> 135<th class="cellrowborder" valign="top" width="15.82%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1062mcpsimp"></a>Type</p> 136</th> 137<th class="cellrowborder" valign="top" width="12.379999999999999%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1064mcpsimp"></a>Default Value</p> 138</th> 139<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001061931453_p19451142418147"><a name="en-us_topic_0000001061931453_p19451142418147"></a><a name="en-us_topic_0000001061931453_p19451142418147"></a>Mandatory</p> 140</th> 141<th class="cellrowborder" valign="top" width="46.300000000000004%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1066mcpsimp"></a>Description</p> 142</th> 143</tr> 144</thead> 145<tbody><tr id="en-us_topic_0000001061931453_row1968320716339"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_p16782113422516"><a name="en-us_topic_0000001061931453_p16782113422516"></a><a name="en-us_topic_0000001061931453_p16782113422516"></a>color</p> 146</td> 147<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_p678210342255"><a name="en-us_topic_0000001061931453_p678210342255"></a><a name="en-us_topic_0000001061931453_p678210342255"></a><color></p> 148</td> 149<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_p11782113462512"><a name="en-us_topic_0000001061931453_p11782113462512"></a><a name="en-us_topic_0000001061931453_p11782113462512"></a>#e6000000</p> 150</td> 151<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p1945222451418"><a name="en-us_topic_0000001061931453_p1945222451418"></a><a name="en-us_topic_0000001061931453_p1945222451418"></a>No</p> 152</td> 153<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_p9782134122511"><a name="en-us_topic_0000001061931453_p9782134122511"></a><a name="en-us_topic_0000001061931453_p9782134122511"></a>Text color.</p> 154</td> 155</tr> 156<tr id="en-us_topic_0000001061931453_row93711310173314"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_p15365537102518"><a name="en-us_topic_0000001061931453_p15365537102518"></a><a name="en-us_topic_0000001061931453_p15365537102518"></a>font-size</p> 157</td> 158<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_p1636517375255"><a name="en-us_topic_0000001061931453_p1636517375255"></a><a name="en-us_topic_0000001061931453_p1636517375255"></a><length></p> 159</td> 160<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_p7365103717256"><a name="en-us_topic_0000001061931453_p7365103717256"></a><a name="en-us_topic_0000001061931453_p7365103717256"></a>16px</p> 161</td> 162<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p1452152481418"><a name="en-us_topic_0000001061931453_p1452152481418"></a><a name="en-us_topic_0000001061931453_p1452152481418"></a>No</p> 163</td> 164<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_p336663712252"><a name="en-us_topic_0000001061931453_p336663712252"></a><a name="en-us_topic_0000001061931453_p336663712252"></a>Text size.</p> 165</td> 166</tr> 167<tr id="en-us_topic_0000001061931453_row48601612153319"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_p3376124017256"><a name="en-us_topic_0000001061931453_p3376124017256"></a><a name="en-us_topic_0000001061931453_p3376124017256"></a>allow-scale</p> 168</td> 169<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_p1437654010251"><a name="en-us_topic_0000001061931453_p1437654010251"></a><a name="en-us_topic_0000001061931453_p1437654010251"></a>boolean</p> 170</td> 171<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_p1376154072515"><a name="en-us_topic_0000001061931453_p1376154072515"></a><a name="en-us_topic_0000001061931453_p1376154072515"></a>true</p> 172</td> 173<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p1452132471420"><a name="en-us_topic_0000001061931453_p1452132471420"></a><a name="en-us_topic_0000001061931453_p1452132471420"></a>No</p> 174</td> 175<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_p1937615404253"><a name="en-us_topic_0000001061931453_p1937615404253"></a><a name="en-us_topic_0000001061931453_p1937615404253"></a>Whether the text size changes with the system's font size settings.</p> 176</td> 177</tr> 178<tr id="en-us_topic_0000001061931453_row1421915113312"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_p0781642162510"><a name="en-us_topic_0000001061931453_p0781642162510"></a><a name="en-us_topic_0000001061931453_p0781642162510"></a>font-style</p> 179</td> 180<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_p107816428255"><a name="en-us_topic_0000001061931453_p107816428255"></a><a name="en-us_topic_0000001061931453_p107816428255"></a>string</p> 181</td> 182<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_p17811342142514"><a name="en-us_topic_0000001061931453_p17811342142514"></a><a name="en-us_topic_0000001061931453_p17811342142514"></a>normal</p> 183</td> 184<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p11452162417140"><a name="en-us_topic_0000001061931453_p11452162417140"></a><a name="en-us_topic_0000001061931453_p11452162417140"></a>No</p> 185</td> 186<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_p197817427251"><a name="en-us_topic_0000001061931453_p197817427251"></a><a name="en-us_topic_0000001061931453_p197817427251"></a>Text font style. Available values are as follows:</p> 187<a name="en-us_topic_0000001061931453_ol3712173853714"></a><a name="en-us_topic_0000001061931453_ol3712173853714"></a><ol id="en-us_topic_0000001061931453_ol3712173853714"><li><strong id="en-us_topic_0000001061931453_b533925573911"><a name="en-us_topic_0000001061931453_b533925573911"></a><a name="en-us_topic_0000001061931453_b533925573911"></a>normal</strong>: standard font style</li><li><strong id="en-us_topic_0000001061931453_b12117205710391"><a name="en-us_topic_0000001061931453_b12117205710391"></a><a name="en-us_topic_0000001061931453_b12117205710391"></a>italic</strong>: italic font style</li></ol> 188</td> 189</tr> 190<tr id="en-us_topic_0000001061931453_row1373417172335"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_p9764174572513"><a name="en-us_topic_0000001061931453_p9764174572513"></a><a name="en-us_topic_0000001061931453_p9764174572513"></a>font-weight</p> 191</td> 192<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_p37641045112510"><a name="en-us_topic_0000001061931453_p37641045112510"></a><a name="en-us_topic_0000001061931453_p37641045112510"></a>number|string</p> 193</td> 194<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_p1976434511252"><a name="en-us_topic_0000001061931453_p1976434511252"></a><a name="en-us_topic_0000001061931453_p1976434511252"></a>normal</p> 195</td> 196<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p24528247143"><a name="en-us_topic_0000001061931453_p24528247143"></a><a name="en-us_topic_0000001061931453_p24528247143"></a>No</p> 197</td> 198<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_p17641452258"><a name="en-us_topic_0000001061931453_p17641452258"></a><a name="en-us_topic_0000001061931453_p17641452258"></a>Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are <strong id="en-us_topic_0000001061931453_b1695811444515"><a name="en-us_topic_0000001061931453_b1695811444515"></a><a name="en-us_topic_0000001061931453_b1695811444515"></a>lighter</strong>, <strong id="en-us_topic_0000001061931453_b59669416457"><a name="en-us_topic_0000001061931453_b59669416457"></a><a name="en-us_topic_0000001061931453_b59669416457"></a>normal</strong>, <strong id="en-us_topic_0000001061931453_b896724144518"><a name="en-us_topic_0000001061931453_b896724144518"></a><a name="en-us_topic_0000001061931453_b896724144518"></a>bold</strong>, or <strong id="en-us_topic_0000001061931453_b196910415458"><a name="en-us_topic_0000001061931453_b196910415458"></a><a name="en-us_topic_0000001061931453_b196910415458"></a>bolder</strong>.</p> 199</td> 200</tr> 201<tr id="en-us_topic_0000001061931453_row017015211338"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_p1693494732511"><a name="en-us_topic_0000001061931453_p1693494732511"></a><a name="en-us_topic_0000001061931453_p1693494732511"></a>text-decoration</p> 202</td> 203<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_p7934124713256"><a name="en-us_topic_0000001061931453_p7934124713256"></a><a name="en-us_topic_0000001061931453_p7934124713256"></a>string</p> 204</td> 205<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_p1493416479256"><a name="en-us_topic_0000001061931453_p1493416479256"></a><a name="en-us_topic_0000001061931453_p1493416479256"></a>none</p> 206</td> 207<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p9452124171410"><a name="en-us_topic_0000001061931453_p9452124171410"></a><a name="en-us_topic_0000001061931453_p9452124171410"></a>No</p> 208</td> 209<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_p18934647142514"><a name="en-us_topic_0000001061931453_p18934647142514"></a><a name="en-us_topic_0000001061931453_p18934647142514"></a>Text modifier. Available values are as follows:</p> 210<a name="en-us_topic_0000001061931453_ol280935211386"></a><a name="en-us_topic_0000001061931453_ol280935211386"></a><ol id="en-us_topic_0000001061931453_ol280935211386"><li><strong id="en-us_topic_0000001061931453_b113241833938"><a name="en-us_topic_0000001061931453_b113241833938"></a><a name="en-us_topic_0000001061931453_b113241833938"></a>underline</strong>: An underline is used.</li><li><strong id="en-us_topic_0000001061931453_b1838734735"><a name="en-us_topic_0000001061931453_b1838734735"></a><a name="en-us_topic_0000001061931453_b1838734735"></a>line-through</strong>: A strikethrough is used.</li><li><strong id="en-us_topic_0000001061931453_b1177036435"><a name="en-us_topic_0000001061931453_b1177036435"></a><a name="en-us_topic_0000001061931453_b1177036435"></a>none</strong>: The standard text is used.</li></ol> 211</td> 212</tr> 213<tr id="en-us_topic_0000001061931453_row458624153320"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_p1543212507250"><a name="en-us_topic_0000001061931453_p1543212507250"></a><a name="en-us_topic_0000001061931453_p1543212507250"></a>font-family</p> 214</td> 215<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_p1243215092510"><a name="en-us_topic_0000001061931453_p1243215092510"></a><a name="en-us_topic_0000001061931453_p1243215092510"></a>string</p> 216</td> 217<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_p34321750192510"><a name="en-us_topic_0000001061931453_p34321750192510"></a><a name="en-us_topic_0000001061931453_p34321750192510"></a>sans-serif</p> 218</td> 219<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p1945217249142"><a name="en-us_topic_0000001061931453_p1945217249142"></a><a name="en-us_topic_0000001061931453_p1945217249142"></a>No</p> 220</td> 221<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_p134322050162510"><a name="en-us_topic_0000001061931453_p134322050162510"></a><a name="en-us_topic_0000001061931453_p134322050162510"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by <a href="custom-font-styles.md#EN-US_TOPIC_0000001162414611">Custom Font Styles</a> is used for the text.</p> 222</td> 223</tr> 224<tr id="en-us_topic_0000001061931453_row5132259115419"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1207mcpsimp"></a>background</p> 225</td> 226<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1209mcpsimp"></a><linear-gradient></p> 227</td> 228<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1211mcpsimp"></a>-</p> 229</td> 230<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p845216243143"><a name="en-us_topic_0000001061931453_p845216243143"></a><a name="en-us_topic_0000001061931453_p845216243143"></a>No</p> 231</td> 232<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"><a name="en-us_topic_0000001061931453_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a>This attribute supports <a href="gradient-styles.md#EN-US_TOPIC_0000001115974726">Gradient Styles</a> only but is not compatible with <strong id="en-us_topic_0000001061931453_b14965153212611"><a name="en-us_topic_0000001061931453_b14965153212611"></a><a name="en-us_topic_0000001061931453_b14965153212611"></a>background-color</strong> or <strong id="en-us_topic_0000001061931453_b109661532963"><a name="en-us_topic_0000001061931453_b109661532963"></a><a name="en-us_topic_0000001061931453_b109661532963"></a>background-image</strong>.</p> 233</td> 234</tr> 235<tr id="en-us_topic_0000001061931453_row1613225905418"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1217mcpsimp"></a>background-color</p> 236</td> 237<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1219mcpsimp"></a><color></p> 238</td> 239<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1221mcpsimp"></a>-</p> 240</td> 241<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p545218247144"><a name="en-us_topic_0000001061931453_p545218247144"></a><a name="en-us_topic_0000001061931453_p545218247144"></a>No</p> 242</td> 243<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1223mcpsimp"></a>Background color.</p> 244</td> 245</tr> 246<tr id="en-us_topic_0000001061931453_row20131459185410"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1226mcpsimp"></a>background-image</p> 247</td> 248<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1228mcpsimp"></a>string</p> 249</td> 250<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1230mcpsimp"></a>-</p> 251</td> 252<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p1045212441415"><a name="en-us_topic_0000001061931453_p1045212441415"></a><a name="en-us_topic_0000001061931453_p1045212441415"></a>No</p> 253</td> 254<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1232mcpsimp"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001061931453_b18074814319"><a name="en-us_topic_0000001061931453_b18074814319"></a><a name="en-us_topic_0000001061931453_b18074814319"></a>background-color</strong> or <strong id="en-us_topic_0000001061931453_b78515481035"><a name="en-us_topic_0000001061931453_b78515481035"></a><a name="en-us_topic_0000001061931453_b78515481035"></a>background</strong>. Local image resources are supported.</p> 255</td> 256</tr> 257<tr id="en-us_topic_0000001061931453_row0131145914543"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p15157115065817"></a>background-size</p> 258</td> 259<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul1065173641310"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul1065173641310"></a><ul id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul1065173641310"><li>string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 260</td> 261<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p8157195019585"></a>auto</p> 262</td> 263<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p10452132414149"><a name="en-us_topic_0000001061931453_p10452132414149"></a><a name="en-us_topic_0000001061931453_p10452132414149"></a>No</p> 264</td> 265<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p91971112114318"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p91971112114318"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p91971112114318"></a>Background image size.</p> 266<a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul41331853154111"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul41331853154111"></a><ul id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul41331853154111"><li>The <strong id="en-us_topic_0000001061931453_b1240813501139"><a name="en-us_topic_0000001061931453_b1240813501139"></a><a name="en-us_topic_0000001061931453_b1240813501139"></a>string</strong> values are as follows:<a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul13611494111"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul13611494111"></a><ul id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul13611494111"><li><strong id="en-us_topic_0000001061931453_b18294195114318"><a name="en-us_topic_0000001061931453_b18294195114318"></a><a name="en-us_topic_0000001061931453_b18294195114318"></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_0000001061931453_b10184452334"><a name="en-us_topic_0000001061931453_b10184452334"></a><a name="en-us_topic_0000001061931453_b10184452334"></a>cover</strong>: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.</li><li><strong id="en-us_topic_0000001061931453_b14980752831"><a name="en-us_topic_0000001061931453_b14980752831"></a><a name="en-us_topic_0000001061931453_b14980752831"></a>auto</strong>: The original image width-height ratio is retained.</li></ul> 267</li><li>The two <strong id="en-us_topic_0000001061931453_b57176531536"><a name="en-us_topic_0000001061931453_b57176531536"></a><a name="en-us_topic_0000001061931453_b57176531536"></a><length></strong> values are as follows:<p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p1840244924418"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p1840244924418"></a><a name="en-us_topic_0000001061931453_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_0000001061931453_b14228456634"><a name="en-us_topic_0000001061931453_b14228456634"></a><a name="en-us_topic_0000001061931453_b14228456634"></a>auto</strong> by default.</p> 268</li><li>The two <strong id="en-us_topic_0000001061931453_b4995195613312"><a name="en-us_topic_0000001061931453_b4995195613312"></a><a name="en-us_topic_0000001061931453_b4995195613312"></a><percentage></strong> values are as follows:<p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p17936154410457"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p17936154410457"></a><a name="en-us_topic_0000001061931453_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_0000001061931453_b038115592312"><a name="en-us_topic_0000001061931453_b038115592312"></a><a name="en-us_topic_0000001061931453_b038115592312"></a>auto</strong> by default.</p> 269</li></ul> 270</td> 271</tr> 272<tr id="en-us_topic_0000001061931453_row2017552715511"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1235mcpsimp"></a>background-repeat</p> 273</td> 274<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1237mcpsimp"></a>string</p> 275</td> 276<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1239mcpsimp"></a>repeat</p> 277</td> 278<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p16452102413147"><a name="en-us_topic_0000001061931453_p16452102413147"></a><a name="en-us_topic_0000001061931453_p16452102413147"></a>No</p> 279</td> 280<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1241mcpsimp"></a><a name="en-us_topic_0000001061931453_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> 281<a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul8236153103612"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul8236153103612"></a><ul id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul8236153103612"><li><strong id="en-us_topic_0000001061931453_b11277195719522"><a name="en-us_topic_0000001061931453_b11277195719522"></a><a name="en-us_topic_0000001061931453_b11277195719522"></a>repeat</strong>: Repeatedly draws images along the x-axis and y-axis at the same time.</li><li><strong id="en-us_topic_0000001061931453_b55279597525"><a name="en-us_topic_0000001061931453_b55279597525"></a><a name="en-us_topic_0000001061931453_b55279597525"></a>repeat-x</strong>: Repeatedly draws images along the x-axis.</li><li><strong id="en-us_topic_0000001061931453_b48462126535"><a name="en-us_topic_0000001061931453_b48462126535"></a><a name="en-us_topic_0000001061931453_b48462126535"></a>repeat-y</strong>: Repeatedly draws images along the y-axis.</li><li><strong id="en-us_topic_0000001061931453_b1170781517536"><a name="en-us_topic_0000001061931453_b1170781517536"></a><a name="en-us_topic_0000001061931453_b1170781517536"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul> 282</td> 283</tr> 284<tr id="en-us_topic_0000001061931453_row181756277552"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1244mcpsimp"></a>background-position</p> 285</td> 286<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul8874155216502"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul8874155216502"></a><ul id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul8874155216502"><li>string string</li><li><length> <length></li><li><percentage> <percentage></li></ul> 287</td> 288<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1248mcpsimp"></a>0px 0px</p> 289</td> 290<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p445222451420"><a name="en-us_topic_0000001061931453_p445222451420"></a><a name="en-us_topic_0000001061931453_p445222451420"></a>No</p> 291</td> 292<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul1590812103363"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul1590812103363"></a><ul id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001061931453_b197178314532"><a name="en-us_topic_0000001061931453_b197178314532"></a><a name="en-us_topic_0000001061931453_b197178314532"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul1453531734716"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul1453531734716"></a><ul id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul1453531734716"><li><strong id="en-us_topic_0000001061931453_b1554311179414"><a name="en-us_topic_0000001061931453_b1554311179414"></a><a name="en-us_topic_0000001061931453_b1554311179414"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001061931453_b737612182417"><a name="en-us_topic_0000001061931453_b737612182417"></a><a name="en-us_topic_0000001061931453_b737612182417"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001061931453_b1720014193413"><a name="en-us_topic_0000001061931453_b1720014193413"></a><a name="en-us_topic_0000001061931453_b1720014193413"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001061931453_b18452201349"><a name="en-us_topic_0000001061931453_b18452201349"></a><a name="en-us_topic_0000001061931453_b18452201349"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001061931453_b3875520242"><a name="en-us_topic_0000001061931453_b3875520242"></a><a name="en-us_topic_0000001061931453_b3875520242"></a>center</strong>: center position</li></ul> 293</li></ul> 294<a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul10908121023615"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul10908121023615"></a><ul id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul10908121023615"><li>Using <strong id="en-us_topic_0000001061931453_b269119211746"><a name="en-us_topic_0000001061931453_b269119211746"></a><a name="en-us_topic_0000001061931453_b269119211746"></a><length></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001061931453_b25271122446"><a name="en-us_topic_0000001061931453_b25271122446"></a><a name="en-us_topic_0000001061931453_b25271122446"></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_0000001061931453_b132172242416"><a name="en-us_topic_0000001061931453_b132172242416"></a><a name="en-us_topic_0000001061931453_b132172242416"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001061931453_b111066252046"><a name="en-us_topic_0000001061931453_b111066252046"></a><a name="en-us_topic_0000001061931453_b111066252046"></a><percentage></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001061931453_b48948251842"><a name="en-us_topic_0000001061931453_b48948251842"></a><a name="en-us_topic_0000001061931453_b48948251842"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001061931453_b2756102611419"><a name="en-us_topic_0000001061931453_b2756102611419"></a><a name="en-us_topic_0000001061931453_b2756102611419"></a>100% 100%</strong> indicates the lower right corner. If only one value is specified, the other one is <strong id="en-us_topic_0000001061931453_b5578927747"><a name="en-us_topic_0000001061931453_b5578927747"></a><a name="en-us_topic_0000001061931453_b5578927747"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001061931453_b134192028540"><a name="en-us_topic_0000001061931453_b134192028540"></a><a name="en-us_topic_0000001061931453_b134192028540"></a><percentage></strong> and <strong id="en-us_topic_0000001061931453_b17420132818419"><a name="en-us_topic_0000001061931453_b17420132818419"></a><a name="en-us_topic_0000001061931453_b17420132818419"></a><length></strong>.</li></ul> 295</td> 296</tr> 297<tr id="en-us_topic_0000001061931453_row31751127165514"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p134581712103910"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p134581712103910"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p134581712103910"></a>opacity</p> 298</td> 299<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1267mcpsimp"></a>number</p> 300</td> 301<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1269mcpsimp"></a>1</p> 302</td> 303<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p14523246147"><a name="en-us_topic_0000001061931453_p14523246147"></a><a name="en-us_topic_0000001061931453_p14523246147"></a>No</p> 304</td> 305<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p122515161139"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p122515161139"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001061931453_b126513309411"><a name="en-us_topic_0000001061931453_b126513309411"></a><a name="en-us_topic_0000001061931453_b126513309411"></a>0</strong> to <strong id="en-us_topic_0000001061931453_b866133016418"><a name="en-us_topic_0000001061931453_b866133016418"></a><a name="en-us_topic_0000001061931453_b866133016418"></a>1</strong>. The value <strong id="en-us_topic_0000001061931453_b16620301347"><a name="en-us_topic_0000001061931453_b16620301347"></a><a name="en-us_topic_0000001061931453_b16620301347"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001061931453_b567103015411"><a name="en-us_topic_0000001061931453_b567103015411"></a><a name="en-us_topic_0000001061931453_b567103015411"></a>0</strong> means completely transparent.</p> 306</td> 307</tr> 308<tr id="en-us_topic_0000001061931453_row48391367556"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1274mcpsimp"></a>display</p> 309</td> 310<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p1544115441446"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p1544115441446"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p1544115441446"></a>string</p> 311<p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1276mcpsimp"></a></p> 312</td> 313<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1278mcpsimp"></a>flex</p> 314</td> 315<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p134525242141"><a name="en-us_topic_0000001061931453_p134525242141"></a><a name="en-us_topic_0000001061931453_p134525242141"></a>No</p> 316</td> 317<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p23704018414"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p23704018414"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p23704018414"></a>Type of the box containing an element. Available values are as follows:</p> 318<a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul12227103394916"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul12227103394916"></a><ul id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul12227103394916"><li><strong id="en-us_topic_0000001061931453_b45227321849"><a name="en-us_topic_0000001061931453_b45227321849"></a><a name="en-us_topic_0000001061931453_b45227321849"></a>flex</strong>: flexible layout</li><li><strong id="en-us_topic_0000001061931453_b73530331545"><a name="en-us_topic_0000001061931453_b73530331545"></a><a name="en-us_topic_0000001061931453_b73530331545"></a>none</strong>: The box is disabled.</li></ul> 319</td> 320</tr> 321<tr id="en-us_topic_0000001061931453_row1483963614553"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1283mcpsimp"></a>visibility</p> 322</td> 323<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p15475737486"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p15475737486"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p15475737486"></a>string</p> 324<p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1285mcpsimp"></a></p> 325</td> 326<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_en-us_topic_0000000000611468_p1287mcpsimp"></a>visible</p> 327</td> 328<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001061931453_p1345202471410"><a name="en-us_topic_0000001061931453_p1345202471410"></a><a name="en-us_topic_0000001061931453_p1345202471410"></a>No</p> 329</td> 330<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p1568839154517"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p1568839154517"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p1568839154517"></a>Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the <strong id="en-us_topic_0000001061931453_b202816196553"><a name="en-us_topic_0000001061931453_b202816196553"></a><a name="en-us_topic_0000001061931453_b202816196553"></a>display</strong> attribute to <strong id="en-us_topic_0000001061931453_b173519194554"><a name="en-us_topic_0000001061931453_b173519194554"></a><a name="en-us_topic_0000001061931453_b173519194554"></a>none</strong>.) Available values are as follows:</p> 331<a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul751984164920"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul751984164920"></a><ul id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_ul751984164920"><li><strong id="en-us_topic_0000001061931453_b977043610416"><a name="en-us_topic_0000001061931453_b977043610416"></a><a name="en-us_topic_0000001061931453_b977043610416"></a>visible</strong>: The box is visible.</li><li><strong id="en-us_topic_0000001061931453_b7611237443"><a name="en-us_topic_0000001061931453_b7611237443"></a><a name="en-us_topic_0000001061931453_b7611237443"></a>hidden</strong>: The box is hidden but still takes up space.</li></ul> 332<div class="note" id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_note4549524649"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_note4549524649"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_note4549524649"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p25499241642"><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p25499241642"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001050791158_p25499241642"></a>If both <strong id="en-us_topic_0000001061931453_b852218381745"><a name="en-us_topic_0000001061931453_b852218381745"></a><a name="en-us_topic_0000001061931453_b852218381745"></a>visibility</strong> and <strong id="en-us_topic_0000001061931453_b1452217381449"><a name="en-us_topic_0000001061931453_b1452217381449"></a><a name="en-us_topic_0000001061931453_b1452217381449"></a>display</strong> are set, only <strong id="en-us_topic_0000001061931453_b6523143812412"><a name="en-us_topic_0000001061931453_b6523143812412"></a><a name="en-us_topic_0000001061931453_b6523143812412"></a>display</strong> takes effect.</p> 333</div></div> 334</td> 335</tr> 336</tbody> 337</table> 338 339## Event<a name="en-us_topic_0000001061931453_section571865310552"></a> 340 341<a name="en-us_topic_0000001061931453_table7317920163615"></a> 342<table><thead align="left"><tr id="en-us_topic_0000001061931453_row1318152017364"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a>Name</p> 343</th> 344<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a>Parameter</p> 345</th> 346<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a>Triggered when</p> 347</th> 348</tr> 349</thead> 350<tbody><tr id="en-us_topic_0000001061931453_row3318820143612"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a>touchstart</p> 351</td> 352<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 353</td> 354<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a>The tapping starts</p> 355</td> 356</tr> 357<tr id="en-us_topic_0000001061931453_row15318320193617"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a>touchmove</p> 358</td> 359<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 360</td> 361<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a>The tapping moves</p> 362</td> 363</tr> 364<tr id="en-us_topic_0000001061931453_row13318192019364"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a>touchcancel</p> 365</td> 366<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 367</td> 368<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a>The tapping is interrupted</p> 369</td> 370</tr> 371<tr id="en-us_topic_0000001061931453_row193187200363"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a>touchend</p> 372</td> 373<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p> 374</td> 375<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a>The tapping ends</p> 376</td> 377</tr> 378<tr id="en-us_topic_0000001061931453_row131972011363"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a>click</p> 379</td> 380<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a>-</p> 381</td> 382<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a>A component is clicked</p> 383</td> 384</tr> 385<tr id="en-us_topic_0000001061931453_row731972020365"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a>longpress</p> 386</td> 387<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a>-</p> 388</td> 389<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a>A component is long pressed</p> 390</td> 391</tr> 392<tr id="en-us_topic_0000001061931453_row12320120133620"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_p12706561061"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_p12706561061"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_p12706561061"></a>swipe<sup id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_sup35424382912"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_sup35424382912"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_sup35424382912"></a>5+</sup></p> 393</td> 394<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_p11711056161"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_p11711056161"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_p11711056161"></a><a href="universal-events.md#en-us_topic_0000001058460527_table111811577714">SwipeEvent</a></p> 395</td> 396<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001061931453_en-us_topic_0000001058460527_p2711556162"><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_p2711556162"></a><a name="en-us_topic_0000001061931453_en-us_topic_0000001058460527_p2711556162"></a>A user quickly swipes on a component.</p> 397</td> 398</tr> 399</tbody> 400</table> 401 402## Method<a name="en-us_topic_0000001061931453_section568225514199"></a> 403 404None 405 406## Example Code<a name="en-us_topic_0000001061931453_section1240714821316"></a> 407 408``` 409<toolbar style="position: fixed; bottom: 0px; "> 410 <toolbar-item icon='common/Icon/location.png' value='Option 1' > </toolbar-item> 411 <toolbar-item icon='common/Icon/heart.png' value='Option 2'> </toolbar-item> 412 <toolbar-item icon='common/Icon/diamond.png' value='Option 3' > </toolbar-item> 413 <toolbar-item icon='common/Icon/heart.png' value='Option 4' > </toolbar-item> 414 <toolbar-item icon='common/Icon/heart.png' value='Option 5' > </toolbar-item> 415 <toolbar-item icon='common/Icon/heart.png' value='Option 6'> </toolbar-item> 416</toolbar> 417``` 418 419 420 421
