Dropdown

shadow

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.

Mobilný bottom sheet

Ukážka prepína dropdown do mobilnej prezentácie cez atribúty mobile-presentation="bottom-sheet" a mobile-break-point. Backdrop aj samotný sheet sú štýlované cez CSS vlastné premenné na úrovni použitia komponentu. Na mobile sa obsah portáluje mimo pôvodného layoutu, takže sa neoreže v kontajneroch s overflow: hidden. Backdrop je dostupný cez exportovaný part backdrop a panel cez popup-native.

Vnorený dropdown v dialógu

Ukážka používa dropdown ako miesto, odkiaľ používateľ otvorí dialóg s ďalším dropdownom. Kliknutie na položku vo vnorenom dropdowne zatvorí iba vnútorný dropdown a ponechá nadradený dropdown otvorený.

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

mobileBreakPoint

Popis	Nastavuje textovú hodnotu uloženú vo voľbe mobile-break-point.
Atribút	mobile-break-point
Typ	string
Predvolené	768

mobilePresentation

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

syncPopupOwner

Popis	Synchronizuje popup owner s externým alebo interným zdrojom stavu.
Signatúra	() => void

syncOwnedContentOwner

Popis	Synchronizuje owned content owner s externým alebo interným zdrojom stavu.
Signatúra	(root?: HTMLElement) => void

getMenuItemOwner

Popis	Vráti menu položku owner z aktuálneho stavu komponentu.
Signatúra	(path: EventTarget[], item: HTMLElement) => HTMLElement｜null

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
popup-native	Štýluje shadow časť popup-native.
backdrop	Štýluje shadow časť backdrop.

CSS vlastné premenné

Názov	Popis
--wje-popup-backdrop-background	Vlastná CSS premenná na štýlovanie komponentu (popup backdrop background).
--wje-popup-backdrop-opacity	Vlastná CSS premenná, ktorá riadi úroveň priehľadnosti.
--wje-popup-mobile-background	Vlastná CSS premenná na štýlovanie komponentu (popup mobile background).
--wje-popup-mobile-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-popup-mobile-box-shadow	Vlastná CSS premenná, ktorá riadi tieň.
--wje-popup-mobile-max-height	Vlastná CSS premenná, ktorá riadi popup mobile max height.
--wje-popup-mobile-transition-duration	Vlastná CSS premenná, ktorá riadi časovanie animácie a prechodov.
--wje-popup-mobile-transition-easing	Vlastná CSS premenná, ktorá riadi časovanie animácie a prechodov.

Sloty

Názov	Popis
trigger	Slot pre obsah spúšťača.
default	Predvolený slot pre hlavný obsah komponentu.