## Color-picker
color-picker は、複数のカラーフォーマットに対応したカラーセレクターです。
### 基本的な使い方
:::demo color-picker は、v-model にバインドするために文字列型の変数が必要です。
```html
With default value
With no default value
```
:::
### アルファ
:::demo color-picker はアルファチャンネルの選択をサポートしています。アルファチャンネルの選択を有効にするには、`show-alpha` アトリビュートを追加するだけです。
```html
```
:::
### 定義済みの色
:::demo color-picker は事前定義されたカラーオプションをサポートしています。
```html
```
:::
### サイズ
:::demo
```html
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ----------------------------------------------- | ------- | --------------------- | ------------------------------------------------------------- |
| model-value / v-model | バインディング値 | string | — | — |
| disabled | color-picker を無効にするかどうか | boolean | — | false |
| size | color-picker のサイズ | string | — | medium / small / mini |
| show-alpha | アルファスライダーを表示するかどうか | boolean | — | false |
| color-format | v-model の色形式 | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
| popper-class | color-picker のドロップダウンのカスタムクラス名 | string | — | — |
| predefine | 定義済みカラーオプション | array | — | — |
### イベント
| Event Name | Description | Parameters |
| ------------- | ---------------------------------------------------- | ------------------ |
| change | 入力値変更時のトリガ | color value |
| active-change | 現在アクティブな色が変更されたときにトリガされます。 | active color value |