取色器

Semi 风格的取色器. 0 dependence.

代码演示

此处示例可实时编辑和运行

import React, { useState, useRef } from 'react';
import SemiColorPicker from '@douyinfe/SemiColorPicker';
import { Button } from '@ies/semi-ui-react';
() => {
    const [v,setV] = useState({
        format:'rgba',
        value:{
            r:150,
            g:50,
            b:50,
            a:0.7
        }
    });
    return (
        <div>
            <SemiColorPicker
                usePopover={false}
                defaultFormat={'hex'}
                defaultValue={{
                    format:'hex',
                    value:'#66ccff'
                }}
                onChange={v=>console.log(v)}
                popoverProps={{trigger:'click',position:'bottomRight'}}
                alpha={true}/>

            <SemiColorPicker
                usePopover={true}
                defaultFormat={'hex'}
                defaultValue={{
                    format:'hex',
                    value:'#66ccff'
                }}
                onChange={v=>console.log(v)}
                popoverProps={{trigger:'click',position:'bottomRight'}}
                alpha={true}>
                <Button>popover mode 非受控</Button>
            </SemiColorPicker>
            <SemiColorPicker
                usePopover={true}
                defaultFormat={'hex'}
                value={v}
                onChange={v=>{
                    console.log(v);
                    setV({
                        format: "rgba",
                        value: v.rgba
                    });
                }}
                popoverProps={{trigger:'click',position:'bottomRight'}}
                alpha={true}>
                <Button>popover mode 受控</Button>
            </SemiColorPicker>
        </div>
    );
};

API 参考

一些颜色转换函数和类型定义参考自 react-colorful

| 参数名 | 说明 | 类型 | 默认值 | |---------------|---------------------------------|-----------------------------------------------------------------|-------| | defaultFormat | 默认颜色选择模式 | 'hex' 'rgba' 'hsva' | - | | defaultValue | 默认颜色 | Value | - | | popoverProps | popover 模式下 popover 透传props | PropoverProps | - | | value | 选中颜色, 传入即为受控, 类型format 只能为 hsva | Value | - | | onChange | 用户选择颜色回调 | (value: {rgba: RgbaColor,hex: string,hsva: HsvaColor}) => void; | - | | alpha | 是否开启透明度选择 | boolen | - | | footer | 底部自定义元素 | ReactNode | - | | usePopover | 是否启用 popover 模式 | boolen | false | | width | 颜色选择器矩形宽度 | number | 280px | | height | 颜色选择器矩形高度 | number | 280px |

type Value = {
    format:'hex' | 'rgba' | 'hsva'
    value:HsvaColor|RgbaColor|string
}

export interface HsvColor {
    h: number;
    s: number;
    v: number;
}

export interface HsvaColor extends HsvColor {
    a: number;
}

import React from "react";

export interface RgbColor {
    r: number;
    g: number;
    b: number;
}

export interface RgbaColor extends RgbColor {
    a: number;
}

export interface HslColor {
    h: number;
    s: number;
    l: number;
}

export interface HslaColor extends HslColor {
    a: number;
}

export interface HsvColor {
    h: number;
    s: number;
    v: number;
}

export interface HsvaColor extends HsvColor {
    a: number;
}