ColorPicker Color Selector

Rules

Basic Example

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "Color",
    value: '#ff7271',
}

Props Configuration Examples

Support Alpha Channel

const rule = {
    type: "ColorPicker",
    field: "bgColor",
    title: "Background Color",
    value: '#ff7271',
    props: {
        showAlpha: true,
        colorFormat: 'rgba',
    },
}

Predefined Colors

const rule = {
    type: "ColorPicker",
    field: "themeColor",
    title: "Theme Color",
    value: '#409EFF',
    props: {
        predefine: [
            '#ff4500',
            '#ff8c00',
            '#ffd700',
            '#90ee90',
            '#00ced1',
            '#1e90ff',
            '#c71585',
        ],
    },
}

Different Sizes

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "Color",
    value: '#409EFF',
    props: {
        size: "large",
    },
}

Events Examples

Listen to Color Changes

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "Theme Color",
    value: '#409EFF',
    on: {
        change: (value) => {
            console.log('Color changed:', value);
        },
        'active-change': (value) => {
            console.log('Currently displayed color:', value);
        },
        focus: (event) => {
            console.log('Gained focus:', event);
        },
        blur: (event) => {
            console.log('Lost focus:', event);
        },
    },
}

Update Preview After Color Change

const rule = [
    {
        type: "ColorPicker",
        field: "color",
        title: "Theme Color",
        value: '#409EFF',
        inject: true,
        on: {
            change: ($inject, value) => {
                // Update color preview
                $inject.api.setValue('colorPreview', value);
            },
        },
    },
    {
        type: "input",
        field: "colorPreview",
        title: "Color Value",
        props: {
            disabled: true,
        },
    },
]

Full configuration: Element_ColorPicker

value :String

Props

Attribute Name	Description	Type	Default Value
disabled	Whether to disable	boolean	false
size	Size	enum	—
showAlpha	Whether to support alpha channel selection	boolean	false
colorFormat	Format of color written to v-model	enum	—
popperClass	Class name for ColorPicker dropdown	string	—
predefine	Predefined colors	object	—
validateEvent	Whether to trigger form validation on input	boolean	true
tabindex	Tabindex of ColorPicker	string / number	0
ariaLabel	Aria-label of ColorPicker	string	—
id	Id of ColorPicker	string	—
teleported	Whether to render popover dropdown list to body	boolean	true

Events

Event Name	Description	Type
change	Triggered when bound value changes	Function
active-change	Triggered when currently displayed color in panel changes	Function
focus	Triggered when gaining focus	Function
blur	Triggered when losing focus	Function