• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# textarea<a name="EN-US_TOPIC_0000001162494619"></a>
2
3-   [Permission List](#en-us_topic_0000001058340507_section11257113618419)
4-   [Child Component](#en-us_topic_0000001058340507_section9288143101012)
5-   [Attribute](#en-us_topic_0000001058340507_section2907183951110)
6-   [Event](#en-us_topic_0000001058340507_section3892191911214)
7-   [Style](#en-us_topic_0000001058340507_section182794053)
8-   [Method](#en-us_topic_0000001058340507_section47669296127)
9-   [Example Code](#en-us_topic_0000001058340507_section1224516501541)
10
11The  **<textarea\>**  component provides a text box to receive multi-line text input.
12
13## Permission List<a name="en-us_topic_0000001058340507_section11257113618419"></a>
14
15None
16
17## Child Component<a name="en-us_topic_0000001058340507_section9288143101012"></a>
18
19Not supported
20
21## Attribute<a name="en-us_topic_0000001058340507_section2907183951110"></a>
22
23<a name="en-us_topic_0000001058340507_table20633101642315"></a>
24<table><thead align="left"><tr id="en-us_topic_0000001058340507_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a>Name</p>
25</th>
26<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a>Type</p>
27</th>
28<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a>Default Value</p>
29</th>
30<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058340507_p824610360217"><a name="en-us_topic_0000001058340507_p824610360217"></a><a name="en-us_topic_0000001058340507_p824610360217"></a>Mandatory</p>
31</th>
32<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a>Description</p>
33</th>
34</tr>
35</thead>
36<tbody><tr id="en-us_topic_0000001058340507_row207976211241"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p1172110226415"><a name="en-us_topic_0000001058340507_p1172110226415"></a><a name="en-us_topic_0000001058340507_p1172110226415"></a>placeholder</p>
37</td>
38<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p1572111221649"><a name="en-us_topic_0000001058340507_p1572111221649"></a><a name="en-us_topic_0000001058340507_p1572111221649"></a>string</p>
39</td>
40<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p1072112229411"><a name="en-us_topic_0000001058340507_p1072112229411"></a><a name="en-us_topic_0000001058340507_p1072112229411"></a>-</p>
41</td>
42<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p197218228415"><a name="en-us_topic_0000001058340507_p197218228415"></a><a name="en-us_topic_0000001058340507_p197218228415"></a>No</p>
43</td>
44<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_p1372114227414"><a name="en-us_topic_0000001058340507_p1372114227414"></a><a name="en-us_topic_0000001058340507_p1372114227414"></a>Content of the hint text.</p>
45</td>
46</tr>
47<tr id="en-us_topic_0000001058340507_row57972211740"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p18721522047"><a name="en-us_topic_0000001058340507_p18721522047"></a><a name="en-us_topic_0000001058340507_p18721522047"></a>maxlength</p>
48</td>
49<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p127225224413"><a name="en-us_topic_0000001058340507_p127225224413"></a><a name="en-us_topic_0000001058340507_p127225224413"></a>number</p>
50</td>
51<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p19722172217410"><a name="en-us_topic_0000001058340507_p19722172217410"></a><a name="en-us_topic_0000001058340507_p19722172217410"></a>-</p>
52</td>
53<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p27223221745"><a name="en-us_topic_0000001058340507_p27223221745"></a><a name="en-us_topic_0000001058340507_p27223221745"></a>No</p>
54</td>
55<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_p1872218223415"><a name="en-us_topic_0000001058340507_p1872218223415"></a><a name="en-us_topic_0000001058340507_p1872218223415"></a>Maximum number of characters that can be entered in the multi-line text box.</p>
56</td>
57</tr>
58<tr id="en-us_topic_0000001058340507_row41157171546"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p1972216221247"><a name="en-us_topic_0000001058340507_p1972216221247"></a><a name="en-us_topic_0000001058340507_p1972216221247"></a>headericon</p>
59</td>
60<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p177229221041"><a name="en-us_topic_0000001058340507_p177229221041"></a><a name="en-us_topic_0000001058340507_p177229221041"></a>string</p>
61</td>
62<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p15722132218415"><a name="en-us_topic_0000001058340507_p15722132218415"></a><a name="en-us_topic_0000001058340507_p15722132218415"></a>-</p>
63</td>
64<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p27221122445"><a name="en-us_topic_0000001058340507_p27221122445"></a><a name="en-us_topic_0000001058340507_p27221122445"></a>No</p>
65</td>
66<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_p172213223414"><a name="en-us_topic_0000001058340507_p172213223414"></a><a name="en-us_topic_0000001058340507_p172213223414"></a>Icon displayed before text input. This icon does not support click events. The supported icon formats are JPG, PNG, and SVG.</p>
67</td>
68</tr>
69<tr id="en-us_topic_0000001058340507_row1416414649"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p5722162213413"><a name="en-us_topic_0000001058340507_p5722162213413"></a><a name="en-us_topic_0000001058340507_p5722162213413"></a>extend</p>
70</td>
71<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p47221221447"><a name="en-us_topic_0000001058340507_p47221221447"></a><a name="en-us_topic_0000001058340507_p47221221447"></a>boolean</p>
72</td>
73<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p15722172212412"><a name="en-us_topic_0000001058340507_p15722172212412"></a><a name="en-us_topic_0000001058340507_p15722172212412"></a>false</p>
74</td>
75<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p1172212221745"><a name="en-us_topic_0000001058340507_p1172212221745"></a><a name="en-us_topic_0000001058340507_p1172212221745"></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_0000001058340507_p1872232213411"><a name="en-us_topic_0000001058340507_p1872232213411"></a><a name="en-us_topic_0000001058340507_p1872232213411"></a>Whether a text box can be extended. If the value of this attribute is set to <strong id="en-us_topic_0000001058340507_b073910572418"><a name="en-us_topic_0000001058340507_b073910572418"></a><a name="en-us_topic_0000001058340507_b073910572418"></a>true</strong>, the height of the text box can adapt to the text.</p>
78</td>
79</tr>
80<tr id="en-us_topic_0000001058340507_row1273032304111"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p1073002304114"><a name="en-us_topic_0000001058340507_p1073002304114"></a><a name="en-us_topic_0000001058340507_p1073002304114"></a>value<sup id="en-us_topic_0000001058340507_sup5397930164210"><a name="en-us_topic_0000001058340507_sup5397930164210"></a><a name="en-us_topic_0000001058340507_sup5397930164210"></a>5+</sup></p>
81</td>
82<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p37316238419"><a name="en-us_topic_0000001058340507_p37316238419"></a><a name="en-us_topic_0000001058340507_p37316238419"></a>string</p>
83</td>
84<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p773116239412"><a name="en-us_topic_0000001058340507_p773116239412"></a><a name="en-us_topic_0000001058340507_p773116239412"></a>-</p>
85</td>
86<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p1473162314411"><a name="en-us_topic_0000001058340507_p1473162314411"></a><a name="en-us_topic_0000001058340507_p1473162314411"></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_0000001058340507_p20731162310415"><a name="en-us_topic_0000001058340507_p20731162310415"></a><a name="en-us_topic_0000001058340507_p20731162310415"></a>Content in a multi-line text box.</p>
89</td>
90</tr>
91<tr id="en-us_topic_0000001058340507_row8191717132813"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p7201317102812"><a name="en-us_topic_0000001058340507_p7201317102812"></a><a name="en-us_topic_0000001058340507_p7201317102812"></a>showcounter<sup id="en-us_topic_0000001058340507_sup10332204922918"><a name="en-us_topic_0000001058340507_sup10332204922918"></a><a name="en-us_topic_0000001058340507_sup10332204922918"></a>5+</sup></p>
92</td>
93<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p920141732817"><a name="en-us_topic_0000001058340507_p920141732817"></a><a name="en-us_topic_0000001058340507_p920141732817"></a>boolean</p>
94</td>
95<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p15201317132812"><a name="en-us_topic_0000001058340507_p15201317132812"></a><a name="en-us_topic_0000001058340507_p15201317132812"></a>false</p>
96</td>
97<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p11201317192811"><a name="en-us_topic_0000001058340507_p11201317192811"></a><a name="en-us_topic_0000001058340507_p11201317192811"></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_0000001058340507_p72081718281"><a name="en-us_topic_0000001058340507_p72081718281"></a><a name="en-us_topic_0000001058340507_p72081718281"></a>Whether to display the character counter for the text box. This attribute takes effect only when <strong id="en-us_topic_0000001058340507_b764616114321"><a name="en-us_topic_0000001058340507_b764616114321"></a><a name="en-us_topic_0000001058340507_b764616114321"></a>maxlength</strong> is set.</p>
100</td>
101</tr>
102<tr id="en-us_topic_0000001058340507_row1765514319572"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p177221571244"><a name="en-us_topic_0000001058340507_p177221571244"></a><a name="en-us_topic_0000001058340507_p177221571244"></a>menuoptions<sup id="en-us_topic_0000001058340507_sup154944401542"><a name="en-us_topic_0000001058340507_sup154944401542"></a><a name="en-us_topic_0000001058340507_sup154944401542"></a>5+</sup></p>
103</td>
104<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p8722157248"><a name="en-us_topic_0000001058340507_p8722157248"></a><a name="en-us_topic_0000001058340507_p8722157248"></a>Array&lt;<a href="#en-us_topic_0000001058340507_table83621954963">MenuOption</a>&gt;</p>
105</td>
106<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p167221878414"><a name="en-us_topic_0000001058340507_p167221878414"></a><a name="en-us_topic_0000001058340507_p167221878414"></a>-</p>
107</td>
108<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p197227713411"><a name="en-us_topic_0000001058340507_p197227713411"></a><a name="en-us_topic_0000001058340507_p197227713411"></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_0000001058340507_p207221573417"><a name="en-us_topic_0000001058340507_p207221573417"></a><a name="en-us_topic_0000001058340507_p207221573417"></a>Menu options displayed after users click the <strong id="en-us_topic_0000001058340507_b45218611497"><a name="en-us_topic_0000001058340507_b45218611497"></a><a name="en-us_topic_0000001058340507_b45218611497"></a>More</strong> button in the pop menu.</p>
111</td>
112</tr>
113<tr id="en-us_topic_0000001058340507_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a>id</p>
114</td>
115<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a>string</p>
116</td>
117<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a>-</p>
118</td>
119<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p42461736102118"><a name="en-us_topic_0000001058340507_p42461736102118"></a><a name="en-us_topic_0000001058340507_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_0000001058340507_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a>Unique ID of a component.</p>
122</td>
123</tr>
124<tr id="en-us_topic_0000001058340507_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a>style</p>
125</td>
126<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a>string</p>
127</td>
128<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a>-</p>
129</td>
130<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p17246836142119"><a name="en-us_topic_0000001058340507_p17246836142119"></a><a name="en-us_topic_0000001058340507_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_0000001058340507_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a>Style declaration of a component.</p>
133</td>
134</tr>
135<tr id="en-us_topic_0000001058340507_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a>class</p>
136</td>
137<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a>string</p>
138</td>
139<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a>-</p>
140</td>
141<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p324614367213"><a name="en-us_topic_0000001058340507_p324614367213"></a><a name="en-us_topic_0000001058340507_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_0000001058340507_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></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_0000001058340507_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_p1786251117156"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_p1786251117156"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_p1786251117156"></a>ref</p>
147</td>
148<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_p1086241119157"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_p1086241119157"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_p1086241119157"></a>string</p>
149</td>
150<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_p586281111151"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_p586281111151"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_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_0000001058340507_p1624612362219"><a name="en-us_topic_0000001058340507_p1624612362219"></a><a name="en-us_topic_0000001058340507_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_0000001058340507_en-us_topic_0000001058340523_p113416153342"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_p113416153342"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ph5815920163518"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ph5815920163518"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ph5815920163518"></a> or child components</span>. The reference information is registered with the parent component on <strong id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_b08212202354"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_b08212202354"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_b08212202354"></a>$refs</strong>.</p>
155</td>
156</tr>
157<tr id="en-us_topic_0000001058340507_row1863421642313"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a>disabled</p>
158</td>
159<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a>boolean</p>
160</td>
161<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a>false</p>
162</td>
163<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p192476368214"><a name="en-us_topic_0000001058340507_p192476368214"></a><a name="en-us_topic_0000001058340507_p192476368214"></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_0000001058340507_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a>Whether a component is disabled. If it is disabled, it cannot respond to user interaction.</p>
166</td>
167</tr>
168<tr id="en-us_topic_0000001058340507_row1263451617236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a>data</p>
169</td>
170<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a>string</p>
171</td>
172<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a>-</p>
173</td>
174<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p22471736132114"><a name="en-us_topic_0000001058340507_p22471736132114"></a><a name="en-us_topic_0000001058340507_p22471736132114"></a>No</p>
175</td>
176<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a>Attribute set for a component to facilitate data storage and reading.</p>
177</td>
178</tr>
179</tbody>
180</table>
181
182**Table  1**  MenuOption<sup>5+</sup>
183
184<a name="en-us_topic_0000001058340507_table83621954963"></a>
185<table><thead align="left"><tr id="en-us_topic_0000001058340507_row536212545619"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.1"><p id="en-us_topic_0000001058340507_p143621541967"><a name="en-us_topic_0000001058340507_p143621541967"></a><a name="en-us_topic_0000001058340507_p143621541967"></a>Name</p>
186</th>
187<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.2"><p id="en-us_topic_0000001058340507_p936215541620"><a name="en-us_topic_0000001058340507_p936215541620"></a><a name="en-us_topic_0000001058340507_p936215541620"></a>Type</p>
188</th>
189<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="en-us_topic_0000001058340507_p23626541665"><a name="en-us_topic_0000001058340507_p23626541665"></a><a name="en-us_topic_0000001058340507_p23626541665"></a>Description</p>
190</th>
191</tr>
192</thead>
193<tbody><tr id="en-us_topic_0000001058340507_row5362254461"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058340507_p33631541265"><a name="en-us_topic_0000001058340507_p33631541265"></a><a name="en-us_topic_0000001058340507_p33631541265"></a>icon</p>
194</td>
195<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058340507_p536311543619"><a name="en-us_topic_0000001058340507_p536311543619"></a><a name="en-us_topic_0000001058340507_p536311543619"></a>string</p>
196</td>
197<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058340507_p73631954762"><a name="en-us_topic_0000001058340507_p73631954762"></a><a name="en-us_topic_0000001058340507_p73631954762"></a>Path of the icon for a menu option.</p>
198</td>
199</tr>
200<tr id="en-us_topic_0000001058340507_row136319547613"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058340507_p12363654367"><a name="en-us_topic_0000001058340507_p12363654367"></a><a name="en-us_topic_0000001058340507_p12363654367"></a>content</p>
201</td>
202<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058340507_p1936312549617"><a name="en-us_topic_0000001058340507_p1936312549617"></a><a name="en-us_topic_0000001058340507_p1936312549617"></a>string</p>
203</td>
204<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058340507_p1036311548616"><a name="en-us_topic_0000001058340507_p1036311548616"></a><a name="en-us_topic_0000001058340507_p1036311548616"></a>Text content of a menu option.</p>
205</td>
206</tr>
207</tbody>
208</table>
209
210## Event<a name="en-us_topic_0000001058340507_section3892191911214"></a>
211
212<a name="en-us_topic_0000001058340507_table836435619510"></a>
213<table><thead align="left"><tr id="en-us_topic_0000001058340507_row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a487aa1c493e84ca68567b4b65051674d"></a>Name</p>
214</th>
215<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_adc4b506cda3043508da6ee7649c12ca4"></a>Parameter</p>
216</th>
217<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a59e4cbe58a5c42a7a4585bc8365783bc"></a>Triggered when</p>
218</th>
219</tr>
220</thead>
221<tbody><tr id="en-us_topic_0000001058340507_row18605132815610"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_p768720297617"><a name="en-us_topic_0000001058340507_p768720297617"></a><a name="en-us_topic_0000001058340507_p768720297617"></a>change</p>
222</td>
223<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_p126881629369"><a name="en-us_topic_0000001058340507_p126881629369"></a><a name="en-us_topic_0000001058340507_p126881629369"></a>{ text: newText, lines: textLines, height: textHeight }</p>
224</td>
225<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_p56883296617"><a name="en-us_topic_0000001058340507_p56883296617"></a><a name="en-us_topic_0000001058340507_p56883296617"></a>Triggered when the input content changes. The input content, number of rows, and row height are obtained through the parameters.</p>
226<div class="note" id="en-us_topic_0000001058340507_note42491433440"><a name="en-us_topic_0000001058340507_note42491433440"></a><a name="en-us_topic_0000001058340507_note42491433440"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058340507_p1524933204418"><a name="en-us_topic_0000001058340507_p1524933204418"></a><a name="en-us_topic_0000001058340507_p1524933204418"></a>If you change the <strong id="en-us_topic_0000001058340507_b3433058436"><a name="en-us_topic_0000001058340507_b3433058436"></a><a name="en-us_topic_0000001058340507_b3433058436"></a>value</strong> attribute directly, this event will not be triggered. <sup id="en-us_topic_0000001058340507_sup1674874183511"><a name="en-us_topic_0000001058340507_sup1674874183511"></a><a name="en-us_topic_0000001058340507_sup1674874183511"></a>5+</sup></p>
227</div></div>
228</td>
229</tr>
230<tr id="en-us_topic_0000001058340507_row122281128165410"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_p3284165512920"><a name="en-us_topic_0000001058340507_p3284165512920"></a><a name="en-us_topic_0000001058340507_p3284165512920"></a>translate<sup id="en-us_topic_0000001058340507_sup1220715214307"><a name="en-us_topic_0000001058340507_sup1220715214307"></a><a name="en-us_topic_0000001058340507_sup1220715214307"></a>5+</sup></p>
231</td>
232<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_p112841555916"><a name="en-us_topic_0000001058340507_p112841555916"></a><a name="en-us_topic_0000001058340507_p112841555916"></a>{ value: selectedText }</p>
233</td>
234<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_p132842551198"><a name="en-us_topic_0000001058340507_p132842551198"></a><a name="en-us_topic_0000001058340507_p132842551198"></a>Triggered when users tap the translate button displayed in the pop menu after they select a text segment. The selected text content is returned.</p>
235</td>
236</tr>
237<tr id="en-us_topic_0000001058340507_row286017313541"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_p9677163420503"><a name="en-us_topic_0000001058340507_p9677163420503"></a><a name="en-us_topic_0000001058340507_p9677163420503"></a>share<sup id="en-us_topic_0000001058340507_sup107382026312"><a name="en-us_topic_0000001058340507_sup107382026312"></a><a name="en-us_topic_0000001058340507_sup107382026312"></a>5+</sup></p>
238</td>
239<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_p86771934155012"><a name="en-us_topic_0000001058340507_p86771934155012"></a><a name="en-us_topic_0000001058340507_p86771934155012"></a>{ value: selectedText }</p>
240</td>
241<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_p1967743413507"><a name="en-us_topic_0000001058340507_p1967743413507"></a><a name="en-us_topic_0000001058340507_p1967743413507"></a>Triggered when users tap the share button displayed in the pop menu after they select a text segment. The selected text content is returned.</p>
242</td>
243</tr>
244<tr id="en-us_topic_0000001058340507_row1143814381541"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_p12601236205015"><a name="en-us_topic_0000001058340507_p12601236205015"></a><a name="en-us_topic_0000001058340507_p12601236205015"></a>search<sup id="en-us_topic_0000001058340507_sup7157178113113"><a name="en-us_topic_0000001058340507_sup7157178113113"></a><a name="en-us_topic_0000001058340507_sup7157178113113"></a>5+</sup></p>
245</td>
246<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_p1626016369501"><a name="en-us_topic_0000001058340507_p1626016369501"></a><a name="en-us_topic_0000001058340507_p1626016369501"></a>{ value: selectedText }</p>
247</td>
248<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_p1026053614504"><a name="en-us_topic_0000001058340507_p1026053614504"></a><a name="en-us_topic_0000001058340507_p1026053614504"></a>Triggered when users tap the search button displayed in the pop menu after they select a text segment. The selected text content is returned.</p>
249</td>
250</tr>
251<tr id="en-us_topic_0000001058340507_row144191735105415"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_p1712579511"><a name="en-us_topic_0000001058340507_p1712579511"></a><a name="en-us_topic_0000001058340507_p1712579511"></a>optionselect<sup id="en-us_topic_0000001058340507_sup053512117315"><a name="en-us_topic_0000001058340507_sup053512117315"></a><a name="en-us_topic_0000001058340507_sup053512117315"></a>5+</sup></p>
252</td>
253<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_p07155775115"><a name="en-us_topic_0000001058340507_p07155775115"></a><a name="en-us_topic_0000001058340507_p07155775115"></a>{ index:optionIndex, value: selectedText }</p>
254</td>
255<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_p1671157105114"><a name="en-us_topic_0000001058340507_p1671157105114"></a><a name="en-us_topic_0000001058340507_p1671157105114"></a>Triggered when users click a menu option displayed in the pop menu after they select a text segment. This event is valid only when the <strong id="en-us_topic_0000001058340507_b8603110718"><a name="en-us_topic_0000001058340507_b8603110718"></a><a name="en-us_topic_0000001058340507_b8603110718"></a>menuoptions</strong> attribute is set. The option index and selected text content are returned.</p>
256</td>
257</tr>
258<tr id="en-us_topic_0000001058340507_row336512569516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a58fb4b1d870f466e955cf5ea879c4d4a"></a>touchstart</p>
259</td>
260<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_abefebd99301b4bdebb798d1b9df24d8d"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p>
261</td>
262<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_afa4290e2620f4f5fbdcb74dcae84e536"></a>The tapping starts</p>
263</td>
264</tr>
265<tr id="en-us_topic_0000001058340507_row1236519563517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a23e0317cfee94650be4dcd2280c3e94e"></a>touchmove</p>
266</td>
267<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_aea26e4f9575044dc8fb65080f3a6684a"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p>
268</td>
269<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a37f7cc43d82c4ee18512bd079349079d"></a>The tapping moves</p>
270</td>
271</tr>
272<tr id="en-us_topic_0000001058340507_row18365145615516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_ad0728eeac06143bbb4a6fdf1ed5c6d91"></a>touchcancel</p>
273</td>
274<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a59e2819eae2b4d3e935991b43156347b"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p>
275</td>
276<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a739d9ef0db624f6284554aeaeddffa0a"></a>The tapping is interrupted</p>
277</td>
278</tr>
279<tr id="en-us_topic_0000001058340507_row63651566517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a233e2f6ff39f49fd97b8f233875d01d4"></a>touchend</p>
280</td>
281<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a439e69aaf158448e99b3c81cbc9fd624"></a><a href="universal-events.md#en-us_topic_0000001058460527_tdb541af4e4db41d7a92e9b6e3c93f606">TouchEvent</a></p>
282</td>
283<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a05c0fe4e05ef4154acee8a06ad56a2de"></a>The tapping ends</p>
284</td>
285</tr>
286<tr id="en-us_topic_0000001058340507_row1536575611516"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a2fb4de45b1594f6fa1a7da45ce0db57f"></a>click</p>
287</td>
288<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_af86bf1da40504ed2a8d14213a42536ab"></a>-</p>
289</td>
290<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a1d32f00c38c440ddaa63c3f3e01d4e09"></a>A component is clicked</p>
291</td>
292</tr>
293<tr id="en-us_topic_0000001058340507_row183661256758"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_aa7dc63d1b4924872bbff6a6a100e928f"></a>longpress</p>
294</td>
295<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a39186f4ff74544d89ace56ea87d9937b"></a>-</p>
296</td>
297<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_a44b8585170304b5596c41714772e605e"></a>A component is long pressed</p>
298</td>
299</tr>
300<tr id="en-us_topic_0000001058340507_row5366185613517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_p12706561061"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_p12706561061"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_p12706561061"></a>swipe<sup id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_sup35424382912"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_sup35424382912"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_sup35424382912"></a>5+</sup></p>
301</td>
302<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_p11711056161"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_p11711056161"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_p11711056161"></a><a href="universal-events.md#en-us_topic_0000001058460527_table111811577714">SwipeEvent</a></p>
303</td>
304<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001058460527_p2711556162"><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_p2711556162"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001058460527_p2711556162"></a>A user quickly swipes on a component.</p>
305</td>
306</tr>
307</tbody>
308</table>
309
310## Style<a name="en-us_topic_0000001058340507_section182794053"></a>
311
312<a name="en-us_topic_0000001058340507_table1744514388541"></a>
313<table><thead align="left"><tr id="en-us_topic_0000001058340507_row1244614388545"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a>Name</p>
314</th>
315<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a>Type</p>
316</th>
317<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a>Default Value</p>
318</th>
319<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058340507_p117421754619"><a name="en-us_topic_0000001058340507_p117421754619"></a><a name="en-us_topic_0000001058340507_p117421754619"></a>Mandatory</p>
320</th>
321<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a>Description</p>
322</th>
323</tr>
324</thead>
325<tbody><tr id="en-us_topic_0000001058340507_row8663856163214"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p1274682883012"><a name="en-us_topic_0000001058340507_p1274682883012"></a><a name="en-us_topic_0000001058340507_p1274682883012"></a>color</p>
326</td>
327<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p8746828143011"><a name="en-us_topic_0000001058340507_p8746828143011"></a><a name="en-us_topic_0000001058340507_p8746828143011"></a>&lt;color&gt;</p>
328</td>
329<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p5746172818308"><a name="en-us_topic_0000001058340507_p5746172818308"></a><a name="en-us_topic_0000001058340507_p5746172818308"></a>Smartphone: #e6000000</p>
330<p id="en-us_topic_0000001058340507_p107461228143014"><a name="en-us_topic_0000001058340507_p107461228143014"></a><a name="en-us_topic_0000001058340507_p107461228143014"></a>Smart TV: #e6ffffff</p>
331</td>
332<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p18746828103019"><a name="en-us_topic_0000001058340507_p18746828103019"></a><a name="en-us_topic_0000001058340507_p18746828103019"></a>No</p>
333</td>
334<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_p074622811301"><a name="en-us_topic_0000001058340507_p074622811301"></a><a name="en-us_topic_0000001058340507_p074622811301"></a>Text color of the multi-line text box.</p>
335</td>
336</tr>
337<tr id="en-us_topic_0000001058340507_row11218125312323"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p1274617287304"><a name="en-us_topic_0000001058340507_p1274617287304"></a><a name="en-us_topic_0000001058340507_p1274617287304"></a>font-size</p>
338</td>
339<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p157471428183015"><a name="en-us_topic_0000001058340507_p157471428183015"></a><a name="en-us_topic_0000001058340507_p157471428183015"></a>&lt;length&gt;</p>
340</td>
341<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p274782817307"><a name="en-us_topic_0000001058340507_p274782817307"></a><a name="en-us_topic_0000001058340507_p274782817307"></a>Smartphone: 16 px</p>
342<p id="en-us_topic_0000001058340507_p074732815304"><a name="en-us_topic_0000001058340507_p074732815304"></a><a name="en-us_topic_0000001058340507_p074732815304"></a>Smart TV: 18 px</p>
343</td>
344<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p1474742813016"><a name="en-us_topic_0000001058340507_p1474742813016"></a><a name="en-us_topic_0000001058340507_p1474742813016"></a>No</p>
345</td>
346<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_p374722823019"><a name="en-us_topic_0000001058340507_p374722823019"></a><a name="en-us_topic_0000001058340507_p374722823019"></a>Font size of the multi-line text box. </p>
347</td>
348</tr>
349<tr id="en-us_topic_0000001058340507_row95531150203214"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p374782823019"><a name="en-us_topic_0000001058340507_p374782823019"></a><a name="en-us_topic_0000001058340507_p374782823019"></a>allow-scale</p>
350</td>
351<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p274762833014"><a name="en-us_topic_0000001058340507_p274762833014"></a><a name="en-us_topic_0000001058340507_p274762833014"></a>boolean</p>
352</td>
353<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p1674712289309"><a name="en-us_topic_0000001058340507_p1674712289309"></a><a name="en-us_topic_0000001058340507_p1674712289309"></a>true</p>
354</td>
355<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p16747628133011"><a name="en-us_topic_0000001058340507_p16747628133011"></a><a name="en-us_topic_0000001058340507_p16747628133011"></a>No</p>
356</td>
357<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_p67479289305"><a name="en-us_topic_0000001058340507_p67479289305"></a><a name="en-us_topic_0000001058340507_p67479289305"></a>Whether the font size changes with the system's font size settings.</p>
358<div class="note" id="en-us_topic_0000001058340507_note10747122813019"><a name="en-us_topic_0000001058340507_note10747122813019"></a><a name="en-us_topic_0000001058340507_note10747122813019"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058340507_p674822863011"><a name="en-us_topic_0000001058340507_p674822863011"></a><a name="en-us_topic_0000001058340507_p674822863011"></a>If the <strong id="en-us_topic_0000001058340507_b17476559527"><a name="en-us_topic_0000001058340507_b17476559527"></a><a name="en-us_topic_0000001058340507_b17476559527"></a>config-changes</strong> tag of <strong id="en-us_topic_0000001058340507_b144811518525"><a name="en-us_topic_0000001058340507_b144811518525"></a><a name="en-us_topic_0000001058340507_b144811518525"></a>fontSize</strong> is configured for abilities in the <strong id="en-us_topic_0000001058340507_b19482145115215"><a name="en-us_topic_0000001058340507_b19482145115215"></a><a name="en-us_topic_0000001058340507_b19482145115215"></a>config.json</strong> file, the setting takes effect without application restart.</p>
359</div></div>
360</td>
361</tr>
362<tr id="en-us_topic_0000001058340507_row12745104714322"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p1674892813302"><a name="en-us_topic_0000001058340507_p1674892813302"></a><a name="en-us_topic_0000001058340507_p1674892813302"></a>placeholder-color</p>
363</td>
364<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p67481328133013"><a name="en-us_topic_0000001058340507_p67481328133013"></a><a name="en-us_topic_0000001058340507_p67481328133013"></a>&lt;color&gt;</p>
365</td>
366<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p13748128163011"><a name="en-us_topic_0000001058340507_p13748128163011"></a><a name="en-us_topic_0000001058340507_p13748128163011"></a>Smartphone: #99000000</p>
367<p id="en-us_topic_0000001058340507_p1774872843016"><a name="en-us_topic_0000001058340507_p1774872843016"></a><a name="en-us_topic_0000001058340507_p1774872843016"></a>Smart TV: #99ffffff</p>
368</td>
369<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p074872818307"><a name="en-us_topic_0000001058340507_p074872818307"></a><a name="en-us_topic_0000001058340507_p074872818307"></a>No</p>
370</td>
371<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_p17748172811309"><a name="en-us_topic_0000001058340507_p17748172811309"></a><a name="en-us_topic_0000001058340507_p17748172811309"></a>Color of the hint text in the multi-line text box. This attribute is available when the component type is set to <strong id="en-us_topic_0000001058340507_b18634184482815"><a name="en-us_topic_0000001058340507_b18634184482815"></a><a name="en-us_topic_0000001058340507_b18634184482815"></a>text</strong>, <strong id="en-us_topic_0000001058340507_b9639184492812"><a name="en-us_topic_0000001058340507_b9639184492812"></a><a name="en-us_topic_0000001058340507_b9639184492812"></a>email</strong>, <strong id="en-us_topic_0000001058340507_b16401844102816"><a name="en-us_topic_0000001058340507_b16401844102816"></a><a name="en-us_topic_0000001058340507_b16401844102816"></a>date</strong>, <strong id="en-us_topic_0000001058340507_b10640154414282"><a name="en-us_topic_0000001058340507_b10640154414282"></a><a name="en-us_topic_0000001058340507_b10640154414282"></a>time</strong>, <strong id="en-us_topic_0000001058340507_b11640194418281"><a name="en-us_topic_0000001058340507_b11640194418281"></a><a name="en-us_topic_0000001058340507_b11640194418281"></a>number</strong>, or <strong id="en-us_topic_0000001058340507_b8640144417289"><a name="en-us_topic_0000001058340507_b8640144417289"></a><a name="en-us_topic_0000001058340507_b8640144417289"></a>password</strong>.</p>
372</td>
373</tr>
374<tr id="en-us_topic_0000001058340507_row864644453212"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p157481228143015"><a name="en-us_topic_0000001058340507_p157481228143015"></a><a name="en-us_topic_0000001058340507_p157481228143015"></a>font-weight</p>
375</td>
376<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p177482281306"><a name="en-us_topic_0000001058340507_p177482281306"></a><a name="en-us_topic_0000001058340507_p177482281306"></a>number | string</p>
377</td>
378<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p574822817301"><a name="en-us_topic_0000001058340507_p574822817301"></a><a name="en-us_topic_0000001058340507_p574822817301"></a>normal</p>
379</td>
380<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p18749928113012"><a name="en-us_topic_0000001058340507_p18749928113012"></a><a name="en-us_topic_0000001058340507_p18749928113012"></a>No</p>
381</td>
382<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_p12749928143015"><a name="en-us_topic_0000001058340507_p12749928143015"></a><a name="en-us_topic_0000001058340507_p12749928143015"></a>Font weight. For details, see <a href="text.md#en-us_topic_0000001058830803_section5775351116">font-weight</a> of the <strong id="en-us_topic_0000001058340507_b780883514536"><a name="en-us_topic_0000001058340507_b780883514536"></a><a name="en-us_topic_0000001058340507_b780883514536"></a>text</strong> component.</p>
383</td>
384</tr>
385<tr id="en-us_topic_0000001058340507_row187021465346"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_p6343135813017"><a name="en-us_topic_0000001058340507_p6343135813017"></a><a name="en-us_topic_0000001058340507_p6343135813017"></a>font-family</p>
386</td>
387<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_p173439589017"><a name="en-us_topic_0000001058340507_p173439589017"></a><a name="en-us_topic_0000001058340507_p173439589017"></a>string</p>
388</td>
389<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_p18343155811020"><a name="en-us_topic_0000001058340507_p18343155811020"></a><a name="en-us_topic_0000001058340507_p18343155811020"></a>sans-serif</p>
390</td>
391<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p134314581105"><a name="en-us_topic_0000001058340507_p134314581105"></a><a name="en-us_topic_0000001058340507_p134314581105"></a>No</p>
392</td>
393<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_p83431858109"><a name="en-us_topic_0000001058340507_p83431858109"></a><a name="en-us_topic_0000001058340507_p83431858109"></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>
394</td>
395</tr>
396<tr id="en-us_topic_0000001058340507_row13446238145410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"></a>width</p>
397</td>
398<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"></a>&lt;length&gt; | &lt;percentage&gt;</p>
399</td>
400<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p3948114217528"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p3948114217528"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p3948114217528"></a>-</p>
401</td>
402<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p13174101704612"><a name="en-us_topic_0000001058340507_p13174101704612"></a><a name="en-us_topic_0000001058340507_p13174101704612"></a>No</p>
403</td>
404<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p624653010258"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p624653010258"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p624653010258"></a>Component width.</p>
405<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p84811050134010"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p84811050134010"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p84811050134010"></a>If this attribute is not set, the width required for the element content is used. </p>
406</td>
407</tr>
408<tr id="en-us_topic_0000001058340507_row7446738195418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a>height</p>
409</td>
410<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"></a>&lt;length&gt;<span id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph11748352163918"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph11748352163918"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph11748352163918"></a></span> | &lt;percentage&gt;</p>
411</td>
412<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"></a>-</p>
413</td>
414<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p71741417194619"><a name="en-us_topic_0000001058340507_p71741417194619"></a><a name="en-us_topic_0000001058340507_p71741417194619"></a>No</p>
415</td>
416<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1477601264"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1477601264"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1477601264"></a>Component height.</p>
417<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p208761554184020"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p208761554184020"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p208761554184020"></a>If this length attribute is not set, the length required for the element content is used. </p>
418</td>
419</tr>
420<tr id="en-us_topic_0000001058340507_row18446638145412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8ff18465b8f0453c836067e5902b7eb6"></a>padding</p>
421</td>
422<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a53628f36a25a4823a901d5b66860f44e"></a>&lt;length&gt; | &lt;percentage&gt;<sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup1886516813013"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup1886516813013"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup1886516813013"></a>5+</sup></p>
423</td>
424<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_adc824deaee924821a47a798b589f22c8"></a>0</p>
425</td>
426<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p19729127112814"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p19729127112814"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p19729127112814"></a>No</p>
427</td>
428<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p157435053316"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p157435053316"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p157435053316"></a>Shorthand attribute to set all padding attributes.</p>
429<div class="p" id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a68a6d5ddc59c49f0aaddd82e75932524"></a>The attribute can have one to four values:<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul15202134923211"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul15202134923211"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul15202134923211"><li><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p10614155353215"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p10614155353215"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p10614155353215"></a>If you set only one value, it specifies the padding for four sides.</p>
430</li><li><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p10614175393216"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p10614175393216"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p10614175393216"></a>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.</p>
431</li><li><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p8614205393214"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p8614205393214"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p8614205393214"></a>If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.</p>
432</li><li><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p106141853193215"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p106141853193215"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p106141853193215"></a>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).</p>
433</li></ul>
434</div>
435</td>
436</tr>
437<tr id="en-us_topic_0000001058340507_row24464380544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ab0185a7b5a4944f3b38f8c71c8ca794d"></a>padding-[left|top|right|bottom]</p>
438</td>
439<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a49dd523e2f1b4253a19231e776dc1951"></a>&lt;length&gt; | &lt;percentage&gt;<sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup19949912807"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup19949912807"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup19949912807"></a>5+</sup></p>
440</td>
441<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af52ecd93919b4fa08ae4d376e3d544a2"></a>0</p>
442</td>
443<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p11729374289"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p11729374289"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p11729374289"></a>No</p>
444</td>
445<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a3575ab240d384ab1a21119ea3428ab7d"></a>Left, top, right, and bottom padding (in px).</p>
446</td>
447</tr>
448<tr id="en-us_topic_0000001058340507_row1144723845412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p769124717365"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p769124717365"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p769124717365"></a>padding-[start|end]</p>
449</td>
450<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p157617124374"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p157617124374"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p157617124374"></a>&lt;length&gt; | &lt;percentage&gt;<sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup8490161513019"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup8490161513019"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup8490161513019"></a>5+</sup></p>
451</td>
452<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1069144703616"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1069144703616"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1069144703616"></a>0</p>
453</td>
454<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1373027182819"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1373027182819"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1373027182819"></a>No</p>
455</td>
456<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1269184753610"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1269184753610"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1269184753610"></a>Start and end padding.</p>
457</td>
458</tr>
459<tr id="en-us_topic_0000001058340507_row11447438175410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"></a>margin</p>
460</td>
461<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a>&lt;length&gt; | &lt;percentage&gt;<sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup1433352175220"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup1433352175220"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup1433352175220"></a>5+</sup></p>
462</td>
463<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"></a>0</p>
464</td>
465<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p4730774285"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p4730774285"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p4730774285"></a>No</p>
466</td>
467<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"></a>Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:</p>
468<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul5333133311105"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul5333133311105"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul5333133311105"><li><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p03345339103"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p03345339103"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p03345339103"></a>If you set only one value, it specifies the margin for all the four sides.</p>
469</li><li><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1133420334108"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1133420334108"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1133420334108"></a>If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.</p>
470</li><li><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p193341533191015"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p193341533191015"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p193341533191015"></a>If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.</p>
471</li><li><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p733412334102"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p733412334102"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p733412334102"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p>
472</li></ul>
473</td>
474</tr>
475<tr id="en-us_topic_0000001058340507_row144473383544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"></a>margin-[left|top|right|bottom]</p>
476</td>
477<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"></a>&lt;length&gt; | &lt;percentage&gt;<sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup378331720532"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup378331720532"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup378331720532"></a>5+</sup></p>
478</td>
479<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"></a>0</p>
480</td>
481<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p773013742811"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p773013742811"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p773013742811"></a>No</p>
482</td>
483<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"></a>Left, top, right, and bottom margins.</p>
484</td>
485</tr>
486<tr id="en-us_topic_0000001058340507_row944743811541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p9492107123816"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p9492107123816"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p9492107123816"></a>margin-[start|end]</p>
487</td>
488<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p157617124374_1"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p157617124374_1"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p157617124374_1"></a>&lt;length&gt; | &lt;percentage&gt;<sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup8490161513019_1"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup8490161513019_1"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup8490161513019_1"></a>5+</sup></p>
489</td>
490<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1549213793811"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1549213793811"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1549213793811"></a>0</p>
491</td>
492<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p117511744618"><a name="en-us_topic_0000001058340507_p117511744618"></a><a name="en-us_topic_0000001058340507_p117511744618"></a>No</p>
493</td>
494<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1049212715388"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1049212715388"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1049212715388"></a>Start and end margins.</p>
495</td>
496</tr>
497<tr id="en-us_topic_0000001058340507_row16447238155411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a222bb48f24014f2eb2b16a1a840bbebb"></a>border</p>
498</td>
499<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a79b4eaf9983c44d0aad39ff04d0997a8"></a>-</p>
500</td>
501<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aac320f4f0a42401aa7fa778d9829d77c"></a>0</p>
502</td>
503<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p11175131715467"><a name="en-us_topic_0000001058340507_p11175131715467"></a><a name="en-us_topic_0000001058340507_p11175131715467"></a>No</p>
504</td>
505<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a9cd962871a4c467a8e1ef452621d5cd7"></a>Shorthand attribute to set all borders. You can set <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b79128342503"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b79128342503"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b79128342503"></a>border-width</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b9366173919505"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b9366173919505"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b9366173919505"></a>border-style</strong>, and <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b184351248205019"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b184351248205019"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b184351248205019"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p>
506</td>
507</tr>
508<tr id="en-us_topic_0000001058340507_row4447138115414"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a987708c0864a4128af094334f1b024b3"></a>border-style</p>
509</td>
510<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p513631613319"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p513631613319"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p513631613319"></a>string</p>
511</td>
512<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2567083af59c40e58e3e4d9b0ddf1485"></a>solid</p>
513</td>
514<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p617531717464"><a name="en-us_topic_0000001058340507_p617531717464"></a><a name="en-us_topic_0000001058340507_p617531717464"></a>No</p>
515</td>
516<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p342285712314"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p342285712314"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p342285712314"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p>
517<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul1470834505612"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul1470834505612"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul1470834505612"><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b143453286360"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b143453286360"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b143453286360"></a>dotted</strong>: Dotted border. The radius of a dot is half of border-width.</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b792117280367"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b792117280367"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b792117280367"></a>dashed</strong>: Dashed border</li></ul>
518<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul15621125545612"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul15621125545612"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul15621125545612"><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1335862963610"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1335862963610"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1335862963610"></a>solid</strong>: Solid border</li></ul>
519</td>
520</tr>
521<tr id="en-us_topic_0000001058340507_row1656512239262"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p119531437370"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p119531437370"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p119531437370"></a>border-[left|top|right|bottom]-style</p>
522</td>
523<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p129532037175"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p129532037175"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p129532037175"></a>string</p>
524</td>
525<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p495312372717"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p495312372717"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p495312372717"></a>solid</p>
526</td>
527<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p169534375717"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p169534375717"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p169534375717"></a>No</p>
528</td>
529<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p595353718719"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p595353718719"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p595353718719"></a>Styles of the left, top, right, and bottom borders. The available values are <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b17769171311540"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b17769171311540"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b17769171311540"></a>dotted</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b237141519547"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b237141519547"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b237141519547"></a>dashed</strong>, and <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b8949161613540"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b8949161613540"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b8949161613540"></a>solid</strong>.</p>
530</td>
531</tr>
532<tr id="en-us_topic_0000001058340507_row19448113811542"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8afd82b1aba547d3b0188b749518b2de"></a>border-[left|top|right|bottom]</p>
533</td>
534<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ac4b8a3b39e5446b5868f1f2989dc9590"></a>-</p>
535</td>
536<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a3420bc82bd17458ab82fa996ade7064c"></a>-</p>
537</td>
538<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p67303762810"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p67303762810"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p67303762810"></a>No</p>
539</td>
540<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af4178a066c344412afbd38f4b0c44818"></a>Shorthand attribute to set the borders for every side respectively. You can set <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b122415514554"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b122415514554"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b122415514554"></a>border-width</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b12296178135513"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b12296178135513"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b12296178135513"></a>border-style</strong>, and <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1129701210553"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1129701210553"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1129701210553"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p>
541</td>
542</tr>
543<tr id="en-us_topic_0000001058340507_row124481638165417"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_adf0e0afedc774afca9cda0e509391029"></a>border-width</p>
544</td>
545<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a0782ea2c45eb4864a8df82f30dd2cd5f"></a>&lt;length&gt;</p>
546</td>
547<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a395cbedd521145bd820b9171ee2dd7ac"></a>0</p>
548</td>
549<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p16175131724618"><a name="en-us_topic_0000001058340507_p16175131724618"></a><a name="en-us_topic_0000001058340507_p16175131724618"></a>No</p>
550</td>
551<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a7ae60621ea3341818a03bfdffa641894"></a>Shorthand attribute to set the width of all borders<span id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph07997369365"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph07997369365"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph07997369365"></a>, or separately set the width of each border</span>.</p>
552</td>
553</tr>
554<tr id="en-us_topic_0000001058340507_row54481038165410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a7371edc07c664266a2e1866f31ad0d0c"></a>border-[left|top|right|bottom]-width</p>
555</td>
556<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2faa532b841948a7b6598542b4eccc7b"></a>&lt;length&gt;</p>
557</td>
558<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a87f38cfa47f54bc18c32f9671c0f9ca6"></a>0</p>
559</td>
560<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p11175151717466"><a name="en-us_topic_0000001058340507_p11175151717466"></a><a name="en-us_topic_0000001058340507_p11175151717466"></a>No</p>
561</td>
562<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a20386e66c3834d5f96cf9435c4715c5b"></a>Attribute to set widths of left, top, right, and bottom borders.</p>
563</td>
564</tr>
565<tr id="en-us_topic_0000001058340507_row1744817385547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a40a816cf0a03489d81f209a8aa7d81a6"></a>border-color</p>
566</td>
567<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_afcc7c948ae0947b2a78002d31f2f9748"></a>&lt;color&gt;</p>
568</td>
569<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ae0909d2b896342f9b2196fe0dce72920"></a>black</p>
570</td>
571<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p1017518177465"><a name="en-us_topic_0000001058340507_p1017518177465"></a><a name="en-us_topic_0000001058340507_p1017518177465"></a>No</p>
572</td>
573<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a76fd98995e1d4217aa703fecd69325c7"></a>Shorthand attribute to set the color of all borders<span id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph9587639113619"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph9587639113619"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph9587639113619"></a>, or separately set the color of each border</span>.</p>
574</td>
575</tr>
576<tr id="en-us_topic_0000001058340507_row844813835410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2afc646d6a2549548bcd5c4b9bed1fb5"></a>border-[left|top|right|bottom]-color</p>
577</td>
578<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a34556866a4f54f5da88f148fc698867b"></a>&lt;color&gt;</p>
579</td>
580<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8ff58e18553846a38e82c69149e2aa30"></a>black</p>
581</td>
582<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p11175417184611"><a name="en-us_topic_0000001058340507_p11175417184611"></a><a name="en-us_topic_0000001058340507_p11175417184611"></a>No</p>
583</td>
584<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a5c85947d388c4c7fbf0de07b022bb44e"></a>Attribute to set colors of left, top, right, and bottom borders.</p>
585</td>
586</tr>
587<tr id="en-us_topic_0000001058340507_row944813389540"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a65974e3078c447a383fb9237cc4ffa32"></a>border-radius</p>
588</td>
589<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a413fd0aea8b243349a19f825e96ee8b6"></a>&lt;length&gt;</p>
590</td>
591<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af786857698c74e259f52589a6670a0a1"></a>-</p>
592</td>
593<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p67306752816"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p67306752816"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p67306752816"></a>No</p>
594</td>
595<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a52ca834f42124d3b8b12bbf54914fc96"></a>Attribute to set the radius of round borders of an element. <span id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph1249443123611"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph1249443123611"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph1249443123611"></a>This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b124211434362"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b124211434362"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b124211434362"></a>border-width</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b124894383615"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b124894383615"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b124894383615"></a>border-color</strong>, or <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b7166134516465"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b7166134516465"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b7166134516465"></a>border-style</strong> for all the borders at the same time.</span></p>
596</td>
597</tr>
598<tr id="en-us_topic_0000001058340507_row104494382546"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a466f1f8bc2fb404e82e8417c5133eacb"></a>border-[top|bottom]-[left|right]-radius</p>
599</td>
600<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a499fe910d0284647abc48b1bd0eb4868"></a>&lt;length&gt;</p>
601</td>
602<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ac142d1054eee499f948069f46129c492"></a>-</p>
603</td>
604<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p27305718283"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p27305718283"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p27305718283"></a>No</p>
605</td>
606<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a63757091a86c4ced97f0c39d37a2117c"></a>Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners</p>
607</td>
608</tr>
609<tr id="en-us_topic_0000001058340507_row1344912384548"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ae335be2c6150440fb31b40b1ca117858"></a>background</p>
610</td>
611<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a394a81171c5c4d1aa81b94fc5d2f0f07"></a>&lt;linear-gradient&gt;</p>
612</td>
613<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a0734de04e90e470cb608e8d5f42c6874"></a>-</p>
614</td>
615<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p15730197132811"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p15730197132811"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p15730197132811"></a>No</p>
616</td>
617<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a1d2985ee819d4cfd87861080354def51"></a><a name="en-us_topic_0000001058340507_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_0000001058340507_en-us_topic_0000001059340528_b389373419292"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b389373419292"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b389373419292"></a>background-color</strong> or <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b0399637142918"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b0399637142918"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b0399637142918"></a>background-image</strong>.</p>
618</td>
619</tr>
620<tr id="en-us_topic_0000001058340507_row15449838185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2977672444224b738a566c61225961c2"></a>background-color</p>
621</td>
622<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a87186748ed7c4694aef0095d8a7f8e43"></a>&lt;color&gt;</p>
623</td>
624<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2775a3cca8994bec9b754af0d2455eb5"></a>-</p>
625</td>
626<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p17730577282"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p17730577282"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p17730577282"></a>No</p>
627</td>
628<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a372b6089bf9746f091c91fa49b571f1d"></a>Background color.</p>
629</td>
630</tr>
631<tr id="en-us_topic_0000001058340507_row54491338115412"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ab2dff80cd59c4db1bf4293172f89735e"></a>background-image</p>
632</td>
633<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ad9a7e9f2469b45238a6a0ac6da232286"></a>string</p>
634</td>
635<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a73fb72c96edd488ba74c364568e345c6"></a>-</p>
636</td>
637<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p7730976285"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p7730976285"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p7730976285"></a>No</p>
638</td>
639<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a24de29e3cb4d476fabe55d48d69350a8"></a>Background image. Currently, this attribute is not compatible with <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b17699154763620"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b17699154763620"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b17699154763620"></a>background-color</strong> or <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b87001647163613"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b87001647163613"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b87001647163613"></a>background</strong>. Local image resources are supported.</p>
640<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p45914251572"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p45914251572"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p45914251572"></a>Example:</p>
641<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p16184973578"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p16184973578"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p16184973578"></a>background-image: url("/common/background.png")</p>
642</td>
643</tr>
644<tr id="en-us_topic_0000001058340507_row6449238185416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_af81424fd1fbf4f5da65ea5d136390494"></a>background-size</p>
645</td>
646<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul1065173641310"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul1065173641310"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul1065173641310"><li>string</li><li>&lt;length&gt; &lt;length&gt;</li><li>&lt;percentage&gt; &lt;percentage&gt;</li></ul>
647</td>
648<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a222f4e09239a4ab08880d1d9544d337c"></a>auto</p>
649</td>
650<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p137309714282"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p137309714282"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p137309714282"></a>No</p>
651</td>
652<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p91971112114318"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p91971112114318"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p91971112114318"></a>Background image size.</p>
653<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul41331853154111"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul41331853154111"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul41331853154111"><li>The <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1229715499365"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1229715499365"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1229715499365"></a>string</strong> values are as follows:<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul13611494111"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul13611494111"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul13611494111"><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b4759749163610"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b4759749163610"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b4759749163610"></a>contain</strong>: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b437619381712"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b437619381712"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b437619381712"></a>cover</strong>: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1425512535366"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1425512535366"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1425512535366"></a>auto</strong>: The original image width-height ratio is retained.</li></ul>
654</li><li>The two <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b13309145193614"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b13309145193614"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b13309145193614"></a>&lt;length&gt;</strong> values are as follows:<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1840244924418"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1840244924418"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1840244924418"></a>Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b146661156143617"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b146661156143617"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b146661156143617"></a>auto</strong> by default.</p>
655</li><li>The two <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1667415763613"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1667415763613"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1667415763613"></a>&lt;percentage&gt;</strong> values are as follows:<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p17936154410457"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p17936154410457"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p17936154410457"></a>Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1524319254"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1524319254"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1524319254"></a>auto</strong> by default.</p>
656</li></ul>
657</td>
658</tr>
659<tr id="en-us_topic_0000001058340507_row94491238155415"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a9957170386754fb5b648ba2114bd52d4"></a>background-repeat</p>
660</td>
661<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a155b4cc325e747279694d36c2fa69bcc"></a>string</p>
662</td>
663<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a82029c0dc1d540cf994f690b451c48f4"></a>repeat</p>
664</td>
665<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1673015702810"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1673015702810"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1673015702810"></a>No</p>
666</td>
667<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_afb8e41c117884b368a0f1df348be8e54"></a>How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.</p>
668<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul8236153103612"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul8236153103612"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul8236153103612"><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1363463710"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1363463710"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1363463710"></a>repeat</strong>: Repeatedly draws images along the x-axis and y-axis at the same time.</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b267416916377"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b267416916377"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b267416916377"></a>repeat-x</strong>: Repeatedly draws images along the x-axis.</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b625561011379"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b625561011379"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b625561011379"></a>repeat-y</strong>: Repeatedly draws images along the y-axis.</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1122181133715"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1122181133715"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1122181133715"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul>
669</td>
670</tr>
671<tr id="en-us_topic_0000001058340507_row94491738105419"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a709eb4a9fa87428897bebb4a98693df2"></a>background-position</p>
672</td>
673<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul8874155216502"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul8874155216502"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul8874155216502"><li>string string</li><li>&lt;length&gt; &lt;length&gt;</li><li>&lt;percentage&gt; &lt;percentage&gt;</li></ul>
674</td>
675<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a6f8f5d1c92f447bd868a841ad1a33cb1"></a>0px 0px</p>
676</td>
677<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p173010720280"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p173010720280"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p173010720280"></a>No</p>
678</td>
679<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul1590812103363"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul1590812103363"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul1590812103363"><li>Using keywords: If only one keyword is specified, the other value is <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b5234102011540"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b5234102011540"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b5234102011540"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul1453531734716"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul1453531734716"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul1453531734716"><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b0982111273712"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b0982111273712"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b0982111273712"></a>left</strong>: leftmost in the horizontal direction</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b866713583912"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b866713583912"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b866713583912"></a>right</strong>: rightmost in the horizontal direction</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b5886013193716"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b5886013193716"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b5886013193716"></a>top</strong>: top in the vertical direction</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b84197142376"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b84197142376"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b84197142376"></a>bottom</strong>: bottom in the vertical direction</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b14894114103710"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b14894114103710"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b14894114103710"></a>center</strong>: center position</li></ul>
680</li></ul>
681<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul10908121023615"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul10908121023615"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul10908121023615"><li>Using <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b11401615193715"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b11401615193715"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b11401615193715"></a>&lt;length&gt;</strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1341381819379"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1341381819379"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1341381819379"></a>0 0</strong> indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b48671516183714"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b48671516183714"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b48671516183714"></a>50%</strong>.</li><li>Using <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b5492717163712"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b5492717163712"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b5492717163712"></a>&lt;percentage&gt;</strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b164741723183712"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b164741723183712"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b164741723183712"></a>0% 0%</strong> indicates the upper left corner. <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b64022245377"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b64022245377"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b64022245377"></a>100% 100%</strong> indicates the lower right corner. If only one value is specified, the other one is <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b7893424163718"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b7893424163718"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b7893424163718"></a>50%</strong>.</li><li>Using both <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b154811725193718"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b154811725193718"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b154811725193718"></a>&lt;percentage&gt;</strong> and <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b34834254377"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b34834254377"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b34834254377"></a>&lt;length&gt;</strong>.</li></ul>
682</td>
683</tr>
684<tr id="en-us_topic_0000001058340507_row20450143885416"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p134581712103910"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p134581712103910"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p134581712103910"></a>opacity</p>
685</td>
686<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a45185999ae584676af4c36467c2ade8b"></a>number</p>
687</td>
688<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a09ff20dda8e44794bca18c84f413d972"></a>1</p>
689</td>
690<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1873011722814"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1873011722814"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1873011722814"></a>No</p>
691</td>
692<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p122515161139"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p122515161139"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p122515161139"></a>Transparency of an element. The value ranges from <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1871715526385"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1871715526385"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1871715526385"></a>0</strong> to <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b177181452103815"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b177181452103815"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b177181452103815"></a>1</strong>. The value <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b13718155210380"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b13718155210380"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b13718155210380"></a>1</strong> means opaque, and <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b6718152103818"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b6718152103818"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b6718152103818"></a>0</strong> means completely transparent.</p>
693</td>
694</tr>
695<tr id="en-us_topic_0000001058340507_row1450123865418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aeda9e2f8d8344958bf4f43d429dcb55e"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aeda9e2f8d8344958bf4f43d429dcb55e"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aeda9e2f8d8344958bf4f43d429dcb55e"></a>display</p>
696</td>
697<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1544115441446"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1544115441446"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1544115441446"></a>string</p>
698<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aaaa164aa970b490fb048e5f260f1c661"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aaaa164aa970b490fb048e5f260f1c661"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aaaa164aa970b490fb048e5f260f1c661"></a></p>
699</td>
700<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aa5ce61466c9847dbb7f44852338d9006"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aa5ce61466c9847dbb7f44852338d9006"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aa5ce61466c9847dbb7f44852338d9006"></a>flex</p>
701</td>
702<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p167303762818"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p167303762818"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p167303762818"></a>No</p>
703</td>
704<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p23704018414"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p23704018414"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p23704018414"></a>How and whether to display the box containing an element. Available values are as follows:</p>
705<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul12227103394916"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul12227103394916"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul12227103394916"><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b57468289377"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b57468289377"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b57468289377"></a>flex</strong>: flexible layout</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b18887133293920"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b18887133293920"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b18887133293920"></a>none</strong>: The element is hidden.</li></ul>
706</td>
707</tr>
708<tr id="en-us_topic_0000001058340507_row194503380541"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aa2ed1da39c8e4ad78829712734226ab9"></a>visibility</p>
709</td>
710<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p15475737486"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p15475737486"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p15475737486"></a>string</p>
711<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aabfb0eb044194745af56c313f40e7781"></a></p>
712</td>
713<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_acaca80d4ef9a4f0d87adf92cb2d1ff9a"></a>visible</p>
714</td>
715<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p57301471281"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p57301471281"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p57301471281"></a>No</p>
716</td>
717<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1568839154517"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1568839154517"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1568839154517"></a>Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b15844103015378"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b15844103015378"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b15844103015378"></a>display</strong> attribute to <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b4845153013712"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b4845153013712"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b4845153013712"></a>none</strong>.) Available values are as follows:</p>
718<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul751984164920"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul751984164920"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul751984164920"><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b17429331133711"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b17429331133711"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b17429331133711"></a>visible</strong>: The element is visible.</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b109191231193710"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b109191231193710"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b109191231193710"></a>hidden</strong>: The element is hidden but still takes up space.</li></ul>
719<div class="note" id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note4549524649"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note4549524649"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note4549524649"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p25499241642"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p25499241642"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p25499241642"></a>If both <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b719810016405"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b719810016405"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b719810016405"></a>visibility</strong> and <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b187052264018"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b187052264018"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b187052264018"></a>display</strong> are set, only <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b107788924011"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b107788924011"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b107788924011"></a>display</strong> takes effect.</p>
720</div></div>
721</td>
722</tr>
723<tr id="en-us_topic_0000001058340507_row13450113811544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ad74a6a48aca7439e9344c18c26b4177e"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ad74a6a48aca7439e9344c18c26b4177e"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ad74a6a48aca7439e9344c18c26b4177e"></a>flex</p>
724</td>
725<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2e6e5192a1534872be5fcfd9f83e3fdc"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2e6e5192a1534872be5fcfd9f83e3fdc"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2e6e5192a1534872be5fcfd9f83e3fdc"></a>-</p>
726</td>
727<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8512eda38e25410685be8a8992890257"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8512eda38e25410685be8a8992890257"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a8512eda38e25410685be8a8992890257"></a>-</p>
728</td>
729<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1373057132812"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1373057132812"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1373057132812"></a>No</p>
730</td>
731<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a11c317cdfa7d4066878d86c6b3bcbd82"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a11c317cdfa7d4066878d86c6b3bcbd82"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a11c317cdfa7d4066878d86c6b3bcbd82"></a>How to divide available space of the parent component for a child component.</p>
732<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p6968144051814"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p6968144051814"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p6968144051814"></a>You can set one, two<sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup894453017315"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup894453017315"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup894453017315"></a>5+</sup>, or three<sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup1255142393114"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup1255142393114"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup1255142393114"></a>5+</sup> values for this style.</p>
733<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p16733313171911"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p16733313171911"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p16733313171911"></a>Set one value in either of the following ways:</p>
734<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul93371539192211"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul93371539192211"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul93371539192211"><li>A unitless number to set <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b152581117781"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b152581117781"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b152581117781"></a>flex-grow</strong>.</li><li>A valid width value<sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup133014373318"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup133014373318"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup133014373318"></a>5+</sup> to set <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b182101331199"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b182101331199"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b182101331199"></a>flex-basis</strong>.</li></ul>
735<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p6786171632018"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p6786171632018"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p6786171632018"></a>Set two values<sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup39514502313"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup39514502313"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup39514502313"></a>5+</sup> in the following ways:</p>
736<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p6400429122011"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p6400429122011"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p6400429122011"></a>The first value must be a unitless number used to set <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b171516283129"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b171516283129"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b171516283129"></a>flex-grow</strong>. The second value must be either of the following:</p>
737<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul767043502219"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul767043502219"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul767043502219"><li>A unitless number to set <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1428375141313"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1428375141313"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1428375141313"></a>flex-shrink</strong>.</li><li>A valid width value to set <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1632495651416"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1632495651416"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1632495651416"></a>flex-basis</strong>.</li></ul>
738<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p748416351217"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p748416351217"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p748416351217"></a>Set three values<sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup168671312151514"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup168671312151514"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup168671312151514"></a>5+</sup> in the following ways:</p>
739<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p7373204832111"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p7373204832111"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p7373204832111"></a>The first value must be a unitless number used to set <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b19419131221612"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b19419131221612"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b19419131221612"></a>flex-grow</strong>. The second value must be a unitless number used to set <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b19378733181612"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b19378733181612"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b19378733181612"></a>flex-shrink</strong>. The third value must be a valid width value used to set <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b47717118176"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b47717118176"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b47717118176"></a>flex-basis</strong>.</p>
740<div class="note" id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note34891253201520"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note34891253201520"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note34891253201520"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1248915538152"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1248915538152"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1248915538152"></a>This style takes effect only when the container is any of the following components: <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b17156153131"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b17156153131"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b17156153131"></a>&lt;div&gt;</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1201415151311"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1201415151311"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1201415151311"></a>&lt;list-item&gt;</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b72031515132"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b72031515132"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b72031515132"></a>&lt;refresh&gt;</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1920131551310"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1920131551310"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1920131551310"></a>&lt;stepper-item&gt;</strong><sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup17201815121317"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup17201815121317"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup17201815121317"></a>5+</sup>, and <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b2211915121313"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b2211915121313"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b2211915121313"></a>&lt;tabs&gt;</strong>.</p>
741</div></div>
742</td>
743</tr>
744<tr id="en-us_topic_0000001058340507_row13450138205418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a5d88cacaaf5c4f6a87390ab916b695c6"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a5d88cacaaf5c4f6a87390ab916b695c6"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a5d88cacaaf5c4f6a87390ab916b695c6"></a>flex-grow</p>
745</td>
746<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2c379e3af283446da446f1631e572efd"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2c379e3af283446da446f1631e572efd"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2c379e3af283446da446f1631e572efd"></a>number</p>
747</td>
748<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aa374f6c7415a4ee48a06930d76c55be7"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aa374f6c7415a4ee48a06930d76c55be7"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_aa374f6c7415a4ee48a06930d76c55be7"></a>0</p>
749</td>
750<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p81768178466"><a name="en-us_topic_0000001058340507_p81768178466"></a><a name="en-us_topic_0000001058340507_p81768178466"></a>No</p>
751</td>
752<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p4437122419557"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p4437122419557"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p4437122419557"></a>How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1682343583716"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1682343583716"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1682343583716"></a>0</strong> indicates that the child component does not grow.</p>
753<div class="note" id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note201231734212"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note201231734212"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note201231734212"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p184555314553"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p184555314553"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p184555314553"></a>This style takes effect only when the container is any of the following components: <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b18575165615499"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b18575165615499"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b18575165615499"></a>&lt;div&gt;</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b8575165618495"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b8575165618495"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b8575165618495"></a>&lt;list-item&gt;</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b125751756164917"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b125751756164917"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b125751756164917"></a>&lt;refresh&gt;</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b15751456104920"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b15751456104920"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b15751456104920"></a>&lt;stepper-item&gt;</strong><sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup257595611492"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup257595611492"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup257595611492"></a>5+</sup>, and <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b55761856114912"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b55761856114912"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b55761856114912"></a>&lt;tabs&gt;</strong>.</p>
754</div></div>
755</td>
756</tr>
757<tr id="en-us_topic_0000001058340507_row845016384549"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ac65ef7e2b1f24a13b09c495f643168c9"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ac65ef7e2b1f24a13b09c495f643168c9"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ac65ef7e2b1f24a13b09c495f643168c9"></a>flex-shrink</p>
758</td>
759<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a98e7d367f0e649699892ae5bad6ade37"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a98e7d367f0e649699892ae5bad6ade37"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a98e7d367f0e649699892ae5bad6ade37"></a>number</p>
760</td>
761<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a422d978368814d12a33201cb839060ee"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a422d978368814d12a33201cb839060ee"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a422d978368814d12a33201cb839060ee"></a>1</p>
762</td>
763<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p1917613178465"><a name="en-us_topic_0000001058340507_p1917613178465"></a><a name="en-us_topic_0000001058340507_p1917613178465"></a>No</p>
764</td>
765<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ab032342dfe56460ca742800de482ca0f"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ab032342dfe56460ca742800de482ca0f"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ab032342dfe56460ca742800de482ca0f"></a>How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b783242395"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b783242395"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b783242395"></a>0</strong> indicates that the child component does not shrink.</p>
766<div class="note" id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note147160917217"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note147160917217"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note147160917217"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p844914328577"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p844914328577"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p844914328577"></a>This style takes effect only when the container is any of the following components: <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1168212543127"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1168212543127"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1168212543127"></a>&lt;div&gt;</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b76821454121211"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b76821454121211"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b76821454121211"></a>&lt;list-item&gt;</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1168255411126"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1168255411126"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1168255411126"></a>&lt;refresh&gt;</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b10682155415120"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b10682155415120"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b10682155415120"></a>&lt;stepper-item&gt;</strong><sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup10683145491215"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup10683145491215"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup10683145491215"></a>5+</sup>, and <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1868385461211"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1868385461211"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1868385461211"></a>&lt;tabs&gt;</strong>.</p>
767</div></div>
768</td>
769</tr>
770<tr id="en-us_topic_0000001058340507_row144511738195411"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a82c323a994634032963169eeee1a55e4"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a82c323a994634032963169eeee1a55e4"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a82c323a994634032963169eeee1a55e4"></a>flex-basis</p>
771</td>
772<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1148910787"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1148910787"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1148910787"></a>&lt;length&gt;</p>
773<p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a43613cf0c2184c0d8b44e8d292f6edb7"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a43613cf0c2184c0d8b44e8d292f6edb7"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a43613cf0c2184c0d8b44e8d292f6edb7"></a></p>
774</td>
775<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ab9e1c7dc25f840e58993af05c1d32109"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ab9e1c7dc25f840e58993af05c1d32109"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ab9e1c7dc25f840e58993af05c1d32109"></a>-</p>
776</td>
777<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_p0176817154612"><a name="en-us_topic_0000001058340507_p0176817154612"></a><a name="en-us_topic_0000001058340507_p0176817154612"></a>No</p>
778</td>
779<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a0993ef9b0ef64785a76e6310dd834f09"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a0993ef9b0ef64785a76e6310dd834f09"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a0993ef9b0ef64785a76e6310dd834f09"></a>Initial length of the flex item on the main axis.</p>
780<div class="note" id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note62848141222"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note62848141222"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note62848141222"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p16711745115718"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p16711745115718"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p16711745115718"></a>This style takes effect only when the container is any of the following components: <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b18795155631219"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b18795155631219"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b18795155631219"></a>&lt;div&gt;</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b107951056121217"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b107951056121217"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b107951056121217"></a>&lt;list-item&gt;</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b2795105619128"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b2795105619128"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b2795105619128"></a>&lt;refresh&gt;</strong>, <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1579510564126"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1579510564126"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1579510564126"></a>&lt;stepper-item&gt;</strong><sup id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup187953565122"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup187953565122"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_sup187953565122"></a>5+</sup>, and <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b11796456201211"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b11796456201211"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b11796456201211"></a>&lt;tabs&gt;</strong>.</p>
781</div></div>
782</td>
783</tr>
784<tr id="en-us_topic_0000001058340507_row184519384544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a50180d720a374549ae72c848e53320cb"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a50180d720a374549ae72c848e53320cb"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a50180d720a374549ae72c848e53320cb"></a>position</p>
785</td>
786<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a63672ed9a4c040f7a6ec9c8089b79bb6"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a63672ed9a4c040f7a6ec9c8089b79bb6"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a63672ed9a4c040f7a6ec9c8089b79bb6"></a>string</p>
787</td>
788<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2666820c71eb420485e4d20e55b4eabe"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2666820c71eb420485e4d20e55b4eabe"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a2666820c71eb420485e4d20e55b4eabe"></a>relative</p>
789</td>
790<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1173107172814"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1173107172814"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1173107172814"></a>No</p>
791</td>
792<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ae28abf4e47a740efbd45a8f280577912"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ae28abf4e47a740efbd45a8f280577912"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ae28abf4e47a740efbd45a8f280577912"></a>Positioning type of an element. Dynamic changes are not supported.</p>
793<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul17185232185014"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul17185232185014"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul17185232185014"><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1894911155394"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1894911155394"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1894911155394"></a>fixed</strong>: The element is positioned related to the browser window.</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b823115152390"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b823115152390"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b823115152390"></a>absolute</strong>: The element is positioned absolutely to its parent element.</li><li><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b736151417395"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b736151417395"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b736151417395"></a>relative</strong>: The element is positioned relative to its normal position.</li></ul>
794<div class="note" id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note167617191219"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note167617191219"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_note167617191219"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1839092815101"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1839092815101"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1839092815101"></a>The <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b13941713133910"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b13941713133910"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b13941713133910"></a>absolute</strong> attribute takes effect only when the parent component is <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1099913173916"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1099913173916"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b1099913173916"></a>&lt;div&gt;</strong> or <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b181001413123919"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b181001413123919"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b181001413123919"></a>&lt;stack&gt;</strong>.</p>
795</div></div>
796</td>
797</tr>
798<tr id="en-us_topic_0000001058340507_row1545123811547"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a70405cb9696b4329ac7625af93310018"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a70405cb9696b4329ac7625af93310018"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a70405cb9696b4329ac7625af93310018"></a>[left|top<span id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph14927143614712"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph14927143614712"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph14927143614712"></a>|right|bottom</span>]</p>
799</td>
800<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1849062221214"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1849062221214"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p1849062221214"></a>&lt;length&gt;</p>
801</td>
802<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a579ac7c03d1d46758ebaacd565d86ed3"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a579ac7c03d1d46758ebaacd565d86ed3"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a579ac7c03d1d46758ebaacd565d86ed3"></a>-</p>
803</td>
804<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p187314719288"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p187314719288"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_p187314719288"></a>No</p>
805</td>
806<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a9a662a62cd9b40eaa0cb9ca082b6d1c2"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a9a662a62cd9b40eaa0cb9ca082b6d1c2"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_a9a662a62cd9b40eaa0cb9ca082b6d1c2"></a><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b481348173914"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b481348173914"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b481348173914"></a>left|top</strong><span id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph4818118173914"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph4818118173914"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ph4818118173914"></a><strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b68143833912"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b68143833912"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b68143833912"></a>|right|bottom</strong></span> must be used together with <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b881916818394"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b881916818394"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b881916818394"></a>position</strong> to determine the offset position of an element.</p>
807<a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul12671003525"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul12671003525"></a><ul id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_ul12671003525"><li>The <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b885117712398"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b885117712398"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b885117712398"></a>left</strong> attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.</li><li>The <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b65591759395"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b65591759395"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b65591759395"></a>top</strong> attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.</li><li>The <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b179013323910"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b179013323910"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b179013323910"></a>right</strong> attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element. </li><li>The <strong id="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b77091602397"><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b77091602397"></a><a name="en-us_topic_0000001058340507_en-us_topic_0000001059340528_b77091602397"></a>bottom</strong> attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. </li></ul>
808</td>
809</tr>
810</tbody>
811</table>
812
813## Method<a name="en-us_topic_0000001058340507_section47669296127"></a>
814
815<a name="en-us_topic_0000001058340507_t26fe2ddff8674cc38a3a1ec490b76e2f"></a>
816<table><thead align="left"><tr id="en-us_topic_0000001058340507_r237544a789f74f4599b0688cdb75239a"><th class="cellrowborder" valign="top" width="23%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058340507_a897dc10a0e4e45bc94f02c558c679435"><a name="en-us_topic_0000001058340507_a897dc10a0e4e45bc94f02c558c679435"></a><a name="en-us_topic_0000001058340507_a897dc10a0e4e45bc94f02c558c679435"></a>Name</p>
817</th>
818<th class="cellrowborder" valign="top" width="32%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058340507_ac86c6eca347b48e9a749143ecf54f38f"><a name="en-us_topic_0000001058340507_ac86c6eca347b48e9a749143ecf54f38f"></a><a name="en-us_topic_0000001058340507_ac86c6eca347b48e9a749143ecf54f38f"></a>Parameter</p>
819</th>
820<th class="cellrowborder" valign="top" width="45%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058340507_a0050d08b0c5744de88990d92ef35d3b1"><a name="en-us_topic_0000001058340507_a0050d08b0c5744de88990d92ef35d3b1"></a><a name="en-us_topic_0000001058340507_a0050d08b0c5744de88990d92ef35d3b1"></a>Description</p>
821</th>
822</tr>
823</thead>
824<tbody><tr id="en-us_topic_0000001058340507_r08b3c58c981c42a390dc730286c9ce95"><td class="cellrowborder" valign="top" width="23%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058340507_a6385a8ec6d534f7698eaf47b265bec85"><a name="en-us_topic_0000001058340507_a6385a8ec6d534f7698eaf47b265bec85"></a><a name="en-us_topic_0000001058340507_a6385a8ec6d534f7698eaf47b265bec85"></a>focus</p>
825</td>
826<td class="cellrowborder" valign="top" width="32%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058340507_a00a0ac8604354157a42016a324e8c539"><a name="en-us_topic_0000001058340507_a00a0ac8604354157a42016a324e8c539"></a><a name="en-us_topic_0000001058340507_a00a0ac8604354157a42016a324e8c539"></a>{focus: true|false}: If <strong id="en-us_topic_0000001058340507_b1928312596315"><a name="en-us_topic_0000001058340507_b1928312596315"></a><a name="en-us_topic_0000001058340507_b1928312596315"></a>focus</strong> is not passed, the default value <strong id="en-us_topic_0000001058340507_b17115632045"><a name="en-us_topic_0000001058340507_b17115632045"></a><a name="en-us_topic_0000001058340507_b17115632045"></a>true</strong> is used.</p>
827</td>
828<td class="cellrowborder" valign="top" width="45%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058340507_ae41bfe34aa2f46dcb8dc8373340330d0"><a name="en-us_topic_0000001058340507_ae41bfe34aa2f46dcb8dc8373340330d0"></a><a name="en-us_topic_0000001058340507_ae41bfe34aa2f46dcb8dc8373340330d0"></a>Obtains or loses the focus of a component, which can display or collapse the input method.</p>
829</td>
830</tr>
831</tbody>
832</table>
833
834## Example Code<a name="en-us_topic_0000001058340507_section1224516501541"></a>
835
836```
837<!-- xxx.hml -->
838<textarea id="textarea" class="textarea" extend="true" maxlength="20"
839  headericon="/common/navigation_menu1_icon.svg" placeholder="Please input text"
840  onchange="change">
841</textarea>
842```
843
844```
845/* xxx.css */
846.textarea {
847  placeholder-color: gray;
848}
849```
850
851```
852// xxx.js
853change(e){
854  prompt.showToast({
855    message: 'value: ' + e.text + ', lines: ' + e.lines + ', height: ' + e.height,
856    duration: 3000,
857  });
858}
859```
860
861![](figures/en-us_image_0000001060660972.png)
862
863