组件/表单组件

ESwitch 开关

import EUI 1.0

示例与代码

开关

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 ESwitch { value: "off" activeValue: "on" inactiveValue: "off" activeColor: "#67c23a" activeIcon: EIcons.CHECK inactiveColor: "#909399" inactiveIcon: EIcons.XMARK activeText: qsTr("已开启") inactiveText: qsTr("已关闭") beforeChange: function() { return Promise.resolve(true) } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

开关

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 width: parent.width ESwitch { text: qsTr("默认") } ESwitch { checked: true text: qsTr("已开启") } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

accessibleNamestring

辅助技术读取的名称；建议为无文字控件设置可读名称。

默认值text

activeColorcolor

激活或选中状态的颜色。

默认值动态绑定

activeIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值0

activeTextstring

开启或关闭状态的文字。

默认值""

activeValuevar

选中或开启状态对应的值。

默认值true

beforeChangevar

开关状态改变前的校验函数，可返回布尔值或 Promise。

默认值null

checkedbool

控件是否选中或开启。

默认值false

durationint

动画或显示持续时间，单位为毫秒；组件的绑定表达式给出实际用途。

默认值300

enabledbool

是否允许交互；false 时控件禁用。

默认值true

fontfont

字体配置，控制字体、字号及文字样式。

常用字段：
family、pixelSize、pointSize
bold、italic、weight
underline、strikeout
letterSpacing、wordSpacing

默认值应用字体

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

inactiveColorcolor

未激活状态的颜色。

默认值动态绑定

inactiveIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值0

inactiveTextstring

开启或关闭状态的文字。

默认值""

inactiveValuevar

未选中或关闭状态对应的值。

默认值false

loadingbool

是否处于加载状态。

默认值false

sizeint

控件尺寸；默认继承最近的 EConfigProvider。

EStyle.Small
EStyle.Medium
EStyle.Large

默认值继承 Provider，默认 EStyle.Medium

textstring

显示的文字内容。

默认值checked ? activeText : inactiveText

validateEventbool

值变化时是否向所属表单派发校验请求。

默认值true

valuevar

当前值；通过属性绑定读写，数组形式用于多选或范围选择。

默认值undefined

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

信号

签名作用

changeRejected(string message)

状态切换被拒绝时触发，message 说明拒绝原因。