1# toolbar-item 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @mayaolll--> 5<!--Designer: @jiangdayuan--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11 12工具栏[toolbar](js-components-basic-toolbar.md)子组件。 用于展示工具栏上的一个操作选项。 13 14 15## 子组件 16 17无 18 19 20## 属性 21 22除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 23 24| 名称 | 类型 | 默认值 | 必填 | 描述 | 25| ----- | ------ | ---- | ---- | ---------------------------------------- | 26| value | string | - | 是 | 该操作项文本内容。 | 27| icon | string | - | 是 | 该操作项图标资源路径，该图标展示在选项文本上，支持本地路径，格式为png，jpg和svg。 | 28 29 30## 样式 31 32仅支持如下样式： 33 34| 名称 | 类型 | 默认值 | 必填 | 描述 | 35| ------------------- | ---------------------------------------- | ------------ | ---- | ---------------------------------------- | 36| color | <color> | \#e6000000 | 否 | 文本颜色。 | 37| font-size | <length> | 16px | 否 | 文本大小。 | 38| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小，可选值为：<br/> - true： 文本尺寸跟随系统设置字体缩放尺寸进行放大缩小；<br/>- false： 文本尺寸不跟随系统设置字体缩放尺寸进行放大缩小。 | 39| font-style | string | normal | 否 | 文本字体样式，可选值为：<br/> - normal: 标准的字体样式；<br/>- italic: 斜体的字体样式。 | 40| font-weight | number\|string | normal | 否 | 文本字体粗细，number类型取值[100, 900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。 | 41| text-decoration | string | none | 否 | 文本修饰，可选值为：<br/>- underline: 文本下划线修饰；<br/>- line-through: 穿过文本的修饰线；<br/>- none: 标准文本。 | 42| font-family | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | 43| background | <linear-gradient> | - | 否 | 仅支持设置[渐变样式](js-components-common-gradient.md)，与background-color、background-image不兼容。 | 44| background-color | <color> | - | 否 | 设置背景颜色。 | 45| background-image | string | - | 否 | 设置背景图片。与background-color、background不兼容；支持网络图片资源和本地图片资源地址。 | 46| background-size | - string<br/>- <length> <length><br/>- <percentage> <percentage> | auto | 否 | 设置背景图片的大小。<br/>- string可选值：<br/> - contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/> - cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。<br/> - auto：保持原图的比例不变。<br/>- length参数方式：<br/> 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。<br/>- 百分比参数方式：<br/>以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 | 47| background-repeat | string | repeat | 否 | 针对重复背景图片的样式进行设置，背景图片默认在水平和垂直方向上重复。<br/>- repeat：在水平轴和竖直轴上同时重复绘制图片。<br/>- repeat-x：只在水平轴上重复绘制图片。<br/>- repeat-y：只在竖直轴上重复绘制图片。<br/>- no-repeat：不会重复绘制图片。 | 48| background-position | - string string<br/>- <length> <length><br/>- <percentage> <percentage> | 0px 0px | 否 | 设置背景图片位置。<br>- 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/> - left：水平方向上最左侧。<br/> - right：水平方向上最右侧。<br/> - top：竖直方向上最顶部。<br/> - bottom：竖直方向上最底部。<br/> - center：水平方向或竖直方向上中间位置。<br/>- length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px)。如果仅规定了一个值，另外一个值将是50%。<br/>- 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。<br/>- 可以混合使用<percentage>和<length>。 | 49| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | 50| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>- flex：弹性布局。<br/>- none：不渲染此元素。 | 51| visibility | string | visible | 否 | 是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：<br/>- visible：元素正常显示。<br/>- hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。<br/>visibility和display样式都设置时，仅display生效。 | 52 53 54## 事件 55 56支持[通用事件](js-components-common-events.md)。 57 58 59## 方法 60 61不支持。 62 63 64## 示例 65 66```html 67<!-- xxx.hml --> 68<toolbar style="position: fixed; bottom: 0px;"> 69 <toolbar-item icon="common/Icon/location.png" value='Option 1'></toolbar-item> 70 <toolbar-item icon="common/Icon/heart.png" value='Option 2'></toolbar-item> 71 <toolbar-item icon="common/Icon/diamond.png" value='Option 3'></toolbar-item> 72 <toolbar-item icon="common/Icon/heart.png" value='Option 4'></toolbar-item> 73 <toolbar-item icon="common/Icon/heart.png" value='Option 5'></toolbar-item> 74 <toolbar-item icon="common/Icon/heart.png" value='Option 6'></toolbar-item> 75</toolbar> 76``` 77 78 79
