Color Picker
react-color](https://casesandberg.github.io/react-color/) カラーピッカーのラッパー。
オプション
- variant |
string
: カラーピッカーのバリエーション(Compact
、Sketch
、Material
、Button
、Block
のいずれか)。. Default:'Sketch'
. - color |
(string|object)
: 文字列はHeXコードを、
オブジェクトはRGBやHSLの値を保持します。または
{ h: 0, s: 0, l: .10 }のようなRGBやHSLの値を保持する
オブジェクトを保持します。どちらも、1つ以外のアルファ値に対しては
aプロパティを受け付けます。. Default:
'#fff'`. - disableAlpha |
boolean
: アルファスライダーとオプションを削除するかどうかを制御します。. Default:false
. - presetColors |
array<string>
: カラーピッカーの下部にあるデフォルトの色を指定する HeXstrings
。. Default:[ '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF' ]
. - width |
number
: カラーピッカーの幅. Default:200
. - className |
string
: クラス名. Default:''
. - style |
object
: CSSインラインスタイル. Default:{}
. - onChange |
function
: 色が変わるたびに呼び出されるコールバック. Default:onChange() {}
. - onChangeComplete |
function
: 色の変更が完了したときに呼び出されるコールバック. Default:onChangeComplete() {}
.
例としては、以下のようなものがあります。
ライブエディター
結果
ReferenceError: Provider is not defined