1 Star 0 Fork 5.1K

youguilin / docs

forked from OpenHarmony / docs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
toolbar-item.md 67.51 KB
一键复制 编辑 原始数据 按行查看 历史
mamingshuai 提交于 2021-06-02 01:00 . update OpenHarmony 2.0 Canary

toolbar-item

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

说明: 从API Version 5 开始支持。

权限列表

子组件

属性

名称

类型

默认值

必填

描述

value

string

-

该操作项文本内容。

icon

string

-

该操作项图标资源路径,该图标展示在选项文本上,支持本地路径,格式为png,jpg和svg。

id

string

-

组件的唯一标识。

style

string

-

组件的样式声明。

class

string

-

组件的样式类,用于引用样式表。

ref

string

-

用来指定指向子元素或子组件的引用信息,该引用将注册到父组件的$refs 属性对象上。

disabled

boolean

false

当前组件是否被禁用,在禁用场景下,组件将无法响应用户交互。

data

string

-

给当前组件设置data属性,进行相应的数据存储和读取。

样式

名称

类型

默认值

必填

描述

color

<color>

#e6000000

文本颜色。

font-size

<length>

16px

文本大小。

allow-scale

boolean

true

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

font-style

string

normal

文本字体样式,可选值为:

  1. normal: 标准的字体样式;
  2. italic: 斜体的字体样式。

font-weight

number|string

normal

文本字体粗细,number类型取值[100, 900]的整数(被100整除),默认为400,取值越大,字体越粗。string类型取值为:lighter、normal、bold、bolder。

text-decoration

string

none

文本修饰,可选值为:

  1. underline: 文本下划线修饰;
  2. line-through: 穿过文本的修饰线;
  3. none: 标准文本。

font-family

string

sans-serif

字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

background

<linear-gradient>

-

仅支持设置渐变样式,与background-color、background-image不兼容。

background-color

<color>

-

设置背景颜色。

background-image

string

-

设置背景图片。与background-color、background不兼容;支持本地图片资源地址。

background-size

  • string
  • <length> <length>
  • <percentage> <percentage>

auto

设置背景图片的大小。

  • string可选值:
    • contain:把图像扩展至最大尺寸,以使其高度和宽度完全适用内容区域。
    • cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中。
    • auto:保持原图的比例不变。
  • length值参数方式:

    设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

  • 百分比参数方式:

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

background-repeat

string

repeat

针对重复背景图像样式进行设置,背景图像默认在水平和垂直方向上重复。

  • repeat:在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x:只在水平轴上重复绘制图片。
  • repeat-y:只在竖直轴上重复绘制图片。
  • no-repeat:不会重复绘制图片。

background-position

  • string string
  • <length> <length>
  • <percentage> <percentage>

0px 0px

  • 关键词方式:如果仅规定了一个关键词,那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left:水平方向上最左侧。
    • right:水平方向上最右侧。
    • top:竖直方向上最顶部。
    • bottom:竖直方向上最底部。
    • center:水平方向或竖直方向上中间位置。
  • length值参数方式:第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值,另外一个值将是50%。
  • 百分比参数方式:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另外一个值为50%。
  • 可以混合使用<percentage>和<length>

opacity

number

1

元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。

display

string

flex

确定一个元素所产生的框的类型,可选值为:

  • flex:弹性布局。
  • none:不渲染此元素。

visibility

string

visible

是否显示元素所产生的框。不可见的框会占用布局(将'display'属性设置为'none'来完全去除框),可选值为:

  • visible:元素正常显示。
  • hidden:隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。
说明:

visibility和display样式都设置时,仅display生效

事件

名称

参数

描述

touchstart

TouchEvent

手指刚触摸屏幕时触发该事件。

touchmove

TouchEvent

手指触摸屏幕后移动时触发该事件。

touchcancel

TouchEvent

手指触摸屏幕中动作被打断时触发该事件。

touchend

TouchEvent

手指触摸结束离开屏幕时触发该事件。

click

-

点击动作触发该事件。

longpress

-

长按动作触发该事件。

swipe5+

SwipeEvent

组件上快速滑动后触发。

方法

示例

<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>

1
https://gitee.com/yougl/docs.git
git@gitee.com:yougl/docs.git
yougl
docs
docs
master

搜索帮助

53164aa7 5694891 3bd8fe86 5694891