Sliding Container

shadow

wje-sliding-container slúži na panely, ktoré sa vysúvajú zo strany alebo sa v responzívnom režime zmenia na mobilný bottom sheet. Komponent vie zostať ako klasický side panel na desktope a pod breakpointom prejsť do spodného sheetu s backdropom, vlastnou výškou a voliteľným resizovaním.

Responzívny bottom sheet

Mobilnú prezentáciu zapnete cez mobile-presentation="bottom-sheet" a hranicu šírky nastavíte cez mobile-break-point. Ak má sheet zatvárať klik na backdrop, pridajte backdrop-dismiss. Pre používateľom nastaviteľnú výšku pridajte sheet-resizable a nastavte sheet-height, sheet-min-height a sheet-max-height.

Predvolene je panel sheetu viazaný na viewport. Backdrop sa pri bottom sheet režime presunie na úroveň document.body, stmaví celý viewport a nezamyká scroll dokumentu. Ak potrebujete panel obmedziť na časť aplikácie, použite sheet-scope="container" alebo sheet-scope="parent"; backdrop zostáva celostránkový. Pri sheet-scope="container" môžete cez sheet-boundary uviesť CSS selektor najbližšieho composed ancestor elementu, ktorý má tvoriť hranice panelu sheetu.

<wje-button dialog="reservation-panel">Open panel</wje-button>

<wje-sliding-container
  trigger="reservation-panel"
  variant="over"
  direction="left"
  max-width="320px"
  max-height="85vh"
  screen-break-point="2000"
  mobile-presentation="bottom-sheet"
  mobile-break-point="768"
  sheet-resizable
  sheet-height="55vh"
  sheet-min-height="35vh"
  sheet-max-height="92vh"
  backdrop-dismiss
  has-opacity
>
  <div class="panel-content">
    <h3>Reservation details</h3>
    <p>Desktop opens a side panel, mobile opens a bottom sheet.</p>
  </div>
</wje-sliding-container>

Backdrop a vrstvy môžete ladiť cez CSS premenné ako --wje-sliding-container-backdrop-background, --wje-sliding-container-backdrop-opacity, --wje-sliding-container-z-index a --wje-sliding-container-portal-backdrop-z-index. Panel používa part sliding-container; resize handle používa party sheet-handle-area a sheet-handle.

Kedy použiť

Použite wje-sliding-container, keď potrebujete kontextový panel, filter, detail záznamu alebo bočný pracovný priestor, ktorý sa má na mobile správať ako spodný sheet.

Kedy nepoužiť

Nepoužívajte ho na riešenie biznis logiky ani na stavovú orchestráciu komponentov.

Prístupnosť

Pomenujte panel cez label alebo aria-label, zachovajte logické poradie fokusovateľných prvkov a pri modálnom použití overte, že používateľ vie panel zatvoriť klávesnicou aj viditeľným ovládacím prvkom.

Odporúčané postupy

• Najprv definujte desktop/mobile breakpoints a až potom dolaďujte detaily.
• Preferujte konzistentné spacing tokeny pred ad-hoc margin/padding hodnotami.
• Pri bottom sheet režime otestujte scroll pozadia, backdrop dismiss a zmenu výšky na reálnom mobile.

Atribúty a vlastnosti

addToHeight

Popis	Nastavuje rozmery alebo veľkosť pre voľbu add-to-height.
Atribút	add-to-height
Typ	string
Predvolené	0

animationDuration

Popis	Nastavuje textovú hodnotu uloženú vo voľbe animation-duration.
Atribút	animation-duration
Typ	string
Predvolené	500

animationEasing

Popis	Nastavuje textovú hodnotu uloženú vo voľbe animation-easing.
Atribút	animation-easing
Typ	string
Predvolené	linear

backdropDismiss

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

direction

Popis	Nastavuje textovú hodnotu uloženú vo voľbe direction.
Atribút	direction
Typ	string
Predvolené	right

hasOpacity

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

maxHeight

Popis	Nastavuje rozmery alebo veľkosť pre voľbu max-height.
Atribút	max-height
Typ	string
Predvolené	auto

maxWidth

Popis	Nastavuje rozmery alebo veľkosť pre voľbu max-width.
Atribút	max-width
Typ	string
Predvolené	auto

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

removeChildAfterClose

Popis	Určuje, či je voľba remove-child-after-close zapnutá a ovplyvňuje správanie komponentu.
Atribút	remove-child-after-close
Typ	boolean｜string
Predvolené	false

screenBreakPoint

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

sheetBoundary

Popis	Nastavuje textovú hodnotu uloženú vo voľbe sheet-boundary.
Atribút	sheet-boundary
Typ	string
Predvolené	-

sheetHeight

Popis	Nastavuje rozmery alebo veľkosť pre voľbu sheet-height.
Atribút	sheet-height
Typ	string
Predvolené	-

sheetMaxHeight

Popis	Nastavuje rozmery alebo veľkosť pre voľbu sheet-max-height.
Atribút	sheet-max-height
Typ	string
Predvolené	-

sheetMinHeight

Popis	Nastavuje rozmery alebo veľkosť pre voľbu sheet-min-height.
Atribút	sheet-min-height
Typ	string
Predvolené	-

sheetResizable

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

sheetScope

Popis	Nastavuje textovú hodnotu uloženú vo voľbe sheet-scope.
Atribút	sheet-scope
Typ	string
Predvolené	viewport

trigger

Popis	Nastavuje textovú hodnotu uloženú vo voľbe trigger.
Atribút	trigger
Typ	string
Predvolené	sliding-container

variant

Popis	Nastavuje ARIA metadáta, ktoré zlepšujú prístupnosť pre asistenčné technológie.
Atribút	variant
Typ	string
Predvolené	in-place

Udalosti

Názov	Popis
wje-sliding-container:beforeOpen	Vyvolá sa pri otvorení komponentu.
wje-sliding-container:open	Vyvolá sa pri otvorení komponentu.
wje-sliding-container:beforeClose	Vyvolá sa pri zatvorení komponentu.
wje-sliding-container:afterClose	Vyvolá sa pri zatvorení komponentu.

Metódy

isBottomSheet

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

addBackdropListeners

Popis	Pridá backdrop poslucháče do spravovanej kolekcie komponentu.
Signatúra	(backdrop: HTMLElement) => void

removeBackdropListeners

Popis	Odstráni backdrop poslucháče z aktuálneho stavu komponentu.
Signatúra	(backdrop: HTMLElement) => void

isBackdropElement

Popis	Overí, či je backdrop element aktuálne pravda.
Signatúra	(element: EventTarget｜null) => boolean

getBackdropElement

Popis	Vráti backdrop element z aktuálneho stavu komponentu.
Signatúra	({ createPortal = false }: any, options: object) => HTMLElement｜null

ensurePortalBackdrop

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

removePortalBackdrop

Popis	Odstráni portal backdrop z aktuálneho stavu komponentu.
Signatúra	() => void

getPortalBackdropZIndex

Popis	Vráti portal backdrop zindex z aktuálneho stavu komponentu.
Signatúra	() => string

getBackdropOpenOpacity

Popis	Vráti backdrop open opacity z aktuálneho stavu komponentu.
Signatúra	() => string

syncPortalBackdropStyles

Popis	Synchronizuje portal backdrop styles s externým alebo interným zdrojom stavu.
Signatúra	() => void

htmlSheetHandle

Popis	Vytvorí HTML štruktúru pre html sheet handle.
Signatúra	() => HTMLElement

getClosestComposedElement

Popis	Vráti closest composed element z aktuálneho stavu komponentu.
Signatúra	(selector: string) => Element｜null

getViewportFrame

Popis	Vráti viewport frame z aktuálneho stavu komponentu.
Signatúra	() => {top: number, left: number, right: number, bottom: number, width: number, height: number}

getBottomSheetScopeElement

Popis	Vráti bottom sheet scope element z aktuálneho stavu komponentu.
Signatúra	() => Element｜null

getBottomSheetScopeFrame

Popis	Vráti bottom sheet scope frame z aktuálneho stavu komponentu.
Signatúra	() => {top: number, left: number, right: number, bottom: number, width: number, height: number}

setBottomSheetLayerFrame

Popis	Nastaví bottom sheet layer frame a aplikuje súvisiace zmeny stavu.
Signatúra	(element: HTMLElement｜SlidingContainer, frame: object) => void

resetBottomSheetLayerFrame

Popis	Obnoví bottom sheet layer frame na počiatočné hodnoty.
Signatúra	(element: HTMLElement｜SlidingContainer) => void

setBottomSheetVariant

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

resetBottomSheetVariant

Popis	Obnoví bottom sheet variant na počiatočné hodnoty.
Signatúra	() => void

setBottomSheetVisualState

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

getSheetMaxHeight

Popis	Vráti sheet max height z aktuálneho stavu komponentu.
Signatúra	() => string

setSheetHeight

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

getSheetMinHeightInPixels

Popis	Vráti sheet min height in pixels z aktuálneho stavu komponentu.
Signatúra	() => number

getSheetMaxHeightInPixels

Popis	Vráti sheet max height in pixels z aktuálneho stavu komponentu.
Signatúra	() => number

getBottomSheetAvailableHeight

Popis	Vráti bottom sheet available height z aktuálneho stavu komponentu.
Signatúra	() => number

resolveCssHeight

Popis	Spustí metódu resolveCssHeight na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(value: string, fallback: number) => number

clamp

Popis	Spustí metódu clamp na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(value: number, min: number, max: number) => number

isSheetHandleEvent

Popis	Overí, či je sheet handle udalosť aktuálne pravda.
Signatúra	(e: Event) => boolean

isEventInsideSheet

Popis	Overí, či je udalosť inside sheet aktuálne pravda.
Signatúra	(e: Event) => boolean

startSheetDrag

Popis	Spustí metódu startSheetDrag na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(pointerId: number｜string, startY: number) => void

updateSheetDrag

Popis	Aktualizuje sheet ťahanie podľa najnovších údajov komponentu.
Signatúra	(clientY: number) => void

endSheetDrag

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

doAnimateBottomSheetTransition

Popis	Spustí metódu doAnimateBottomSheetTransition na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(options: object) => Promise<void>

open

Popis	Otvorí komponent a nastaví viditeľný stav.
Signatúra	(e: Event) => Promise<void>

close

Popis	Zatvorí komponent a odstráni stav viditeľnosti.
Signatúra	(e: Event) => Promise<void>

setBottomSheetClosedState

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

toggle

Popis	Prepne toggle medzi zapnutým a vypnutým stavom.
Signatúra	(e: Event) => Promise<void>

CSS tieňové časti

Názov	Popis
backdrop	Štýluje shadow časť backdrop.
sliding-container	Štýluje shadow časť sliding-container.
close-button	Štýluje shadow časť close-button.
sheet-handle-area	Štýluje shadow časť sheet-handle-area.
sheet-handle	Štýluje shadow časť sheet-handle.

CSS vlastné premenné

Názov	Popis
--wje-sliding-container-background	Vlastná CSS premenná na štýlovanie komponentu (background).
--wje-sliding-container-z-index	Vlastná CSS premenná na štýlovanie komponentu (z index).
--wje-sliding-container-bottom-sheet-z-index	Vlastná CSS premenná na štýlovanie komponentu (bottom sheet z index).
--wje-sliding-container-bottom-sheet-backdrop-z-index	Vlastná CSS premenná na štýlovanie komponentu (bottom sheet backdrop z index).
--wje-sliding-container-bottom-sheet-panel-z-index	Vlastná CSS premenná na štýlovanie komponentu (bottom sheet panel z index).
--wje-sliding-container-portal-backdrop-z-index	Vlastná CSS premenná na štýlovanie komponentu (portal backdrop z index).
--wje-sliding-container-backdrop-background	Vlastná CSS premenná na štýlovanie komponentu (backdrop background).
--wje-sliding-container-backdrop-opacity	Vlastná CSS premenná, ktorá riadi úroveň priehľadnosti.
--wje-sliding-container-box-shadow	Vlastná CSS premenná, ktorá riadi tieň.
--wje-sliding-container-sheet-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-sliding-container-sheet-handle-area-height	Vlastná CSS premenná, ktorá riadi sheet handle area height.
--wje-sliding-container-sheet-handle-width	Vlastná CSS premenná, ktorá riadi sheet handle width.
--wje-sliding-container-sheet-handle-height	Vlastná CSS premenná, ktorá riadi sheet handle height.
--wje-sliding-container-sheet-handle-background	Vlastná CSS premenná na štýlovanie komponentu (sheet handle background).
--wje-sliding-container-sheet-handle-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.