@douyinfe/semi-material-color-picker

取色器

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;
}