颜色选择器 ColorPicker

提供颜色选取的组件，自 5.5.0 版本开始提供该组件。

何时使用

当用户需要自定义颜色选择的时候使用。

代码演示

最简单的使用方法。

TypeScript
JavaScript
import { ColorPicker } from 'mogud';
import React from 'react';

const Demo = () => <ColorPicker />;

export default Demo;

清除颜色

清除已选择的颜色。

TypeScript
JavaScript
import { ColorPicker } from 'mogud';
import React from 'react';

export default () => <ColorPicker allowClear />;

自定义触发事件

自定义颜色面板的触发事件，提供 click 和 hover 两个选项。

TypeScript
JavaScript
import { ColorPicker } from 'mogud';
import React from 'react';

const Demo = () => <ColorPicker trigger="hover" />;

export default Demo;

预设颜色

设置颜色选择器的预设颜色。

TypeScript
JavaScript
import { ColorPicker } from 'mogud';
import React from 'react';

export default () => (
  <ColorPicker
    presets={[
      {
        label: 'Recommended',
        colors: [
          '#000000',
          '#000000E0',
          '#000000A6',
          '#00000073',
          '#00000040',
          '#00000026',
          '#0000001A',
          '#00000012',
          '#0000000A',
          '#00000005',
          '#F5222D',
          '#FA8C16',
          '#FADB14',
          '#8BBB11',
          '#52C41A',
          '#13A8A8',
          '#1677FF',
          '#2F54EB',
          '#722ED1',
          '#EB2F96',
          '#F5222D4D',
          '#FA8C164D',
          '#FADB144D',
          '#8BBB114D',
          '#52C41A4D',
          '#13A8A84D',
          '#1677FF4D',
          '#2F54EB4D',
          '#722ED14D',
          '#EB2F964D',
        ],
      },
      {
        label: 'Recent',
        colors: [],
      },
    ]}
  />
);

受控模式

通过 value 和 onChange 设置组件为受控模式。

TypeScript
JavaScript
import { ColorPicker, theme } from 'mogud';
import type { Color } from 'mogud/es/color-picker';
import React, { useState } from 'react';

const Demo: React.FC = () => {
  const { token } = theme.useToken();
  const [color, setColor] = useState<Color | string>(token.colorPrimary);
  return <ColorPicker value={color} onChange={setColor} />;
};

export default Demo;

自定义触发器

自定义颜色面板的触发器。

TypeScript
JavaScript
import { Button, ColorPicker, theme } from 'mogud';
import type { Color } from 'mogud/es/color-picker';
import React, { useMemo, useState } from 'react';

const Demo: React.FC = () => {
  const { token } = theme.useToken();
  const [color, setColor] = useState<Color | string>(token.colorPrimary);

  const bgColor = useMemo<string>(
    () => (typeof color === 'string' ? color : color.toHexString()),
    [color],
  );

  const btnStyle: React.CSSProperties = {
    backgroundColor: bgColor,
  };

  return (
    <ColorPicker value={color} onChange={setColor}>
      <Button type="primary" style={btnStyle}>
        open
      </Button>
    </ColorPicker>
  );
};

export default Demo;

HEX: #1677ff

HSB: hsb(215, 91%, 100%)

RGB: rgb(22, 119, 255)

颜色编码

编码格式，支持HEX、HSB、RGB。

TypeScript
JavaScript
import { Col, ColorPicker, Row, Space } from 'mogud';
import type { Color, ColorPickerProps } from 'mogud/es/color-picker';
import React, { useMemo, useState } from 'react';

export default () => {
  const [colorHex, setColorHex] = useState<Color | string>('#1677ff');
  const [colorHsb, setColorHsb] = useState<Color | string>('hsb(215, 91%, 100%)');
  const [colorRgb, setColorRgb] = useState<Color | string>('rgb(22, 119, 255)');
  const [formatHex, setFormatHex] = useState<ColorPickerProps['format']>('hex');
  const [formatHsb, setFormatHsb] = useState<ColorPickerProps['format']>('hsb');
  const [formatRgb, setFormatRgb] = useState<ColorPickerProps['format']>('rgb');

  const hexString = useMemo(
    () => (typeof colorHex === 'string' ? colorHex : colorHex.toHexString()),
    [colorHex],
  );

  const hsbString = useMemo(
    () => (typeof colorHsb === 'string' ? colorHsb : colorHsb.toHsbString()),
    [colorHsb],
  );

  const rgbString = useMemo(
    () => (typeof colorRgb === 'string' ? colorRgb : colorRgb.toRgbString()),
    [colorRgb],
  );

  return (
    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
      <Row align="middle">
        <Space>
          <Col>
            <ColorPicker
              format={formatHex}
              value={colorHex}
              onChange={setColorHex}
              onFormatChange={setFormatHex}
            />
          </Col>
          <Col>
            HEX: <span>{hexString}</span>
          </Col>
        </Space>
      </Row>
      <Row align="middle">
        <Space>
          <Col>
            <ColorPicker
              format={formatHsb}
              value={colorHsb}
              onChange={setColorHsb}
              onFormatChange={setFormatHsb}
            />
          </Col>
          <Col>
            HSB: <span>{hsbString}</span>
          </Col>
        </Space>
      </Row>
      <Row align="middle">
        <Space>
          <Col>
            <ColorPicker
              format={formatRgb}
              value={colorRgb}
              onChange={setColorRgb}
              onFormatChange={setFormatRgb}
            />
          </Col>
          <Col>
            RGB: <span>{rgbString}</span>
          </Col>
        </Space>
      </Row>
    </Space>
  );
};

API

自 antd@5.5.0 版本开始提供该组件。

参数	说明	类型	默认值
format	颜色格式	`rgb` \| `hex` \| `hsb`	`hex`
value	颜色的值	string \| `Color`	-
defaultValue	颜色默认的值	string \| `Color`	-
allowClear	允许清除选择的颜色	boolean	false
presets	预设的颜色	`{ label: ReactNode, colors: Array<string \| Color> }[]`	-
children	颜色选择器的触发器	React.ReactNode	-
trigger	颜色选择器的触发模式	`hover` \| `click`	`click`
open	是否显示弹出窗口	boolean	-
disabled	禁用颜色选择器	boolean	-
placement	弹出窗口的位置	`top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight`	`bottomLeft`
arrow	配置弹出的箭头	`boolean \| { pointAtCenter: boolean }`	`true`
onChange	颜色变化的回调	`(value: Color, hex: string) => void`	-
onFormatChange	颜色格式变化的回调	`(format: 'hex' \| 'rgb' \| 'hsb') => void`	-
onOpenChange	当 `open` 被改变时的回调	`(open: boolean) => void`	-
onClear	清除的回调	`() => void`	-

Color

参数	说明	类型	默认值
toHex	转换成 `hex` 格式字符，返回格式如：`1677ff`	`() => string`	-
toHexString	转换成 `hex` 格式颜色字符串，返回格式如：`#1677ff`	`() => string`	-
toHsb	转换成 `hsb` 对象	`() => ({ h: number, s: number, b: number, a number })`	-
toHsbString	转换成 `hsb` 格式颜色字符串，返回格式如：`hsb(215, 91%, 100%)`	`() => string`	-
toRgb	转换成 `rgb` 对象	`() => ({ r: number, g: number, b: number, a number })`	-
toRgbString	转换成 `rgb` 格式颜色字符串，返回格式如：`rgb(22, 119, 255)`	`() => string`	-

FAQ

关于颜色赋值的问题

颜色选择器的值同时支持字符串色值和选择器生成的 Color 对象，但由于不同格式的颜色字符串互相转换会有精度误差问题，所以受控场景推荐使用选择器生成的 Color 对象来进行赋值操作，这样可以避免精度问题，保证取值是精准的，选择器也可以按照预期工作。

提供颜色选取的组件，自 5.5.0 版本开始提供该组件。

何时使用

当用户需要自定义颜色选择的时候使用。

代码演示

基本使用

最简单的使用方法。

TypeScript
JavaScript
import { ColorPicker } from 'mogud';
import React from 'react';

const Demo = () => <ColorPicker />;

export default Demo;

清除颜色

清除已选择的颜色。

TypeScript
JavaScript
import { ColorPicker } from 'mogud';
import React from 'react';

export default () => <ColorPicker allowClear />;

自定义触发事件

自定义颜色面板的触发事件，提供 click 和 hover 两个选项。

TypeScript
JavaScript
import { ColorPicker } from 'mogud';
import React from 'react';

const Demo = () => <ColorPicker trigger="hover" />;

export default Demo;

预设颜色

设置颜色选择器的预设颜色。

TypeScript
JavaScript
import { ColorPicker } from 'mogud';
import React from 'react';

export default () => (
  <ColorPicker
    presets={[
      {
        label: 'Recommended',
        colors: [
          '#000000',
          '#000000E0',
          '#000000A6',
          '#00000073',
          '#00000040',
          '#00000026',
          '#0000001A',
          '#00000012',
          '#0000000A',
          '#00000005',
          '#F5222D',
          '#FA8C16',
          '#FADB14',
          '#8BBB11',
          '#52C41A',
          '#13A8A8',
          '#1677FF',
          '#2F54EB',
          '#722ED1',
          '#EB2F96',
          '#F5222D4D',
          '#FA8C164D',
          '#FADB144D',
          '#8BBB114D',
          '#52C41A4D',
          '#13A8A84D',
          '#1677FF4D',
          '#2F54EB4D',
          '#722ED14D',
          '#EB2F964D',
        ],
      },
      {
        label: 'Recent',
        colors: [],
      },
    ]}
  />
);

受控模式

通过 value 和 onChange 设置组件为受控模式。

TypeScript
JavaScript
import { ColorPicker, theme } from 'mogud';
import type { Color } from 'mogud/es/color-picker';
import React, { useState } from 'react';

const Demo: React.FC = () => {
  const { token } = theme.useToken();
  const [color, setColor] = useState<Color | string>(token.colorPrimary);
  return <ColorPicker value={color} onChange={setColor} />;
};

export default Demo;

自定义触发器

自定义颜色面板的触发器。

TypeScript
JavaScript
import { Button, ColorPicker, theme } from 'mogud';
import type { Color } from 'mogud/es/color-picker';
import React, { useMemo, useState } from 'react';

const Demo: React.FC = () => {
  const { token } = theme.useToken();
  const [color, setColor] = useState<Color | string>(token.colorPrimary);

  const bgColor = useMemo<string>(
    () => (typeof color === 'string' ? color : color.toHexString()),
    [color],
  );

  const btnStyle: React.CSSProperties = {
    backgroundColor: bgColor,
  };

  return (
    <ColorPicker value={color} onChange={setColor}>
      <Button type="primary" style={btnStyle}>
        open
      </Button>
    </ColorPicker>
  );
};

export default Demo;

HEX: #1677ff

HSB: hsb(215, 91%, 100%)

RGB: rgb(22, 119, 255)

颜色编码

编码格式，支持HEX、HSB、RGB。

TypeScript
JavaScript
import { Col, ColorPicker, Row, Space } from 'mogud';
import type { Color, ColorPickerProps } from 'mogud/es/color-picker';
import React, { useMemo, useState } from 'react';

export default () => {
  const [colorHex, setColorHex] = useState<Color | string>('#1677ff');
  const [colorHsb, setColorHsb] = useState<Color | string>('hsb(215, 91%, 100%)');
  const [colorRgb, setColorRgb] = useState<Color | string>('rgb(22, 119, 255)');
  const [formatHex, setFormatHex] = useState<ColorPickerProps['format']>('hex');
  const [formatHsb, setFormatHsb] = useState<ColorPickerProps['format']>('hsb');
  const [formatRgb, setFormatRgb] = useState<ColorPickerProps['format']>('rgb');

  const hexString = useMemo(
    () => (typeof colorHex === 'string' ? colorHex : colorHex.toHexString()),
    [colorHex],
  );

  const hsbString = useMemo(
    () => (typeof colorHsb === 'string' ? colorHsb : colorHsb.toHsbString()),
    [colorHsb],
  );

  const rgbString = useMemo(
    () => (typeof colorRgb === 'string' ? colorRgb : colorRgb.toRgbString()),
    [colorRgb],
  );

  return (
    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
      <Row align="middle">
        <Space>
          <Col>
            <ColorPicker
              format={formatHex}
              value={colorHex}
              onChange={setColorHex}
              onFormatChange={setFormatHex}
            />
          </Col>
          <Col>
            HEX: <span>{hexString}</span>
          </Col>
        </Space>
      </Row>
      <Row align="middle">
        <Space>
          <Col>
            <ColorPicker
              format={formatHsb}
              value={colorHsb}
              onChange={setColorHsb}
              onFormatChange={setFormatHsb}
            />
          </Col>
          <Col>
            HSB: <span>{hsbString}</span>
          </Col>
        </Space>
      </Row>
      <Row align="middle">
        <Space>
          <Col>
            <ColorPicker
              format={formatRgb}
              value={colorRgb}
              onChange={setColorRgb}
              onFormatChange={setFormatRgb}
            />
          </Col>
          <Col>
            RGB: <span>{rgbString}</span>
          </Col>
        </Space>
      </Row>
    </Space>
  );
};

API

自 antd@5.5.0 版本开始提供该组件。

参数	说明	类型	默认值
format	颜色格式	`rgb` \| `hex` \| `hsb`	`hex`
value	颜色的值	string \| `Color`	-
defaultValue	颜色默认的值	string \| `Color`	-
allowClear	允许清除选择的颜色	boolean	false
presets	预设的颜色	`{ label: ReactNode, colors: Array<string \| Color> }[]`	-
children	颜色选择器的触发器	React.ReactNode	-
trigger	颜色选择器的触发模式	`hover` \| `click`	`click`
open	是否显示弹出窗口	boolean	-
disabled	禁用颜色选择器	boolean	-
placement	弹出窗口的位置	`top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight`	`bottomLeft`
arrow	配置弹出的箭头	`boolean \| { pointAtCenter: boolean }`	`true`
onChange	颜色变化的回调	`(value: Color, hex: string) => void`	-
onFormatChange	颜色格式变化的回调	`(format: 'hex' \| 'rgb' \| 'hsb') => void`	-
onOpenChange	当 `open` 被改变时的回调	`(open: boolean) => void`	-
onClear	清除的回调	`() => void`	-

Color

参数	说明	类型	默认值
toHex	转换成 `hex` 格式字符，返回格式如：`1677ff`	`() => string`	-
toHexString	转换成 `hex` 格式颜色字符串，返回格式如：`#1677ff`	`() => string`	-
toHsb	转换成 `hsb` 对象	`() => ({ h: number, s: number, b: number, a number })`	-
toHsbString	转换成 `hsb` 格式颜色字符串，返回格式如：`hsb(215, 91%, 100%)`	`() => string`	-
toRgb	转换成 `rgb` 对象	`() => ({ r: number, g: number, b: number, a number })`	-
toRgbString	转换成 `rgb` 格式颜色字符串，返回格式如：`rgb(22, 119, 255)`	`() => string`	-

FAQ

关于颜色赋值的问题

颜色选择器的值同时支持字符串色值和选择器生成的 Color 对象，但由于不同格式的颜色字符串互相转换会有精度误差问题，所以受控场景推荐使用选择器生成的 Color 对象来进行赋值操作，这样可以避免精度问题，保证取值是精准的，选择器也可以按照预期工作。

Mogu Design

ColorPicker颜色选择器

Mogu Design

ColorPicker颜色选择器

何时使用

代码演示

API

Color

FAQ

关于颜色赋值的问题

何时使用

代码演示

API

Color

FAQ

关于颜色赋值的问题