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

Ukážka predstavuje základný flow výberu farby bez ďalších integrácií. Je to najlepší štart na pochopenie správania komponentu.

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

color

Popis	Nastavuje farbu komponentu.
Atribút	color
Typ	string
Predvolené	#000000

inputEditable

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

noColorArea

Popis	Riadi farebné štýlovanie súvisiace s voľbou no-color-area.
Atribút	no-color-area
Typ	boolean
Predvolené	false

noControls

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

noSwatches

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

swatches

Popis	Nastavuje textovú hodnotu uloženú vo voľbe swatches.
Atribút	swatches
Typ	string
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.