@douyinfe/semi-material-color-picker
TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

取色器

Semi 风格的取色器. 0 dependence.

img_1.png

代码演示

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

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

/@douyinfe/semi-material-color-picker/

    Package Sidebar

    Install

    npm i @douyinfe/semi-material-color-picker

    Weekly Downloads

    0

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    226 kB

    Total Files

    52

    Last publish

    Collaborators

    • yannlynn
    • yumeizhang
    • xyqnpm
    • chenyuling_99
    • point.halo
    • zwlafk
    • daiqiangreal
    • shijiatongxue
    • bytednpm
    • wuhw