Radio
Radio element je upravená verzia štandardného HTML radio elementu, rozšírená o štýly pre dosiahnutie vizuálne konzistentnejšieho používateľského rozhrania naprieč rôznymi zariadeniami. Funguje podobne ako štandardné rádio tlačidlo a umožňuje používateľom vybrať jednu z množiny možností. Používa sa vo vnútri elementu radio group, ktorý im pridáva zarovnanie a zoskupuje ich do jedného celku.
Základné použitie
Ukážka zobrazuje radio v jeho predvolenom stave bez ďalších variantov alebo skupinového správania.
Inline
Pridaním vlastnosti inline sa elementy usporiadajú v horizontálnom rozložení.
Úprava štýlov
color
Pomocou vlastnosti color je možné zmeniť farbu radio elementu.
Kedy použiť
Použite wje-radio, 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 |
disabled
| Popis | Vypína používateľskú interakciu s komponentom. |
| Atribút | disabled |
| Typ | boolean |
| Predvolené | false |
value
| Popis | Nastavuje aktuálnu hodnotu komponentu. |
| Atribút | value |
| Typ | any |
| Predvolené | - |
Udalosti
| Názov | Popis |
|---|---|
wje-radio:change | Vyvolá sa pri zmene hodnoty komponentu. |
wje-radio:input | Vyvolá sa pri zmene vstupnej hodnoty. |
Metódy
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS tieňové časti
| Názov | Popis |
|---|---|
native-radio | Štýluje shadow časť native-radio. |
CSS vlastné premenné
| Názov | Popis |
|---|---|
--wje-radio-margin-inline | Vlastná CSS premenná, ktorá riadi margin inline. |
--wje-radio-margin-top | Vlastná CSS premenná, ktorá riadi margin top. |
--wje-radio-margin-bottom | Vlastná CSS premenná, ktorá riadi margin bottom. |
Sloty
| Názov | Popis |
|---|---|
default | Predvolený slot pre hlavný obsah komponentu. |