这是 npm 包的概述antd-colorpicker

Ant design是用于构建高效用户界面的非常方便的设计系统。

在使用它时,我面临着在我的表单中添加颜色选择器的必要性。不幸的是,没有这样的组件。

Antd 文档建议使用第三方库来创建颜色选择器。

最终,我决定,为每个面临与我相同问题的人编写 npm 包会有所帮助。

---

NPM antd-colorpicker

怎么用?

1.安装包:

npm install antd-colorpicker --save-dev

或者

yarn add -D antd-colorpicker

2. 将Colorpicker添加到Form.Item内的表单中:

import React from 'react'
import { Button, Form } from 'antd'
import { Colorpicker, ColorPickerValue } from 'antd-colorpicker'

import 'antd/dist/antd.css'

const App = () => {
  const initialValues = { color: { r: 26, g: 14, b: 85, a: 1 } }
  const handleOnFinish = (values: { color: ColorPickerValue }) => {
    console.log(values)
  }

  return (
    <Form onFinish={handleOnFinish} initialValues={initialValues}>
      <Form.Item label={'Colorpicker'} name={`color`}>
        <Colorpicker />
      </Form.Item>
      <Form.Item>
        <Button type='primary' htmlType='submit'>
          Show values in console
        </Button>
      </Form.Item>
    </Form>
  )
}

export default App

进入全屏模式 退出全屏模式

这将是最简单的颜色选择器。

定制

您可以使用以下属性来自定义颜色选择器:

财产

描述

类型

默认

拣货员

选择器的类型

块选择器

铬拾取器

圆圈选择器

紧凑型拾取器

GithubPicker

谷歌选择器

色调选择器

材质选择器

PhotoshopPicker

草图选择器

滑块选择器

色板选择器

推特选择器

草图选择器

弹出

为颜色选择器使用弹出窗口。组件弹出框

布尔值

错误的

onColorResult

改变颜色值的函数,将返回

功能(颜色)

不明确的

块样式

仅在popup=true时相关。块的 CSS 样式,在弹出窗口中选择后会更改颜色

CSS属性

{ }

popoverProps

Popover组件的属性

对象

{ }

...休息

反应颜色选择器的自定义属性

道具

---

示例

弹窗

<Colorpicker popup />

进入全屏模式 退出全屏模式

更改块,触发弹出窗口

<Colorpicker
  popup
  blockStyles={{
    width: '30px',
    height: '30px',
    borderRadius: '50%',
  }}
/>

进入全屏模式 退出全屏模式

选择13种拣选机中的一种

您可以使用以下选项之一:BlockPicker|ChromePicker|CirclePicker|CompactPicker|GithubPicker|GooglePicker|HuePicker|MaterialPicker|PhotoshopPicker|SketchPicker|SliderPicker|SwatchesPicker|TwitterPicker

<Colorpicker picker={'CirclePicker'} />

进入全屏模式 退出全屏模式

自定义颜色的结果值

默认情况下,您将获得以下颜色结果:

{
  "hsl": {
    "h": 250.3448275862069,
    "s": 0.1594202898550725,
    "l": 0.346725,
    "a": 1
  },
  "hex": "#4f4a67",
  "rgb": {
    "r": 79,
    "g": 74,
    "b": 103,
    "a": 1
  },
  "hsv": {
    "h": 250.3448275862069,
    "s": 0.2750000000000001,
    "v": 0.402,
    "a": 1
  },
  "oldHue": 250.3448275862069,
  "source": "hsv"
}

进入全屏模式 退出全屏模式

让我们尝试改变它,得到我们想要的:

<Colorpicker onColorResult={(color) => color.rgb} />

进入全屏模式 退出全屏模式

结果值将是:

{
  "r": 79,
  "g": 74,
  "b": 103,
  "a": 1
}

进入全屏模式 退出全屏模式

---

如何使用表单外的组件?

您必须定义value和onChange(或onChangeComplete)道具。

这就是您的组件的样子:

import React, { useState } from 'react'
import { AnyColorFormat, Colorpicker } from 'antd-colorpicker'

const App = () => {
  const [color, setColor] = useState<AnyColorFormat>({
    r: 0,
    g: 0,
    b: 0,
    a: 0.5,
  })

  const onChange = (color: AnyColorFormat) => {
    setColor(color)
  }

  return (
    <div
      style={{ maxWidth: '500px', margin: '20px auto', paddingBottom: '50px' }}
    >
      <Colorpicker value={color} onChange={onChange} />
    </div>
  )
}

export default App

进入全屏模式 退出全屏模式

---

就是这个!享受!