回复
HarmonyOS API：基础组件
joytrian
发布于 2023-3-30 19:26
浏览
0收藏
版本：v3.1 Beta
slider
更新时间: 2023-02-17 09:19
说明
从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动条组件，用来快速调节设置值，如音量、亮度等。
子组件
不支持。
属性
除支持通用属性外，还支持如下属性：
名称 | 类型 | 默认值 | 必填 | 描述 |
min | number | 0 | 否 | 滑动选择器的最小值。 |
max | number | 100 | 否 | 滑动选择器的最大值。 |
step | number | 1 | 否 | 每次滑动的步长。 |
value | number | 0 | 否 | 滑动选择器的初始值。 |
mode5+ | string | outset | 否 | 滑动条样式： - outset：滑块在滑杆上； - inset：滑块在滑杆内。 |
showsteps5+ | boolean | false | 否 | 是否显示步长标识。 |
showtips5+ | boolean | false | 否 | 滑动时是否有气泡提示百分比。 |
样式
除支持通用样式外，还支持如下样式：
名称 | 类型 | 默认值 | 必填 | 描述 |
color | <color> | #19000000 | 否 | 滑动条的背景颜色。 |
selected-color | <color> | #ff007dff | 否 | 滑动条的已选择颜色。 |
block-color | <color> | #ffffff | 否 | 滑动条的滑块颜色。 |
事件
除支持通用事件外，还支持如下事件：
名称 | 参数 | 描述 |
change | ChangeEvent | 选择值发生变化时触发该事件。 |
表1 ChangeEvent
属性 | 类型 | 说明 |
value5+ | number | 当前slider的进度值。 |
mode5+ | string | 当前change事件的类型，可选值为： - start：slider的值开始改变。 - move：slider的值跟随手指拖动中。 - end：slider的值结束改变。 - click：slider的值在点击进度条后改变。 |
示例
<!-- xxx.hml -->
<div class="container">
<slider min="0" max="100" value="{{ value }}" mode="outset" showtips="true"></slider>
<slider class="" min="0" max="100" value="{{ value }}" step="20" mode="inset" showtips="true"></slider>
<slider class="" min="0" max="100" value="{{ value }}" showsteps="true" step="20" mode="inset" showtips="false"></slider>
</div>
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
slider{
margin-top: 100px;
}
span
更新时间: 2023-02-17 09:19
说明
从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
作为<text>子组件提供文本修饰能力。
权限列表
无
子组件
无
属性
支持通用属性。
说明
不支持focusable和disabled属性。
样式
仅支持如下样式：
名称 | 类型 | 默认值 | 必填 | 描述 |
color | <color> | - | 否 | 设置文本段落的文本颜色。 |
font-size | <length> | 30px | 否 | 设置文本段落的文本尺寸。 |
allow-scale | boolean | true | 否 | 设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
font-style | string | normal | 否 | 设置文本段落的字体样式，见text组件font-style的样式属性。 |
font-weight | number | string | normal | 否 | 设置文本段落的字体粗细，见text组件font-weight的样式属性。 |
text-decoration | string | none | 否 | 设置文本段落的文本修饰，见text组件text-decoration样式属性。 |
font-family | string | sans-serif | 否 | 设置文本段落的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。 |
事件
仅支持通用事件中的click事件。
方法
不支持。
示例
<!-- xxx.hml -->
<div class="container">
<text class="title">
<span class="spanTxt">span</span>
</text>
</div>
/* xxx.css */
.container {
display: flex;
justify-content: center;
align-items: center;
}
.title {
font-size: 30px;
text-align: center;
width: 100%;
height: 100px;
}
.spanTxt{
color: chartreuse;
font-size: 50px;
}
switch
更新时间: 2023-02-17 09:19
说明
从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
开关选择器，通过开关，开启或关闭某个功能。
权限列表
无
子组件
不支持。
属性
除支持通用属性外，还支持如下属性：
名称 | 类型 | 默认值 | 必填 | 描述 |
checked | boolean | false | 否 | 是否选中。 |
showtext | boolean | false | 否 | 是否显示文本。 |
texton | string | "On" | 否 | 选中时显示的文本。 |
textoff | string | "Off" | 否 | 未选中时显示的文本。 |
样式
除支持通用样式外，还支持如下样式：
名称 | 类型 | 默认值 | 必填 | 描述 |
texton-color | <color> | #000000 | 否 | 选中时显示的文本颜色，仅设置texton和textoff生效。 |
textoff-color | <color> | #000000 | 否 | 未选中时显示的文本颜色，仅设置texton和textoff生效。 |
text-padding | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 |
font-size | <length> | - | 否 | 文本尺寸，仅设置texton和textoff生效。 |
allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
font-style | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见text组件font-style的样式属性。 |
font-weight | number | string | normal | 否 | 字体粗细，仅设置texton和textoff生效。见text组件的font-weight的样式属性。 |
font-family | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 |
事件
除支持通用事件外，还支持如下事件：
名称 | 参数 | 描述 |
change | { checked: checkedValue } | 选中状态改变时触发该事件。 |
方法
支持通用方法。
示例
<!-- xxx.hml -->
<div class="container">
<switch @change="normalswitchChange">
</switch>
<switch class="switch" showtext="true" texton="开启" textoff="关闭" @change="switchChange">
</switch>
<switch class="switch text" showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange">
</switch>
</div>
/* xxx.css */
.container {
display: flex;
justify-content: center;
align-items: center;
}
.switch {
texton-color: red;
textoff-color: forestgreen;
}
.text {
text-padding: 20px;
font-size: 30px;
font-weight: 700;
}
// xxx.js
import promptAction from '@ohos.promptAction';
export default {
data: {
title: 'World'
},
switchChange(e) {
if (e.checked) {
promptAction.showToast({
message: "打开开关"
});
} else {
promptAction.showToast({
message: "关闭开关"
});
}
},
normalswitchChange(e) {
if (e.checked) {
promptAction.showToast({
message: "switch on"
});
} else {
promptAction.showToast({
message: "switch off"
});
}
}
}
已于2023-3-30 19:26:03修改
赞
收藏
回复
相关推荐
