Toggle

shadow

Toggle elementy sú malé interaktívne ovládacie prvky, ktoré umožňujú prepínať medzi dvoma stavmi. Môžete ich aktivovať kliknutím myši. Najčastejšie sa používajú na aktiváciu a deaktiváciu funkcionalít prípadne na prepínanie medzi zobrazením a skrytím iných elementov.

Basic Usage

Ukážka zobrazuje toggle v jeho najjednoduchšej forme, teda ako prepínač s predvoleným vzhľadom a správaním.

Colors

Ukážka porovnáva farebné varianty toggle komponentu, aby bolo jasné, ako vplývajú na význam a čitateľnosť stavu.

Vlastné CSS premenné

Pomocou CSS premenných viete upraviť rozmery, polomer aj farby tracku a handle bez potreby vlastného wrapper komponentu.

Kedy použiť

Použite wje-toggle, 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

checked

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

customErrorDisplay

Popis	Riadi validáciu alebo stavové hlášky pre voľbu custom-error-display.
Atribút	custom-error-display
Typ	boolean
Predvolené	false

disabled

Popis	Vypína používateľskú interakciu s komponentom.
Atribút	disabled
Typ	boolean
Predvolené	-

required

Popis	Označí komponent ako povinný pre validáciu formulára.
Atribút	required
Typ	boolean
Predvolené	-

validateOnChange

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

value

Popis	Nastavuje aktuálnu hodnotu komponentu.
Atribút	value
Typ	string
Predvolené	on

Udalosti

Názov	Popis
wje-toggle:input	Vyvolá sa pri zmene vstupnej hodnoty.
wje-toggle:change	Vyvolá sa pri zmene hodnoty komponentu.

Metódy

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
input	Štýluje shadow časť input.
toggle	Štýluje toggle slot a oblasť markera.

CSS vlastné premenné

Názov	Popis
--wje-toggle-color-base	Vlastná CSS premenná, ktorá riadi color base.
--wje-toggle-width	Vlastná CSS premenná, ktorá riadi width.
--wje-toggle-height	Vlastná CSS premenná, ktorá riadi height.
--wje-toggle-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-toggle-handle-width	Vlastná CSS premenná, ktorá riadi handle width.
--wje-toggle-handle-height	Vlastná CSS premenná, ktorá riadi handle height.
--wje-toggle-handle-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-toggle-handle-color	Vlastná CSS premenná, ktorá riadi handle color.
--wje-toggle-handle-shadow	Vlastná CSS premenná, ktorá riadi tieň.
--wje-toggle-handle-shadow-checked	Vlastná CSS premenná, ktorá riadi tieň.
--wje-toggle-duration	Vlastná CSS premenná na štýlovanie komponentu (duration).
--wje-toggle-curve	Vlastná CSS premenná na štýlovanie komponentu (curve).

Sloty

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