js-components-basic-toolbar-item.md

# toolbar-item<a name="ZH-CN_TOPIC_0000001127125080"></a>

工具栏子组件。作为工具栏组件的子组件，用于展示工具栏上的一个操作选项。

>![](../../public_sys-resources/icon-note.gif) **说明：** 
>从API Version 5 开始支持。

## 子组件<a name="section9288143101012"></a>

无

## 属性<a name="section19217161499"></a>

除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：

<a name="table20633101642315"></a>
<table><thead align="left"><tr id="row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="a45273e2103004ff3bdd3375013e96a2a"><a name="a45273e2103004ff3bdd3375013e96a2a"></a><a name="a45273e2103004ff3bdd3375013e96a2a"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="ad5b10d4a60e44bb4a8bbb3b4416d7b27"><a name="ad5b10d4a60e44bb4a8bbb3b4416d7b27"></a><a name="ad5b10d4a60e44bb4a8bbb3b4416d7b27"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="ab2ae3d9f60d6475ab95ba095851a9d07"><a name="ab2ae3d9f60d6475ab95ba095851a9d07"></a><a name="ab2ae3d9f60d6475ab95ba095851a9d07"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p824610360217"><a name="p824610360217"></a><a name="p824610360217"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="af5c3b773ed0a42e589819a6c8d257ca1"><a name="af5c3b773ed0a42e589819a6c8d257ca1"></a><a name="af5c3b773ed0a42e589819a6c8d257ca1"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row1745453714917"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p1345453714498"><a name="p1345453714498"></a><a name="p1345453714498"></a>value</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p8454537164910"><a name="p8454537164910"></a><a name="p8454537164910"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p645511377498"><a name="p645511377498"></a><a name="p645511377498"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p10455637114917"><a name="p10455637114917"></a><a name="p10455637114917"></a>是</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p18883831183010"><a name="p18883831183010"></a><a name="p18883831183010"></a>该操作项文本内容。</p>
</td>
</tr>
<tr id="row1937143418494"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p15372163494913"><a name="p15372163494913"></a><a name="p15372163494913"></a>icon</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p13726344494"><a name="p13726344494"></a><a name="p13726344494"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p937223417498"><a name="p937223417498"></a><a name="p937223417498"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p19372183413493"><a name="p19372183413493"></a><a name="p19372183413493"></a>是</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p837212344498"><a name="p837212344498"></a><a name="p837212344498"></a>该操作项图标资源路径，该图标展示在选项文本上，支持本地路径，格式为png，jpg和svg。</p>
</td>
</tr>
</tbody>
</table>

## 样式<a name="section184493015533"></a>

仅支持如下样式：

<a name="table1744514388541"></a>
<table><thead align="left"><tr id="row1244614388545"><th class="cellrowborder" valign="top" width="17.98%" id="mcps1.1.6.1.1"><p id="a4e80fb5a797c4328af30d59e2c570c71"><a name="a4e80fb5a797c4328af30d59e2c570c71"></a><a name="a4e80fb5a797c4328af30d59e2c570c71"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="15.82%" id="mcps1.1.6.1.2"><p id="a4238bd3a376645a3ad8498d3916ed6c8"><a name="a4238bd3a376645a3ad8498d3916ed6c8"></a><a name="a4238bd3a376645a3ad8498d3916ed6c8"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="12.379999999999999%" id="mcps1.1.6.1.3"><p id="a5ece9efc3a1d464a868f9557e4784a97"><a name="a5ece9efc3a1d464a868f9557e4784a97"></a><a name="a5ece9efc3a1d464a868f9557e4784a97"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p19451142418147"><a name="p19451142418147"></a><a name="p19451142418147"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="46.300000000000004%" id="mcps1.1.6.1.5"><p id="a2454f35c1eef44b4bb681caaa3ce48fc"><a name="a2454f35c1eef44b4bb681caaa3ce48fc"></a><a name="a2454f35c1eef44b4bb681caaa3ce48fc"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row1968320716339"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="p16782113422516"><a name="p16782113422516"></a><a name="p16782113422516"></a>color</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="p678210342255"><a name="p678210342255"></a><a name="p678210342255"></a>&lt;color&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="p11782113462512"><a name="p11782113462512"></a><a name="p11782113462512"></a>#e6000000</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1945222451418"><a name="p1945222451418"></a><a name="p1945222451418"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="p9782134122511"><a name="p9782134122511"></a><a name="p9782134122511"></a>文本颜色。</p>
</td>
</tr>
<tr id="row93711310173314"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="p15365537102518"><a name="p15365537102518"></a><a name="p15365537102518"></a>font-size</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="p1636517375255"><a name="p1636517375255"></a><a name="p1636517375255"></a>&lt;length&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="p7365103717256"><a name="p7365103717256"></a><a name="p7365103717256"></a>16px</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1452152481418"><a name="p1452152481418"></a><a name="p1452152481418"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="p336663712252"><a name="p336663712252"></a><a name="p336663712252"></a>文本大小。</p>
</td>
</tr>
<tr id="row48601612153319"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="p3376124017256"><a name="p3376124017256"></a><a name="p3376124017256"></a>allow-scale</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="p1437654010251"><a name="p1437654010251"></a><a name="p1437654010251"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="p1376154072515"><a name="p1376154072515"></a><a name="p1376154072515"></a>true</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1452132471420"><a name="p1452132471420"></a><a name="p1452132471420"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="p1937615404253"><a name="p1937615404253"></a><a name="p1937615404253"></a>文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。</p>
</td>
</tr>
<tr id="row1421915113312"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="p0781642162510"><a name="p0781642162510"></a><a name="p0781642162510"></a>font-style</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="p107816428255"><a name="p107816428255"></a><a name="p107816428255"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="p17811342142514"><a name="p17811342142514"></a><a name="p17811342142514"></a>normal</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p11452162417140"><a name="p11452162417140"></a><a name="p11452162417140"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="p197817427251"><a name="p197817427251"></a><a name="p197817427251"></a>文本字体样式，可选值为：</p>
<a name="ol3712173853714"></a><a name="ol3712173853714"></a><ol id="ol3712173853714"><li>normal: 标准的字体样式；</li><li>italic: 斜体的字体样式。</li></ol>
</td>
</tr>
<tr id="row1373417172335"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="p9764174572513"><a name="p9764174572513"></a><a name="p9764174572513"></a>font-weight</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="p37641045112510"><a name="p37641045112510"></a><a name="p37641045112510"></a>number|string</p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="p1976434511252"><a name="p1976434511252"></a><a name="p1976434511252"></a>normal</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p24528247143"><a name="p24528247143"></a><a name="p24528247143"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="p17641452258"><a name="p17641452258"></a><a name="p17641452258"></a>文本字体粗细，number类型取值[100, 900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。</p>
</td>
</tr>
<tr id="row017015211338"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="p1693494732511"><a name="p1693494732511"></a><a name="p1693494732511"></a>text-decoration</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="p7934124713256"><a name="p7934124713256"></a><a name="p7934124713256"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="p1493416479256"><a name="p1493416479256"></a><a name="p1493416479256"></a>none</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p9452124171410"><a name="p9452124171410"></a><a name="p9452124171410"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="p18934647142514"><a name="p18934647142514"></a><a name="p18934647142514"></a>文本修饰，可选值为：</p>
<a name="ol280935211386"></a><a name="ol280935211386"></a><ol id="ol280935211386"><li>underline: 文本下划线修饰；</li><li>line-through: 穿过文本的修饰线；</li><li>none: 标准文本。</li></ol>
</td>
</tr>
<tr id="row458624153320"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="p1543212507250"><a name="p1543212507250"></a><a name="p1543212507250"></a>font-family</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="p1243215092510"><a name="p1243215092510"></a><a name="p1243215092510"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="p34321750192510"><a name="p34321750192510"></a><a name="p34321750192510"></a>sans-serif</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1945217249142"><a name="p1945217249142"></a><a name="p1945217249142"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="p134322050162510"><a name="p134322050162510"></a><a name="p134322050162510"></a>字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过<a href="js-components-common-customizing-font.md">自定义字体</a>指定的字体，会被选中作为文本的字体。</p>
</td>
</tr>
<tr id="row5132259115419"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="a473248d0f1ad4a6b87934aab462b09ce"><a name="a473248d0f1ad4a6b87934aab462b09ce"></a><a name="a473248d0f1ad4a6b87934aab462b09ce"></a>background</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="a7c54e775a6bf4bbea277ff8927cc4c13"><a name="a7c54e775a6bf4bbea277ff8927cc4c13"></a><a name="a7c54e775a6bf4bbea277ff8927cc4c13"></a>&lt;linear-gradient&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="a5bbca83860ff4086bba1bf5b8698e28c"><a name="a5bbca83860ff4086bba1bf5b8698e28c"></a><a name="a5bbca83860ff4086bba1bf5b8698e28c"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p845216243143"><a name="p845216243143"></a><a name="p845216243143"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="ad385002530a346f09c23e6745ca0e916"><a name="ad385002530a346f09c23e6745ca0e916"></a><a name="ad385002530a346f09c23e6745ca0e916"></a>仅支持设置<a href="js-components-common-gradient.md">渐变样式</a>，与background-color、background-image不兼容。</p>
</td>
</tr>
<tr id="row1613225905418"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="af5c7b4fc3d8949b5aff81c5b49783259"><a name="af5c7b4fc3d8949b5aff81c5b49783259"></a><a name="af5c7b4fc3d8949b5aff81c5b49783259"></a>background-color</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="a3f45d99020c04479943ad07f262a591c"><a name="a3f45d99020c04479943ad07f262a591c"></a><a name="a3f45d99020c04479943ad07f262a591c"></a>&lt;color&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="add693215147d46e59c859940cc4520e8"><a name="add693215147d46e59c859940cc4520e8"></a><a name="add693215147d46e59c859940cc4520e8"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p545218247144"><a name="p545218247144"></a><a name="p545218247144"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="acd48c077d9964749ae766636b8ada95c"><a name="acd48c077d9964749ae766636b8ada95c"></a><a name="acd48c077d9964749ae766636b8ada95c"></a>设置背景颜色。</p>
</td>
</tr>
<tr id="row20131459185410"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="a9ebf9bd289374413a2834bab0e3b46d4"><a name="a9ebf9bd289374413a2834bab0e3b46d4"></a><a name="a9ebf9bd289374413a2834bab0e3b46d4"></a>background-image</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="a46c151a9e45b4ffcb4c45dfcb93214bd"><a name="a46c151a9e45b4ffcb4c45dfcb93214bd"></a><a name="a46c151a9e45b4ffcb4c45dfcb93214bd"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="a8be7284eb5884350ba591183a67d4060"><a name="a8be7284eb5884350ba591183a67d4060"></a><a name="a8be7284eb5884350ba591183a67d4060"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1045212441415"><a name="p1045212441415"></a><a name="p1045212441415"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="aa236de4e56e349ff8c753d294e98abab"><a name="aa236de4e56e349ff8c753d294e98abab"></a><a name="aa236de4e56e349ff8c753d294e98abab"></a>设置背景图片。与background-color、background不兼容；支持网络图片资源和本地图片资源地址。</p>
</td>
</tr>
<tr id="row0131145914543"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="a5def9eea1a2b42e9b040f0f898a2fcdf"><a name="a5def9eea1a2b42e9b040f0f898a2fcdf"></a><a name="a5def9eea1a2b42e9b040f0f898a2fcdf"></a>background-size</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><a name="uc9d67b59ab8c4f5d8f766deb0f8f657b"></a><a name="uc9d67b59ab8c4f5d8f766deb0f8f657b"></a><ul id="uc9d67b59ab8c4f5d8f766deb0f8f657b"><li>string</li><li>&lt;length&gt; &lt;length&gt;</li><li>&lt;percentage&gt; &lt;percentage&gt;</li></ul>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="a2d537661fce74b13acbcc7a95ea56f08"><a name="a2d537661fce74b13acbcc7a95ea56f08"></a><a name="a2d537661fce74b13acbcc7a95ea56f08"></a>auto</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p10452132414149"><a name="p10452132414149"></a><a name="p10452132414149"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="a0709b83d5c8e4b75b1f0bb42d913ac02"><a name="a0709b83d5c8e4b75b1f0bb42d913ac02"></a><a name="a0709b83d5c8e4b75b1f0bb42d913ac02"></a>设置背景图片的大小。</p>
<a name="ub2423a2f8d96432f8c58c629288432c5"></a><a name="ub2423a2f8d96432f8c58c629288432c5"></a><ul id="ub2423a2f8d96432f8c58c629288432c5"><li>string可选值：<a name="uee8f5c89381a4ce682a5d557f8e558ee"></a><a name="uee8f5c89381a4ce682a5d557f8e558ee"></a><ul id="uee8f5c89381a4ce682a5d557f8e558ee"><li>contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。</li><li>cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。</li><li>auto：保持原图的比例不变。</li></ul>
</li><li>length值参数方式：<p id="a5b969a49f8074aae96a12e4232e47c5d"><a name="a5b969a49f8074aae96a12e4232e47c5d"></a><a name="a5b969a49f8074aae96a12e4232e47c5d"></a>设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。</p>
</li><li>百分比参数方式：<p id="a19ef0a7986ce47f2b7fe614975e23cd9"><a name="a19ef0a7986ce47f2b7fe614975e23cd9"></a><a name="a19ef0a7986ce47f2b7fe614975e23cd9"></a>以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。</p>
</li></ul>
</td>
</tr>
<tr id="row2017552715511"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="a8e820e26428c4e008a691a8fc8c23294"><a name="a8e820e26428c4e008a691a8fc8c23294"></a><a name="a8e820e26428c4e008a691a8fc8c23294"></a>background-repeat</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="ab9ca7eb1f0fc48a9a3fc08b88fe11338"><a name="ab9ca7eb1f0fc48a9a3fc08b88fe11338"></a><a name="ab9ca7eb1f0fc48a9a3fc08b88fe11338"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="abbb032e6786d43568f7eea7b29611821"><a name="abbb032e6786d43568f7eea7b29611821"></a><a name="abbb032e6786d43568f7eea7b29611821"></a>repeat</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p16452102413147"><a name="p16452102413147"></a><a name="p16452102413147"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="a64efc26d6e2c48a3a4032c71b8511085"><a name="a64efc26d6e2c48a3a4032c71b8511085"></a><a name="a64efc26d6e2c48a3a4032c71b8511085"></a>针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。</p>
<a name="uee59e640d2304d56a0a5b396795a8cc5"></a><a name="uee59e640d2304d56a0a5b396795a8cc5"></a><ul id="uee59e640d2304d56a0a5b396795a8cc5"><li>repeat：在水平轴和竖直轴上同时重复绘制图片。</li><li>repeat-x：只在水平轴上重复绘制图片。</li><li>repeat-y：只在竖直轴上重复绘制图片。</li><li>no-repeat：不会重复绘制图片。</li></ul>
</td>
</tr>
<tr id="row181756277552"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="a60e011e34e6c4b04a1c86ac873087eed"><a name="a60e011e34e6c4b04a1c86ac873087eed"></a><a name="a60e011e34e6c4b04a1c86ac873087eed"></a>background-position</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><a name="u2fe0f6beda39428780ca525d6dca1b30"></a><a name="u2fe0f6beda39428780ca525d6dca1b30"></a><ul id="u2fe0f6beda39428780ca525d6dca1b30"><li>string string</li><li>&lt;length&gt; &lt;length&gt;</li><li>&lt;percentage&gt; &lt;percentage&gt;</li></ul>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="ad96af7b5874e476db4b4cf968156a633"><a name="ad96af7b5874e476db4b4cf968156a633"></a><a name="ad96af7b5874e476db4b4cf968156a633"></a>0px 0px</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p445222451420"><a name="p445222451420"></a><a name="p445222451420"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><a name="ub1e24d41a33d4560a6637f7a16ee5140"></a><a name="ub1e24d41a33d4560a6637f7a16ee5140"></a><ul id="ub1e24d41a33d4560a6637f7a16ee5140"><li>关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<a name="uac6e07c1eb0244d79eeed180658cb6c6"></a><a name="uac6e07c1eb0244d79eeed180658cb6c6"></a><ul id="uac6e07c1eb0244d79eeed180658cb6c6"><li>left：水平方向上最左侧。</li><li>right：水平方向上最右侧。</li><li>top：竖直方向上最顶部。</li><li>bottom：竖直方向上最底部。</li><li>center：水平方向或竖直方向上中间位置。</li></ul>
</li></ul>
<a name="ua495746d9777430c973a5ec607309ac4"></a><a name="ua495746d9777430c973a5ec607309ac4"></a><ul id="ua495746d9777430c973a5ec607309ac4"><li>length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px)  。如果仅规定了一个值，另外一个值将是50%。</li><li>百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。</li><li>可以混合使用&lt;percentage&gt;和&lt;length&gt;。</li></ul>
</td>
</tr>
<tr id="row31751127165514"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="a529a69841d634cdfa9637284412e5cf1"><a name="a529a69841d634cdfa9637284412e5cf1"></a><a name="a529a69841d634cdfa9637284412e5cf1"></a>opacity</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="a0820f7d1c5b34d6eab999bd9dddfad6c"><a name="a0820f7d1c5b34d6eab999bd9dddfad6c"></a><a name="a0820f7d1c5b34d6eab999bd9dddfad6c"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="a35dd1b1eab3a421f9c95d512860d5bda"><a name="a35dd1b1eab3a421f9c95d512860d5bda"></a><a name="a35dd1b1eab3a421f9c95d512860d5bda"></a>1</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p14523246147"><a name="p14523246147"></a><a name="p14523246147"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="a2e8d180f3c914356af72e679446f4ab5"><a name="a2e8d180f3c914356af72e679446f4ab5"></a><a name="a2e8d180f3c914356af72e679446f4ab5"></a>元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。</p>
</td>
</tr>
<tr id="row48391367556"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="a2e53aab1be1043489c29919ab37c6ea4"><a name="a2e53aab1be1043489c29919ab37c6ea4"></a><a name="a2e53aab1be1043489c29919ab37c6ea4"></a>display</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="a38fa4b64eff24ff0bbb4220fb9026d73"><a name="a38fa4b64eff24ff0bbb4220fb9026d73"></a><a name="a38fa4b64eff24ff0bbb4220fb9026d73"></a>string</p>
<p id="a951b8ea86c6c45f99c84c93d6675d800"><a name="a951b8ea86c6c45f99c84c93d6675d800"></a><a name="a951b8ea86c6c45f99c84c93d6675d800"></a></p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="add1e263e897d48a595bd7a7f81b2c0c1"><a name="add1e263e897d48a595bd7a7f81b2c0c1"></a><a name="add1e263e897d48a595bd7a7f81b2c0c1"></a>flex</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p134525242141"><a name="p134525242141"></a><a name="p134525242141"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="a677d3f5076894546a1fc1404af757f26"><a name="a677d3f5076894546a1fc1404af757f26"></a><a name="a677d3f5076894546a1fc1404af757f26"></a>确定一个元素所产生的框的类型，可选值为：</p>
<a name="u20b5cc7616974e9d804498df629c48f1"></a><a name="u20b5cc7616974e9d804498df629c48f1"></a><ul id="u20b5cc7616974e9d804498df629c48f1"><li>flex：弹性布局。</li><li>none：不渲染此元素。</li></ul>
</td>
</tr>
<tr id="row1483963614553"><td class="cellrowborder" valign="top" width="17.98%" headers="mcps1.1.6.1.1 "><p id="a74fb259ecfff44c7b47f54b335255419"><a name="a74fb259ecfff44c7b47f54b335255419"></a><a name="a74fb259ecfff44c7b47f54b335255419"></a>visibility</p>
</td>
<td class="cellrowborder" valign="top" width="15.82%" headers="mcps1.1.6.1.2 "><p id="a9a50e36f1fb246b0b1c193437d9ac37a"><a name="a9a50e36f1fb246b0b1c193437d9ac37a"></a><a name="a9a50e36f1fb246b0b1c193437d9ac37a"></a>string</p>
<p id="ab6e40650e55d48f3b666dce48145f2bd"><a name="ab6e40650e55d48f3b666dce48145f2bd"></a><a name="ab6e40650e55d48f3b666dce48145f2bd"></a></p>
</td>
<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.6.1.3 "><p id="a98ed5a2ff4dc4e6596afb58eea00d9e5"><a name="a98ed5a2ff4dc4e6596afb58eea00d9e5"></a><a name="a98ed5a2ff4dc4e6596afb58eea00d9e5"></a>visible</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1345202471410"><a name="p1345202471410"></a><a name="p1345202471410"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="46.300000000000004%" headers="mcps1.1.6.1.5 "><p id="a25930a9fa4bd4b8896aacc24e5202575"><a name="a25930a9fa4bd4b8896aacc24e5202575"></a><a name="a25930a9fa4bd4b8896aacc24e5202575"></a>是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：</p>
<a name="u2395105022844e08854f4266096995ea"></a><a name="u2395105022844e08854f4266096995ea"></a><ul id="u2395105022844e08854f4266096995ea"><li>visible：元素正常显示。</li><li>hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。</li></ul>
<div class="note" id="nca29d306d97b4fbdbfd735b6c9fb57a4"><a name="nca29d306d97b4fbdbfd735b6c9fb57a4"></a><a name="nca29d306d97b4fbdbfd735b6c9fb57a4"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="a5196ede3623d46bbb930bc6254a55b9e"><a name="a5196ede3623d46bbb930bc6254a55b9e"></a><a name="a5196ede3623d46bbb930bc6254a55b9e"></a>visibility和display样式都设置时，仅display生效。</p>
</div></div>
</td>
</tr>
</tbody>
</table>

## 事件<a name="section571865310552"></a>

支持[通用事件](js-components-common-events.md)。

## 方法<a name="section568225514199"></a>

不支持。

## 示例<a name="section1240714821316"></a>

```
<toolbar style="position: fixed; bottom: 0px; ">    
   <toolbar-item icon='common/Icon/location.png' value='Option 1' >   </toolbar-item>
   <toolbar-item icon='common/Icon/heart.png' value='Option 2'>   </toolbar-item>    
   <toolbar-item icon='common/Icon/diamond.png' value='Option 3'  >   </toolbar-item>    
   <toolbar-item icon='common/Icon/heart.png' value='Option 4' >   </toolbar-item>    
   <toolbar-item icon='common/Icon/heart.png' value='Option 5' >   </toolbar-item>
   <toolbar-item icon='common/Icon/heart.png' value='Option 6'>   </toolbar-item> 
</toolbar>
```

![](figures/000000.jpg)