Components/Form components

EColorPicker Color picker

import EUI 1.0

Examples

Color picker

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 EColorPicker { showAlpha: true colorFormat: "rgb" 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

Color selection

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EColorPicker { 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

accessibleNamestring

Name read by assistive technologies; provide a readable name for controls without text.

Defaulttext

autoInsertSpacebool

Insert a space between two Chinese characters in button text.

DefaultInherited; default false

autofocusbool

Focus automatically when shown, subject to availability and popup lifecycle.

Defaultfalse

bgbool

Show a background for a text button.

Defaultfalse

checkablebool

Allow clicks to toggle the checked state.

Defaultfalse

checkedbool

Whether the control is checked or active.

Defaultfalse

circlebool

Use circular button styling.

Defaultfalse

clearablebool

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

Defaulttrue

colorcolor

Custom color; a transparent value usually selects theme or semantic colors.

DefaultDynamic binding

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

dashedbool

Use a dashed border.

DefaultInherited; default false

durationint

Duration of one loading-icon rotation in milliseconds.

Default2600

emptyValuesvar

Values treated as empty; includes undefined, null and the empty string by default.

DefaultInherited; default [undefined, null, ""]

enabledbool

Allow interaction; false disables the control.

Defaulttrue

fontfont

Font settings for the family, size and text style.

Common fields:
family, pixelSize, pointSize
bold, italic, weight
underline, strikeout
letterSpacing, wordSpacing

Defaultapplication font

heightreal

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

DefaultimplicitHeight

iconComponentComponent

Component slot for custom icon; null uses the default content. See this page’s examples for delegate context.

Defaultnull

iconSizeint

Size of the icon, option or interactive part in pixels.

DefaultDynamic binding

iconSourceint

Icon used by the component.

EIcons.*
0 (no icon)

Default0

leftIconbool

Place the icon to the left of the text.

Defaultfalse

linkbool

Use link button styling.

Defaultfalse

loadingbool

Whether the component is loading.

Defaultfalse

loadingComponentComponent

Component slot for custom loading state; null uses the default content. See this page’s examples for delegate context.

Defaultnull

loadingIconSourceint

Icon used by the component.

EIcons.*
0 (no icon)

Default0

minHeightint

Minimum control height in pixels; follows size by default.

DefaultDynamic binding

nativeTypestring

Button behavior for normal actions, submitting or resetting a form.

button
submit
reset

Default"button"

paddingSpacingint

Gap between text and icon in pixels.

Default6

plainbool

Use plain colors.

DefaultInherited; default false

predefinevar

Array of preset colors.

Default[]

progressreal

Progress value used by progress animation or notification progress display.

Default-1

roundbool

Use rounded pill button styling.

DefaultInherited; default false

showAlphabool

Allow editing alpha opacity.

Defaultfalse

showButtonsbool

Show confirm and clear buttons in the color panel.

Defaulttrue

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

strokeWidthint

Border, divider or progress track width in pixels.

Default3

styleTypeint

Semantic color style.

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

DefaultInherited; default EStyle.Default

textstring

Displayed text.

Default""

textButtonbool

Use text button styling.

DefaultInherited; default false

validateEventbool

Request enclosing-form validation when the value changes.

Defaulttrue

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

displayTextstringRead only

Display text after formatting, progress or badge rules.

DefaultComputed at runtime

popupaliasRead only

Reference to the internal menu, popup or tooltip.

DefaultAlias: colorPopup

Signals

SignaturePurpose

cleared()

Emitted after the contents are cleared with the clear action.

changed(var value)

Emitted when the selection changes; value is the new value.

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.

popupVisibleChanged(bool visible)

Emitted when the picker panel opens or closes; visible is its visibility.

Methods

SignaturePurpose

hide()

Hide the popup content.

clear()

Clear the current contents or selection.

cancel()

Cancel the current operation.

confirm()

Confirm and commit the current selection.

show()

Show the popup content.