@aglyn/ shared- ui- color- pickers( 共取彩色)

反应取色器:一个薄薄的包装器 react-color是因为 SketchPicker 将所选颜色保存在本地状态,并在 color 道具变化. 它主要是 颜色字段的构件 @aglyn/shared-ui-jsx-forms。 。 。 .

从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .

安装

npm install @aglyn/shared-ui-color-picker

同伴依赖性 : react 财务报告和审定财务报表 @mui/material。 。 。 . react-color 是一个常规依赖,并安装在软件包中.

里面有什么东西

• ColorPicker 财务报告和审定财务报表 ColorPickerProps 从根入. ColorPickerProps 扩展 SketchPickerProps 从 react-color 没有改变,所以每个 SketchPicker 应用道具( o)color, (中文(简体) ), onChange, (中文(简体) ), onChangeComplete, (中文(简体) ), presetColors, (中文(简体) ), disableAlpha 以及别的。 组件在每次 color 道具更改,并转发回执到 SketchPicker。 。 。 .
• 子路径模块, 不从根再导出 :
  • @aglyn/shared-ui-color-picker/color-swatch —— 说 ColorSwatch
  • @aglyn/shared-ui-color-picker/color-grid —— 说 ColorGrid
  • @aglyn/shared-ui-color-picker/constants/material-palettes —— 说 materialPalettes,作为数据的材料设计色调板

使用量

import { ColorPicker } from '@aglyn/shared-ui-color-picker'
import { useState } from 'react'

export function Example() {
  const [color, setColor] = useState('#1976d2')
  return (
    <ColorPicker
      color={color}
      onChangeComplete={(result) => setColor(result.hex)}
    />
  )
}

怎样才合适

A 类 shared UI软件包. 这取决于 @aglyn/shared-util-tools,以及 @aglyn/shared-ui-jsx-forms 在其上构建其颜色形式字段. 共享软件包是通用的:它们只导入其他共享软件包并持有没有插件的域名.

许可证

阿帕奇2.0 (英语). 资料来源: https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/color-cicker 页面存档备份,存于互联网档案馆