ColorPicker

Rules

Basic Example

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

Props Configuration Examples

Disable Alpha

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

Preset Colors

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "Color",
    value: '#ff7271',
    props: {
        swatchColors: [
            '#FF6B6B',
            '#4ECDC4',
            '#45B7D1',
            '#FFA07A',
            '#98D8C8',
        ],
    }
}

Events Examples

Listen to Changes

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "Color",
    value: '#ff7271',
    on: {
        change: (value) => {
            console.log('Color changed:', value);
        },
    },
}

Linkage Update Other Fields

const rule = [
    {
        type: "ColorPicker",
        field: "primaryColor",
        title: "Primary Color",
        value: '#ff7271',
        inject: true,
        on: {
            change: ($inject, value) => {
                // Auto-generate secondary color from primary color
                const secondaryColor = lightenColor(value, 0.2);
                $inject.api.setValue('secondaryColor', secondaryColor);
            },
        },
    },
    {
        type: "ColorPicker",
        field: "secondaryColor",
        title: "Secondary Color",
        value: '#ff9999',
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: TDesign_ColorPicker

value :String