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

Colors

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é	-

disabled

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

required

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

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 shadow časť toggle.

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.