Popup

shadow

wje-popup je nízkoúrovňový overlay, ktorý používa napríklad wje-dropdown a wje-select. Okrem klasického plávajúceho panelu pri anchor elemente podporuje aj responzívnu mobilnú prezentáciu ako bottom sheet.

Mobilný bottom sheet

Nastavte mobile-presentation="bottom-sheet" a mobile-break-point, ak sa má popup pod zadanou šírkou zobraziť ako sheet zospodu. V tomto režime popup presunie obsah do portálu, zobrazí backdrop a vypne Floating UI pozicionovanie, aby panel držal spodnú hranu viewportu.

<wje-popup mobile-presentation="bottom-sheet" mobile-break-point="768">
  <wje-button slot="anchor">Open</wje-button>
  <wje-menu variant="context">
    <wje-menu-item>Confirm</wje-menu-item>
    <wje-menu-item>Cancel</wje-menu-item>
  </wje-menu>
</wje-popup>

Backdrop je dostupný cez ::part(backdrop) a panel cez ::part(native). Pre mobile sheet sú dostupné CSS premenné --wje-popup-backdrop-background, --wje-popup-backdrop-opacity, --wje-popup-mobile-background, --wje-popup-mobile-border-radius, --wje-popup-mobile-box-shadow, --wje-popup-mobile-max-height, --wje-popup-mobile-transition-duration a --wje-popup-mobile-transition-easing.

Ak je popup označený size, predvolene sa drží šírky anchor elementu. Komponenty, ktoré potrebujú širší obsah počas načítavania, môžu interne zapnúť contentAwareSize, aby popup rástol podľa obsahu.

Kedy použiť

Použite wje-popup, keď staviate vlastný overlay naviazaný na trigger alebo potrebujete zdieľaný základ pre menu, select či kontextový panel.

Kedy nepoužiť

Nepoužívajte viacero konkurenčných feedback kanálov naraz pre jednu udalosť.

Prístupnosť

Trigger musí mať zrozumiteľný názov a pri menu obsahu nastavte vhodné roly na vnorených položkách. Pri mobile sheet režime overte, že backdrop dismiss nie je jediný spôsob zatvorenia.

Odporúčané postupy

• Pri bežných dropdown scenároch používajte vyššie komponenty ako wje-dropdown alebo wje-select.
• Pri portal režime overte, že udalosti a router linky ostávajú naviazané aj po presune obsahu.
• Pri mobile sheet režime dolaďte backdrop a max-height cez CSS premenné podľa konkrétneho layoutu.

Atribúty a vlastnosti

loader

Popis	Určuje, či je voľba loader zapnutá a ovplyvňuje správanie komponentu.
Atribút	loader
Typ	boolean
Predvolené	false

manual

Popis	Určuje, či je voľba manual zapnutá a ovplyvňuje správanie komponentu.
Atribút	manual
Typ	boolean
Predvolené	false

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

portal

Popis	Určuje, či je voľba portal zapnutá a ovplyvňuje správanie komponentu.
Atribút	portal
Typ	boolean
Predvolené	false

Udalosti

Názov	Popis
wje-portal:restored	Vyvolá sa pri odoslaní udalosti wje-portal:restored.
wje-popup:reposition	Vyvolá sa pri odoslaní udalosti wje-popup:reposition.
wje-popup:show	Vyvolá sa pri odoslaní udalosti wje-popup:show.
wje-popup:hide	Vyvolá sa pri odoslaní udalosti wje-popup:hide.
wje-popup:beforeshow	Vyvolá sa pri odoslaní udalosti wje-popup:beforeshow.
wje-popup:aftershow	Vyvolá sa pri odoslaní udalosti wje-popup:aftershow.
wje-router:rebind	Vyvolá sa pri odoslaní udalosti wje-router:rebind.
wje-popup:opened	Vyvolá sa pri otvorení komponentu.

Metódy

setAnchor

Popis	Nastaví anchor a aplikuje súvisiace zmeny stavu.
Signatúra	() => void

clearBottomSheetRestoreTimeout

Popis	Vyčistí bottom sheet restore timeout a obnoví súvisiace hodnoty.
Signatúra	() => void

isBottomSheetActive

Popis	Overí, či je bottom sheet active aktuálne pravda.
Signatúra	() => void

setBottomSheetState

Popis	Nastaví bottom sheet state a aplikuje súvisiace zmeny stavu.
Signatúra	(isActive: any) => void

clearBottomSheetState

Popis	Vyčistí bottom sheet state a obnoví súvisiace hodnoty.
Signatúra	() => void

rebindPortaledRouter

Popis	Spustí metódu rebindPortaledRouter na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

syncResponsivePresentation

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

getBottomSheetTransitionDurationMs

Popis	Vráti bottom sheet transition duration ms z aktuálneho stavu komponentu.
Signatúra	() => void

show

Popis	Zobrazí show v používateľskom rozhraní komponentu.
Signatúra	(dispatchEvent?: boolean) => void

hide

Popis	Skryje hide v používateľskom rozhraní komponentu.
Signatúra	(dispatchEvent: any) => void

CSS tieňové časti

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

CSS vlastné premenné

Názov	Popis
--wje-popup-backdrop-background	Vlastná CSS premenná na štýlovanie komponentu (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 (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 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.
--wje-popup-loader-inset	Vlastná CSS premenná na štýlovanie komponentu (loader inset).

Sloty

Názov	Popis
anchor	Slot pre kotviaci alebo referenčný prvok.
arrow	Slot pre vlastný prvok šípky.
default	Predvolený slot pre hlavný obsah komponentu.