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

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

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

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

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"
            });
        }
    }
}

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

文章转载自:​​https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-components-basic-switch-0000001478341221-V3?catalogVersion=V3​

已于2023-3-30 19:26:03修改
收藏
回复
举报
回复
    相关推荐