## 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 |