@douyinfe/semi-material-color-picker v2.0.3

取色器

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

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