Color Picker
Ein Wrapper für den react-color Farbwähler.
Optionen
- variant |
string
: Farbwähler-Variante (entwederKompakt
,Skizze
,Material
,Knopf
oderBlock
). Default:'Sketch'
. - color |
(string|object)
: Zeichenkette" mit einem HeX-Code oder ein "Objekt" mit RGB- oder HSL-Werten wie "r: 255, g: 255, b: 255" oder "h: 0, s: 0, l: .10 }, das die aktive Farbe bestimmt. Beide akzeptieren eine "a"-Eigenschaft für andere Alphawerte als einen. Default:
'#fff'`. - disableAlpha |
boolean
: steuert, ob Alpha-Schieberegler und Optionen entfernt werden sollen. Default:false
. - presetColors |
array<string>
: HeXStrings
, die die Standardfarben am unteren Rand des Colorpickers festlegen. Default:[ '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF' ]
. - width |
number
: Breite des Farbwählers (in px). Default:200
. - className |
string
: Klassenname. Default:''
. - style |
object
: CSS-Inline-Stile. Default:{}
. - onChange |
function
: Callback, der jedes Mal aufgerufen wird, wenn die Farbe geändert wird. Default:onChange() {}
. - onChangeComplete |
function
: Callback, der aufgerufen wird, sobald ein Farbwechsel abgeschlossen ist. Default:onChangeComplete() {}
.
Beispiele
Live-Editor
Ergebnis
ReferenceError: Provider is not defined