组件/表单组件

EColorPicker 颜色选择

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 EColorPicker { showAlpha: true colorFormat: "rgb" commitOnConfirm: true value: "#409eff" predefine: ["#409eff", "#909399", "#67c23a", "#e6a23c", "#f56c6c"] } }

效果

运行代码，体验组件交互

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

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

颜色选择

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EColorPicker { showAlpha: true }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

accessibleNamestring

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

默认值text

autoInsertSpacebool

在两个中文字符的按钮文字之间插入空格。

默认值继承 Provider，默认 false

autofocusbool

组件显示时自动聚焦；受控件可用状态及弹层生命周期影响。

默认值false

bgbool

为文字按钮显示背景。

默认值false

checkablebool

是否允许通过点击切换选中状态。

默认值false

checkedbool

控件是否选中或开启。

默认值false

circlebool

采用圆形按钮样式。

默认值false

clearablebool

显示清除操作；评分中允许再次点击当前分数清零。

默认值true

colorcolor

自定义颜色；透明值通常表示使用当前主题或语义配色。

默认值动态绑定

colorFormatstring

颜色值的输出格式。

"hex" / "hex3"
"hex4" / "hex6"
"hex8" / "name"
"rgb" / "prgb"
"hsl" / "hsv"

默认值"hex"

commitOnConfirmbool

仅点击确认时提交颜色。

默认值false

dashedbool

使用虚线边框。

默认值继承 Provider，默认 false

durationint

加载图标完成一圈旋转的时间，单位为毫秒。

默认值2600

emptyValuesvar

判定为空值的数组；默认包含 undefined、null 和空字符串。

默认值继承 Provider，默认 [undefined, null, ""]

enabledbool

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

默认值true

fontfont

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

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

默认值应用字体

heightreal

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

默认值implicitHeight

iconComponentComponent

自定义图标的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

iconSizeint

图标、选项或交互部件的尺寸，单位为像素。

默认值动态绑定

iconSourceint

组件使用的图标。

EIcons.*
0（无图标）

默认值0

leftIconbool

将图标放在文字左侧。

默认值false

linkbool

采用链接按钮样式。

默认值false

loadingbool

是否处于加载状态。

默认值false

loadingComponentComponent

自定义加载状态的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

loadingIconSourceint

组件使用的图标。

EIcons.*
0（无图标）

默认值0

minHeightint

控件最小高度，单位为像素；默认随 size 变化。

默认值动态绑定

nativeTypestring

按钮行为，可用于普通操作、提交或重置表单。

button
submit
reset

默认值"button"

paddingSpacingint

文字和图标之间的间距，单位为像素。

默认值6

plainbool

采用朴素配色。

默认值继承 Provider，默认 false

predefinevar

预设颜色数组。

默认值[]

progressreal

进度值；用于进度动画或通知进度显示，具体范围由组件处理。

默认值-1

roundbool

采用圆角胶囊按钮样式。

默认值继承 Provider，默认 false

showAlphabool

允许编辑透明度。

默认值false

showButtonsbool

显示颜色面板确认和清除按钮。

默认值true

sizeint

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

EStyle.Small
EStyle.Medium
EStyle.Large

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

strokeWidthint

边框、分隔线或进度轨道的线宽，单位为像素。

默认值3

styleTypeint

语义配色风格。

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

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

textstring

显示的文字内容。

默认值""

textButtonbool

采用文字按钮样式。

默认值继承 Provider，默认 false

validateEventbool

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

默认值true

valuevar

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

默认值动态绑定

valueOnClearvar

清除后的值，也可传函数返回清除值；默认继承配置。

默认值继承 Provider，默认 ""

visiblebool

是否显示组件。

默认值true

widthreal

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

默认值implicitWidth

displayTextstring只读

经过格式化、进度或徽章规则处理后的显示文字。

默认值由运行时计算

popupalias只读

内部菜单、弹层或提示对象引用。

默认值别名：colorPopup

信号

签名作用

cleared()

使用清空操作清除内容后触发。

changed(var value)

所选值变化时触发，value 为新的值。

confirmed(var value)

确认操作时触发；若有 value 参数，则为确认后的值。

picked(string value)

选定值后触发，value 为选中的值。

activeChanged(var value)

调色过程中当前颜色变化时触发，value 为尚未确认的颜色。

popupVisibleChanged(bool visible)

选择面板显示或隐藏时触发，visible 表示面板是否可见。

方法

签名作用

hide()

隐藏组件的弹出内容。

clear()

清空组件当前内容或选择。

cancel()

取消当前操作。

confirm()

确认当前选择并提交结果。

show()

显示组件的弹出内容。