Skip to main content

ColorPicker 颜色选择器

颜色选择器，用于颜色选择的操作控件,相比较下拉选择框而言,颜色选择器不仅可以对颜色进行选择,也可以对颜色进一步编辑。 颜色选择器，用于颜色选择和调整的选择器控件。

引入​

import {ColorPicker} from 'acud';

基本用法​

function App() {
    const [color, setColor] = useState('#4D4DFF');

    const handleChange = color => {
        console.log(color);
        setColor(color);
    };

    return (
        <div className="acux-demo-column">
            <h5>无默认值</h5>
            <ColorPicker />

            <h5>有默认值（非受控）</h5>
            <ColorPicker defaultColor={color} />

            <h5>有固定值（受控?）</h5>
            <ColorPicker color={color} />

            <h5>通用方法</h5>
            <ColorPicker color={color} onChange={handleChange} />
        </div>
    );
}

禁用状态​

<ColorPicker defaultColor='#4D4DFF' disabled />

可清空颜色值​

<ColorPicker defaultColor='#4D4DFF' allowClear />

简洁颜色选择器​

简洁颜色选择器简化了选择器的部分，只显示已选颜色。

<ColorPicker defaultColor='#4D4DFF' type="simple" />

混合颜色选择器​

相对基本颜色选择器而言,混合颜色选择器针对更加专业的颜色调节的业务场景，例如图文编辑中图片颜色、文字颜色调节等场景。

<ColorPicker defaultColor='#4D4DFF' type="custom" />

API​

参数说明类型默认值
defaultColor默认选中颜色string--
defaultColors默认色板，常规/推荐颜色，可以快速选择颜色，如果需要无颜色选项，设置为transparent即可string[]DEFAULT_COLORS(具体值见下方)
disabled是否可选booleanfalse
type颜色选择器有三种类型simple〡cusAtom〡defaultdefault
color指定当前选中的色值，HEX格式的颜色string--
placeholder当前下拉选择器的placeholderstring--
inputPlaceholder当type设置为custom时，下拉中输入框的placeholderstring--
allowClear支持清除booleanfalse
onChange选中色值即色值变化时，调用该函数。其中color: {hex, rgb, hsl, hsv}function(hex〡color)--
const DEFAULT_COLORS = [
    'transparent',
    '#FFFFFF',
    '#FFC27D',
    '#FF908C',
    '#7BD964',
    '#57D9D4',
    '#7DADFF',
    '#9497FF',
    '#E62E6B',
    '#FAD000',
    '#FF9326',
    '#F33E3E',
    '#30BF13',
    '#30B5F2',
    '#2468F2',
    '#4D4DFF'
];