Components/Form components

EColorPickerPanel Color picker panel

import EUI 1.0

Examples

Color picker panel

QML sourceQML

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"] } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Standalone color panel

QML sourceQML

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

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

alphareal

Alpha, HSV brightness or saturation from 0 to 1.

Default1

brightnessreal

Alpha, HSV brightness or saturation from 0 to 1.

Default1

clearablebool

Show a clear action; ratings may be cleared by clicking the current score again.

Defaultfalse

colorFormatstring

Output format of the color value.

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

Default"hex"

commitOnConfirmbool

Commit the color only when confirmed.

Defaultfalse

enabledbool

Allow interaction; false disables the control.

Defaulttrue

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

huereal

HSV hue from 0 to 360.

Default0

predefinevar

Array of preset colors.

Default[]

saturationreal

Alpha, HSV brightness or saturation from 0 to 1.

Default0

showAlphabool

Allow editing alpha opacity.

Defaultfalse

showButtonsbool

Show confirm and clear buttons in the color panel.

Defaultfalse

valuevar

Current value; read or write through property bindings, with arrays for multiple or range selection.

DefaultDynamic binding

valueOnClearvar

Value after clearing, or a function returning it; inherits configuration by default.

DefaultInherited; default ""

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

Signals

SignaturePurpose

cleared()

Emitted after the contents are cleared with the clear action.

canceled()

Emitted when the current operation is cancelled.

confirmed(var value)

Emitted on confirmation; value, when present, is the confirmed value.

picked(string value)

Emitted after choosing a value; value is the chosen value.

activeChanged(var value)

Emitted as the active color changes while picking; value is the unconfirmed color.

Methods

SignaturePurpose

confirm()

Confirm and commit the current selection.

cancel()

Cancel the current operation.

clear()

Clear the current contents or selection.

begin(nextValue)

Begin color editing, optionally using nextValue as the initial color.

selectColor(color)

Set color as the active color and commit according to the confirmation mode.