# 颜色选择器 ColorPicker

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/color-picker
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

用于选择和展示颜色

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：基本使用方法。
- **受控模式**：颜色选择器面板会在打开时同步输入框中的值。
- **尺寸**：颜色选择器定义了四种尺寸（`mini`,`small`, `default`, `large`），分别为 24px，28px，32px，36px。
- **禁用**：设置 `disabled` 禁用整个选择器。
- **禁用透明通道**：设置 `disabledAlpha` 以隐藏 Alpha 值滑条和数值显示。 如果 `defaultValue` 传入的初始色值包含 Alpha，那么初次显示时，色块会保留传入的 Alpha。当用户在取色版上取色时，Alpha 将被重置并锁定为100。
- **颜色格式**：通过 `format` 设置颜色值的格式，支持 `hex` 和 `rgb`。
- **渐变色**：通过 `mode` 设置颜色为单一颜色或渐变色。
- **预设颜色和历史颜色**：可以通过 `showPreset` 和 `showHistory` 开启预设颜色和历史颜色区域。历史颜色需要用户自行控制展示内容。
- **自定义触发器**：可以自定义颜色选择器的触发元素，此时与颜色输入框相关的属性将会失效。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API
### ColorPicker

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|defaultPopupVisible|默认弹出框是打开还是关闭|boolean |`-`|-|
|disabled|禁用|boolean |`-`|-|
|disabledAlpha|禁用透明通道|boolean |`-`|-|
|popupVisible|弹出框是打开还是关闭。(受控)|boolean |`-`|-|
|showHistory|显示历史颜色|boolean |`-`|-|
|showPreset|显示预设颜色|boolean |`-`|-|
|showText|显示颜色值|boolean |`-`|-|
|unmountOnExit|隐藏后是否销毁 DOM 结构|boolean |`true`|-|
|format|颜色值的格式|'hex' \| 'rgb' |`-`|-|
|size|输入框的尺寸|[InputProps](input#input)['size'] |`default`|-|
|className|节点类名|string \| string[] |`-`|-|
|defaultValue|默认值|string \| [GradientColor](#gradientcolor)[] |`-`|-|
|historyColors|历史颜色的颜色数组|string[] |`-`|-|
|mode|单一颜色或渐变色模式|[ColorPickerMode](#colorpickermode) \| [ColorPickerMode](#colorpickermode)[] |`single`|-|
|presetColors|预设颜色的颜色数组|string[] |`-`|-|
|style|节点样式|CSSProperties |`-`|-|
|triggerProps|可以接受所有 Trigger 组件的 Props|Partial<[TriggerProps](trigger#trigger)> |`-`|-|
|value|颜色值，受控模式|string \| [GradientColor](#gradientcolor)[] |`-`|-|
|onChange|颜色值改变时触发|(value: string \| [GradientColor](#gradientcolor)[]) => void |`-`|-|
|onVisibleChange|下拉框收起展开时触发。|(visible: boolean) => void |`-`|-|
|renderFooter|自定义面板底部内容|() => ReactNode |`-`|2.62.0|
|triggerElement|自定义触发元素。|ReactNode \| ((params: { value: string \| [GradientColor](#gradientcolor)[] }) => ReactNode) |`-`|2.60.0|

### GradientColor

```js
export interface GradientColor {
  color: string;
  percent: number;
}
```

### ColorPickerMode

```js
export enum ColorPickerMode {
  Single = "single",
  Gradient = "gradient",
}
```

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt