# ColorPicker 颜色选择器

一个颜色选择器组件，使用原生 HTML5 颜色输入提供直观的颜色选择界面。

## 特性

- **原生选择器**: 使用浏览器的原生颜色选择器以获得一致的用户体验
- **视觉预览**: 显示当前选择的颜色色板
- **十六进制显示**: 显示十六进制颜色代码
- **多种变体**: 纯净、轮廓和填充样式
- **紧凑模式**: 为密集 UI 节省空间的选项
- **禁用和只读**: 完全支持禁用和只读状态

## 安装

```bash
npm install @ticatec/uniface-element
```

```typescript
import ColorPicker from '@ticatec/uniface-element/ColorPicker';
```

## 基本用法

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let selectedColor = '#ff3e00';
</script>

<ColorPicker bind:value={selectedColor} />
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
|------|------|---------|-------------|
| `value` | `string` | `'#ff3e00'` | 选中的颜色（十六进制格式） |
| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | 视觉样式变体 |
| `disabled` | `boolean` | `false` | 禁用选择器 |
| `readonly` | `boolean` | `false` | 以只读模式显示 |
| `compact` | `boolean` | `false` | 使用紧凑布局 |
| `style` | `string` | `''` | 附加CSS样式 |
| `onChange` | `(value: string) => void` | - | 颜色更改时的回调 |

## 示例

### 基本颜色选择器

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let color = '#007acc';
</script>

<ColorPicker bind:value={color} />
<p>已选择: {color}</p>
```

### 带更改处理程序

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let color = '#ff5722';

  function handleColorChange(newColor) {
    console.log('颜色已更改为:', newColor);
    color = newColor;
  }
</script>

<ColorPicker value={color} onChange={handleColorChange} />
```

### 不同变体

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let color1 = '#e91e63';
  let color2 = '#9c27b0';
  let color3 = '#673ab7';
</script>

<div style="display: flex; flex-direction: column; gap: 16px;">
  <!-- 默认 -->
  <ColorPicker bind:value={color1} />

  <!-- 纯净 -->
  <ColorPicker bind:value={color2} variant="plain" />

  <!-- 轮廓 -->
  <ColorPicker bind:value={color3} variant="outlined" />

  <!-- 填充 -->
  <ColorPicker bind:value={color1} variant="filled" />
</div>
```

### 紧凑模式

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let color = '#4caf50';
</script>

<ColorPicker bind:value={color} compact />
```

### 禁用和只读

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let disabledColor = '#f44336';
  let readonlyColor = '#2196f3';
</script>

<div style="display: flex; gap: 16px;">
  <ColorPicker bind:value={disabledColor} disabled />
  <ColorPicker bind:value={readonlyColor} readonly />
</div>
```

### 主题颜色示例

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
  import FormField from '@ticatec/uniface-element/FormField';

  let primaryColor = '#007acc';
  let secondaryColor = '#22bdff';
  let backgroundColor = '#f5f5f5';
  let textColor = '#374151';
</script>

<div style="padding: 24px;">
  <FormField label="主色">
    <ColorPicker bind:value={primaryColor} />
  </FormField>

  <FormField label="辅助色">
    <ColorPicker bind:value={secondaryColor} />
  </FormField>

  <FormField label="背景色">
    <ColorPicker bind:value={backgroundColor} />
  </FormField>

  <FormField label="文字颜色">
    <ColorPicker bind:value={textColor} />
  </FormField>
</div>
```

## 最佳实践

1. **十六进制格式**: 始终使用十六进制颜色代码 (#RRGGBB)
2. **默认颜色**: 为更好的用户体验提供合理的默认值
3. **实时预览**: 尽可能在上下文中显示选中的颜色
4. **验证**: 接受用户输入时确保有效的十六进制格式
5. **无障碍访问**: 考虑无障碍要求的颜色对比度

## 浏览器支持

- 支持 HTML5 颜色输入的现代浏览器
- Chrome、Firefox、Safari、Edge（最新版本）
- 在旧浏览器上优雅降级

## 注意事项

- 组件使用原生颜色选择器以获得最佳性能和一致性
- 颜色值应采用十六进制格式 (#RRGGBB)
- 色板显示当前选中的颜色
- 点击色板打开原生颜色选择器对话框