Dropdown
Dropdown element slúži na zobrazenie kontextového menu po kliknutí na tlačidlo. Umožňuje používateľovi zvoliť jednu z preddefinovaných možností. Obsahuje element Button, ktorý funguje ako aktivátor a element Menu s obsahom v podobe jednotlivých položiek MenuItem..
Základné použitie
Ukážka zobrazuje základný dropdown so spúšťačom a obsahom menu. Je to dobrý východiskový bod pre bežné akčné alebo navigačné menu.
Dropdown s dialógom
Ukážka používa dropdown ako miesto, odkiaľ používateľ spustí ďalšiu akciu, konkrétne otvorenie dialógu.
Zobrazenie na hover
Ukážka prepína dropdown z kliknutia na hover, aby bolo vidieť rozdiel v správaní aj vhodnosť tohto vzoru.
Dropdown s tooltipom
Táto ukážka ukazuje, ako komponent wje-dropdown použiť spolu s tooltipom na doplnenie krátkeho kontextu.
Dropdown s avatarom
Ukážka používa avatar ako trigger dropdownu, čo je typický vzor pre profilové menu a používateľské akcie.
Kedy použiť
Použite wje-dropdown, keď potrebujete používateľovi okamžite komunikovať stav, výsledok akcie alebo ďalší krok.
Kedy nepoužiť
Nepoužívajte viacero konkurenčných feedback kanálov naraz pre jednu udalosť.
Prístupnosť
Status správy oznamujte cez vhodné ARIA live regióny a pri modálnych prvkoch spravujte fokus (open/close).
Odporúčané postupy
- Vyberte závažnosť správ (info/success/warning/error) podľa reálneho dopadu na používateľa.
- Pri blokujúcich akciách preferujte potvrdenie iba tam, kde hrozí nevratná zmena.
- Nastavte konzistentné timeouty, aby používateľ stihol správu prečítať.
Atribúty a vlastnosti
active
| Popis | Určuje, či je rozbaľovacie menu otvorené. |
| Atribút | active |
| Typ | boolean |
| Predvolené | - |
portaled
| Popis | Určuje, či je voľba portaled zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | portaled |
| Typ | boolean |
| Predvolené | - |
trigger
| Popis | Nastavuje textovú hodnotu uloženú vo voľbe trigger. |
| Atribút | trigger |
| Typ | string｜string |
| Predvolené | click |
Udalosti
| Názov | Popis |
|---|---|
wje-dropdown:open | Vyvolá sa pri otvorení komponentu. |
wje-dropdown:close | Vyvolá sa pri zatvorení 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. |
CSS vlastné premenné
Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.
Sloty
| Názov | Popis |
|---|---|
trigger | Slot pre obsah spúšťača. |
default | Predvolený slot pre hlavný obsah komponentu. |