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.

Ponechanie otvoreného panelu

Boolean atribút stay-open zabráni zatvoreniu pri kliknutí mimo dropdownu aj na pozadie mobilného bottom sheetu. Platí aj pri použití portaled. Predvolene atribút nie je zapnutý, takže existujúce dropdowny sa naďalej zatvárajú kliknutím mimo. JavaScript property stayOpen umožňuje nastavenie meniť aj počas otvorenia bez prekreslenia obsahu; hodnotou false atribút odstránite.

Tlačidlo X dodáva aplikácia a jeho obsluha volá onClose(), ako v ukážke. Zatvorenie cez spúšťač, výber položky menu a onClose() zostáva funkčné. Pri trigger="hover" sa panel naďalej zatvára po odchode kurzora. Atribút sám nepridáva obsluhu klávesu Escape.

<wje-dropdown id="help-dropdown" stay-open portaled>
  <wje-button slot="trigger">Pomoc</wje-button>
  <div>
    <wje-button id="close-help" label="Zavrieť">×</wje-button>
    <p>Pomocný panel zostane otvorený pri práci na stránke.</p>
  </div>
</wje-dropdown>

const dropdown = document.querySelector('#help-dropdown');
const close = dropdown.querySelector('#close-help');
close.addEventListener('wje-button:click', () => dropdown.onClose());

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

stayOpen

Popis	Vypína zatváranie kliknutím mimo; predvolene je vypnutý.
Atribút	stay-open
Typ	boolean
Predvolené	false

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.