Sliding Container

shadow

wje-sliding-container is used for panels that slide in from the side or switch to a mobile bottom sheet in responsive layouts. The component can stay a classic side panel on desktop and become a bottom sheet below a breakpoint, with a backdrop, custom height, and optional resizing.

Responsive bottom sheet

Enable mobile presentation with mobile-presentation="bottom-sheet" and set the viewport threshold with mobile-break-point. Add backdrop-dismiss when tapping the backdrop should close the sheet. For user-resizable height, add sheet-resizable and set sheet-height, sheet-min-height, and sheet-max-height.

By default, the sheet panel is scoped to the viewport. In bottom sheet mode, the backdrop is moved to document.body, dims the full viewport, and does not lock document scrolling. To constrain the panel to part of the application, use sheet-scope="container" or sheet-scope="parent"; the backdrop remains page-wide. With sheet-scope="container", sheet-boundary can point to the closest composed ancestor selector that should bound the sheet panel.

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

Tune the backdrop and layers with CSS variables such as --wje-sliding-container-backdrop-background, --wje-sliding-container-backdrop-opacity, --wje-sliding-container-z-index, and --wje-sliding-container-portal-backdrop-z-index. The panel uses the sliding-container part; the resize handle uses sheet-handle-area and sheet-handle.

When to use

Use wje-sliding-container when you need a contextual panel, filter, record detail, or side workspace that should behave as a bottom sheet on mobile.

When not to use

Do not use it to solve business logic or for stateful orchestration of components.

Accessibility

Name the panel with label or aria-label, preserve the logical order of focusable elements, and for modal usage verify that the user can close the panel from the keyboard and a visible control.

Recommended practices

• Define desktop/mobile breakpoints first and then fine-tune the details.
• Prefer consistent spacing tokens over ad-hoc margin/padding values.
• In bottom sheet mode, test background scrolling, backdrop dismiss, and height changes on a real mobile viewport.

Attributes and properties

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

Events

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.

Methods

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 shadow parts

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 custom variables

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.

Slots

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