bixi/packages/core/color-picker/index.zh-CN.md

企业级中后台前端解决方案

---
type: Basic
title: Color Picker
subtitle: 颜色拾取器
cols: 2
order: 7
---

```ts
import { BixiColorPickerModule } from '@bixi/core/color-picker';
```

## API

### bixi-color-picker

| 参数 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[mode]`         | 颜色模式       | `'hex'|'rgb'|'rgbString'` | `hex` |
| `[size]`         | 大小       | `'small'|'lg'|'default'` | `default` |
| `[disabled]`     | 是否禁用       | `boolean` | `false` |
| `[alphaDisabled]`| 禁用 Alpha（hex 模式自动打开）    | `boolean` | `false` |
| `[presetColors]` | 内置颜色       | `string[]` | `PRESET_COLORS` |
| `(openChange)`   | 面板打开事件  | `EventEmitter<boolean>` | `-` |

### bixi-color-panel
| 参数 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[(color)]` | 颜色值       | `string|IRgb` | `-` |
其它 API 同 `bixi-color-picker` 保持一致

### bixi-color-block
| 参数 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[color]` | 颜色值       | `string|IRgb` | `-` |

### Type
```  typescript
interface IRgb {
  r: number;
  g: number;
  b: number;
  a: number;
};

const PRESET_COLORS = [ 
  '#F67672',
  '#F99A41',
  '#FAC10A',
  '#AADF8A',
  '#60D7B1',
  '#478CFF',
  '#A97BF8',
  '#F36E9F',
  '#5871B0',
  '#0076BB',
  '#D75200',
  '#D3A402',
  '#418426',
  '#465814',
  '#A65A50',
  '#CE8F6B'
];
```