组件/表单组件

EColorPickerPanel 颜色面板

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 EColorPickerPanel { showAlpha: true showButtons: true colorFormat: "hsl" 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 EColorPickerPanel { showAlpha: true }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

alphareal

透明度、HSV 明度或饱和度，范围 0～1。

默认值1

brightnessreal

透明度、HSV 明度或饱和度，范围 0～1。

默认值1

clearablebool

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

默认值false

colorFormatstring

颜色值的输出格式。

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

默认值"hex"

commitOnConfirmbool

仅点击确认时提交颜色。

默认值false

enabledbool

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

默认值true

heightreal

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

默认值implicitHeight

huereal

HSV 色相，范围 0～360。

默认值0

predefinevar

预设颜色数组。

默认值[]

saturationreal

透明度、HSV 明度或饱和度，范围 0～1。

默认值0

showAlphabool

允许编辑透明度。

默认值false

showButtonsbool

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

默认值false

valuevar

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

默认值动态绑定

valueOnClearvar

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

默认值继承 Provider，默认 ""

visiblebool

是否显示组件。

默认值true

widthreal

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

默认值implicitWidth

信号

签名作用

cleared()

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

canceled()

取消当前操作时触发。

confirmed(var value)

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

picked(string value)

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

activeChanged(var value)

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

方法

签名作用

confirm()

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

cancel()

取消当前操作。

clear()

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

begin(nextValue)

开始一次颜色编辑，nextValue 可指定初始颜色。

selectColor(color)

将 color 设为当前颜色，并根据确认模式决定是否提交。