HarmonyOS API：基础组件

joytrian

发布于 2023-3-29 15:59

浏览

0收藏

版本：v3.1 Beta

button

更新时间: 2023-02-17 09:19

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。

子组件

不支持。

示例

div class="div-button">
    <text class="title">普通按钮</text>
    <div class="circleall">
        <button class="buttons">确认按钮</button>
        <button class="buttons" waiting="true">Loading</button>
    </div>
    <div class="circleall">
        <button class="buttons icon" icon="/common/images/paobu.png" value="跑步" placement="start"></button>
        <button class="buttons white">禁用按钮</button>
    </div>
    <div class="circleall">
        <button class="buttons  oriage">重置</button>
        <button class="buttons  warn">告警按钮</button>
    </div>
    <text class="title">胶囊按钮</text>
    <div class="circleall">
        <button class="buttons" type="capsule">确认按钮</button>
        <button class="buttons" type="capsule" waiting="true">Loading</button>
    </div>
    <div class="circleall">
        <button class="buttons" type="capsule">清除</button>
        <button class="buttons  white" type="capsule" >禁用按钮</button>
    </div>
    <div class="circleall">
        <button class="buttons oriage" type="capsule">重置</button>
        <button class="buttons warn" type="capsule">告警按钮</button>
    </div>
    <text class="title">圆形按钮</text>
    <div class="circlealls">
        <button class="circle" type="circle" icon="/common/images/fenleifuben.png">icon按钮</button>
        <button class="circle cir" type="circle" icon="/common/images/rest-fill.png">icon按钮</button>
    </div>
    <text class="title">文本按钮</text>
    <div class="circleall">
        <button class="text" type="text">文本按钮1</button>
        <button class="text text1" type="text">文本按钮2</button>
        <button class="text text2" type="text">文本按钮3</button>
    </div>
    <text class="title">长胶囊按钮</text>
    <div class="all">
        <button class="download" type="download">下载按钮</button>
        <button class="download white" type="download">禁止下载</button>
        <button class="download" type="download" id="download-btn"
                onclick="setProgress">{{downloadText}}</button>
    </div>
     </div>

HarmonyOS API：基础组件-鸿蒙开发者社区

属性

除支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
type	string	-	否	不支持动态修改。默认展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定。该属性可选值包括： - capsule：胶囊型按钮，带圆角按钮，有背景色和文本； - circle：圆形按钮，支持放置图标； - text：文本按钮，仅包含文本显示； - arc：弧形按钮，仅支持智能穿戴； - download：下载按钮，额外增加下载进度条功能。
value	string	-	否	button的文本值。
icon	string	-	否	button的图标路径，图标格式为jpg，png和svg。
placement⁵⁺	string	end	否	仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为： - start：图标位于文本起始处； - end：图标位于文本结束处； - top：图标位于文本上方； - bottom：图标位于文本下方。
waiting	boolean	false	否	waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。

样式

type设置为非arc

除支持通用样式外，还支持如下样式：

名称	类型	默认值	必填	描述
text-color	<color>	#007dff	否	按钮的文本颜色。
font-size	<length>	16px	否	按钮的文本尺寸。
allow-scale	boolean	true	否	按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。
font-style	string	normal	否	按钮的字体样式。
font-weight	number \| string	normal	否	按钮的字体粗细。见text组件font-weight的样式属性。
font-family	<string>	sans-serif	否	按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。
icon-width	<length>	-	否	设置圆形按钮内部图标的宽，默认填满整个圆形按钮。 icon使用svg图源时必须设置该样式。
icon-height	<length>	-	否	设置圆形按钮内部图标的高，默认填满整个圆形按钮。 icon使用svg图源时必须设置该样式。
radius	<length>	-	否	按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。

type设置为arc

除支持通用样式中background-color、opacity、display、visibility、position、[left|top|right|bottom]外，还支持如下样式：

名称	类型	默认值	必填	描述
text-color	<color>	#de0000	否	弧形按钮的文本颜色。
font-size	<length>	37.5px	否	弧形按钮的文本尺寸。
allow-scale	boolean	true	否	弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
font-style	string	normal	否	弧形按钮的字体样式。
font-weight	number \| string	normal	否	弧形按钮的字体粗细。见text组件font-weight的样式属性。
font-family	<string>	sans-serif	否	按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

事件

支持通用事件。

方法

支持通用方法。

类型为download时，支持如下方法：

名称	参数	描述
setProgress	{ progress:percent }	设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。浮在进度条上的文字通过value值进行变更。

divider

更新时间: 2023-02-17 09:19

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。

权限列表

无

子组件

不支持。

属性

除支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
vertical	boolean	false	否	使用水平分割线还是垂直分割线，默认水平。

说明

不支持focusable、disabled属性。

样式

仅支持如下样式：

名称	类型	默认值	必填	描述
margin	<length>	0	否	使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
margin-[left\|top\|right\|bottom]	<length>	0	否	使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。
color	<color>	#08000000	否	设置分割线颜色。
stroke-width	<length>	1	否	设置分割线宽度。
display	string	flex	否	确定分割线所产生的框的类型。值flex/none，默认值flex。
visibility	string	visible	否	是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。
line-cap	string	butt	否	设置分割线条的端点样式，默认为butt，可选值为： - butt：分割线两端为平行线； - round：分割线两端额外添加半圆，额外增加一个线宽的分割线长度； - square：分割线两端额外添加半方形，额外增加一个线宽的分割线长度；
flex	number	-	否	规定了分割线如何适应父组件中的可用空间，用来设置组件的flex-grow。仅父容器为<div>、<list-item>、<tabs>时生效。
flex-grow	number	0	否	设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数，0为不伸展。仅父容器为<div>、<list-item>、<tabs>时生效。
flex-shrink	number	1	否	设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。仅父容器为<div>、<list-item>、<tabs>时生效。
flex-basis	<length>	-	否	设置分割线在主轴方向上的初始大小。仅父容器为<div>、<list-item>、<tabs>时生效。

事件

不支持。

方法

不支持。

示例

<!-- xxx.hml -->
<div class="container">   
  <div class="content">        
    <divider class="divider" vertical="false"></divider>    
  </div>
</div>

/* xxx.css */
.container {    
  margin: 20px;
  flex-direction:column;
  width:100%;
  height:100%;
  align-items:center;
}
.content{    
  width:80%;
  height:40%;
  border:1px solid #000000;
  align-items: center;
  justify-content: center;
  flex-direction:column;
}
.divider {    
  margin: 10px;
  color: #ff0000ff;
  stroke-width: 3px;
  line-cap: round;
}

HarmonyOS API：基础组件-鸿蒙开发者社区