Color Picker

shadow

Color picker je element, ktorý zobrazuje farebnú paletu a umožňuje používateľom vybrať jednu z jej farieb. Zobrazuje hex kód vybranej farby, ktorý je používateľom možné jednoducho skopírovať.

Základné použitie

Kedy použiť

Použite wje-color-picker, keď používateľ zadáva hodnotu, vyberá možnosti alebo vykonáva akciu vo formulári.

Kedy nepoužiť

Nepoužívajte ho len ako vizuálny dekoratívny prvok bez interakcie. V takom prípade uprednostnite prezentačné komponenty.

Prístupnosť

Vždy prepojte komponent s popisom (label/aria-label), zachovajte ovládanie klávesnicou a pri validačných chybách zobrazte zrozumiteľnú správu.

Odporúčané postupy

• Majte jednotné validačné pravidlá a error stavy naprieč celým formulárom.
• Pri asynchrónnych operáciách zobrazte stav načítania alebo disabled stav.
• Pri zložitých formulároch preferujte menšie sekcie a okamžitú spätnú väzbu.

Atribúty a vlastnosti

inputEditable

Popis	Určuje, či je voľba input-editable zapnutá a ovplyvňuje správanie komponentu.
Atribút	input-editable
Typ	boolean
Predvolené	-

Udalosti

Názov	Popis
wje-color-picker:select	Vyvolá sa pri výbere položky.

Metódy

parseSwatches

Popis	Spustí metódu parseSwatches na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(value: string) => string[]

createSwatches

Popis	Vytvorí swatches a pripojí ho do štruktúry komponentu.
Signatúra	(node: any) => void

setSliders

Popis	Nastaví sliders a aplikuje súvisiace zmeny stavu.
Signatúra	(color: any) => void

dimension

Popis	Spustí metódu dimension na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => object

getPointerPosition

Popis	Vráti pointer position z aktuálneho stavu komponentu.
Signatúra	(e: any) => \{x: number, y: number\}

setMarkerPosition

Popis	Nastaví marker position a aplikuje súvisiace zmeny stavu.
Signatúra	(x: any, y: any) => void

clampMarkerPosition

Popis	Spustí metódu clampMarkerPosition na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(x: number, y: number) => \{x: number, y: number\}

setColorAtPosition

Popis	Nastaví color at position a aplikuje súvisiace zmeny stavu.
Signatúra	(x: any, y: any, alpha: any) => *｜tinycolor

getHueAreaColor

Popis	Vráti hue area color z aktuálneho stavu komponentu.
Signatúra	(color: string) => string

CSS tieňové časti

Názov	Popis
anchor	Štýluje shadow časť anchor.
picker	Štýluje shadow časť picker.
marker	Štýluje shadow časť marker.
color-area	Štýluje shadow časť color-area.
hue	Štýluje shadow časť hue.
alpha	Štýluje shadow časť alpha.
color-preview	Štýluje shadow časť color-preview.
input	Štýluje shadow časť input.

CSS vlastné premenné

Názov	Popis
--wje-color-picker-area	Vlastná CSS premenná na štýlovanie komponentu (area).
--wje-color-picker-value	Vlastná CSS premenná na štýlovanie komponentu (value).
--wje-color-picker-swatch	Vlastná CSS premenná na štýlovanie komponentu (swatch).
--wje-color-picker-size	Vlastná CSS premenná na štýlovanie komponentu (size).
--wje-color-picker-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.