Sliding Container

shadow

wje-sliding-container zobrazuje kontextový panel zľava, sprava alebo zo spodnej hrany zvoleného layout scope. Smer určuje atribút direction="left|right|bottom"; spodný panel nie je obmedzený iba na mobilný viewport.

direction	Správanie
left	Horizontálny panel ukotvený na ľavej strane.
right	Horizontálny panel ukotvený na pravej strane. Predvolená hodnota.
bottom	Spodný drawer s vertikálnou animáciou a voliteľným resize handlom. Vždy používa overlay geometriu.

Rozšírený panel

Otvorený bočný panel môže zobraziť druhú časť s ľubovoľným obsahom, napríklad náhľad PDF. Jej obsah poskytuje aplikácia cez pomenovaný slot expanded; komponent ho nevytvára ani nečistí.

• expanded-width určuje šírku rozšírenej časti E, nie celkovú šírku. Podporuje platné CSS rozmery vrátane calc() a %; percentá sa vyhodnocujú voči šírke základného panela B.
• expanded-direction určuje fyzickú stranu, na ktorej sa rozšírená časť vykreslí vedľa základného panela (left alebo right). Ak ho neuvediete, použije sa opačná strana ako direction.
• expanded-trigger je názov udalosti na document, ktorá prepína rozšírenú časť, podobne ako trigger prepína základný panel.

Pri variant="in-place" sa rezervované miesto určuje vzťahom oboch smerov:

variant	Vzťah smerov	Miesto rezervované v layoute	Vrstva nad obsahom
in-place	expanded-direction je rovnaký ako direction	základný panel B	rozšírená časť E
in-place	expanded-direction je opačný ako direction	rozšírená časť E	základný panel B
over	ľubovoľná kombinácia	žiadne	oba panely B + E

Napríklad pri B = 444px, E = 700px, direction="left" a expanded-direction="right" sa obsah po rozšírení posunie o ďalších 256px. Zrkadlová kombinácia direction="right" a expanded-direction="left" funguje rovnako z opačnej strany. Hodnota E môže byť aj menšia ako B; vtedy sa rezervované miesto zmenší. Rozšírená časť má rovnakú výšku ako základný panel a jej wrapper má overflow: hidden, preto si prípadný scroll riadi slotted obsah.

<wje-button dialog="contract-detail">Otvoriť zmluvu</wje-button>

<wje-sliding-container
  id="contract-detail"
  trigger="contract-detail"
  expanded-trigger="contract-preview"
  direction="left"
  variant="in-place"
  max-width="444px"
  expanded-width="700px"
  expanded-direction="right"
>
  <section>
    <h3>Pracovná zmluva</h3>
    <wje-button dialog="contract-preview">Náhľad</wje-button>
  </section>

  <div id="contract-preview-host" slot="expanded">
    <iframe title="Náhľad zmluvy" src="/preview/contract.pdf"></iframe>
  </div>
</wje-sliding-container>

Pred otvorením náhľadu si dostupnosť overte cez canExpand(). Metóda vráti false, ak základný panel nie je otvorený, chýba obsah slotu, šírka nie je platná a kladná, alebo by sa zvolená strana nezmestila do aktuálneho viewportu. Komponent smer automaticky nepreklopí a šírku neoreže. Ak sa už otvorená zostava po zmene viewportu prestane zmestiť, rozšírená časť sa automaticky zbalí. Pri direction="bottom" je rozšírenie vždy vypnuté.

API	Výsledok
canExpand(): boolean	Vráti, či je možné rozšírenú časť práve zobraziť.
expand(): Promise<boolean>	Otvorí ju a vráti true; pri nedostupnom alebo prerušenom otvorení vráti false.
collapse(): Promise<boolean>	Zbalí iba rozšírenú časť a ponechá základný panel otvorený.
toggleExpanded(): Promise<boolean>	Prepne rozšírenú časť.
resetExpanded(): void	Okamžite a bez animácie obnoví základný stav.
isExpanded: boolean	Read-only informácia o otvorení rozšírenej časti.

Pri zbalení zostáva slotted DOM pripojený, ale wrapper je skrytý, inert a aria-hidden. Zatvorenie celého kontajnera rozšírenie resetuje, takže ďalšie otvorenie zobrazí iba základný panel. Pri načítaní iného záznamu má aplikácia zavolať resetExpanded() a sama vyčistiť alebo nahradiť obsah hostiteľa slotu:

const panel = document.querySelector('#contract-detail');
const previewHost = document.querySelector('#contract-preview-host');

function loadContractPreview(previewElement) {
  panel.resetExpanded();
  previewHost.replaceChildren(previewElement);
}

Komponent vysiela udalosti wje-sliding-container:beforeExpand a wje-sliding-container:expand pri otvorení a wje-sliding-container:beforeCollapse a wje-sliding-container:afterCollapse pri zbalení. Rozšírený wrapper je dostupný cez part="expanded"; jeho pozadie upravíte cez --wje-sliding-container-expanded-background.

Backdrop

Boolean atribút backdrop zapne pri otvorenom paneli backdrop cez celý viewport. Rovnaká portaled vrstva na úrovni document.body sa používa pre všetky smery, preto má rovnaké vrstvenie a animáciu. Backdrop nezamyká scroll dokumentu.

Samotný backdrop blokuje interakciu s prekrytým obsahom. Ak má klik na backdrop zároveň zatvoriť panel, pridajte backdrop-dismiss. Pri nových použitiach backdrop-dismiss bez atribútu backdrop žiadnu vrstvu nevytvorí.

Kvôli spätnej kompatibilite zostáva jedna výnimka: aktívny legacy režim mobile-presentation="bottom-sheet" s backdrop-dismiss vytvorí backdrop aj bez explicitného backdrop, rovnako ako v predchádzajúcich verziách. Pri úprave existujúceho kódu odporúčame atribút backdrop doplniť, aby bol zámer jednoznačný a konfigurácia fungovala rovnako aj s priamym direction="bottom".

<wje-sliding-container
  backdrop
  backdrop-dismiss
  style="
    --wje-sliding-container-backdrop-background: rgba(15, 23, 42, .55);
    --wje-sliding-container-backdrop-opacity: .9;
    --wje-sliding-container-backdrop-filter: blur(2px);
  "
>
  <div>Detail</div>
</wje-sliding-container>

CSS token	Význam
--wje-sliding-container-backdrop-background	Farba alebo ľubovoľné CSS pozadie backdropu.
--wje-sliding-container-backdrop-opacity	Výsledná opacity otvoreného backdropu; predvolene 1.
--wje-sliding-container-backdrop-filter	Filter obsahu pod backdropom, napríklad blur(2px); predvolene none.
--wje-sliding-container-backdrop-z-index	Globálny z-index portaled backdropu; bez hodnoty je o jednu vrstvu pod hostiteľom.

Otvorenie a zatvorenie backdropu používa rovnaké animation-duration a animation-easing ako panel. Starší token --wje-sliding-container-portal-backdrop-z-index zostáva podporovaný ako fallback.

Spodný drawer

Spodnú prezentáciu zapnete priamo cez direction="bottom". Funguje na desktope aj mobile a nepodporuje rozšírený slot. Pre používateľom nastaviteľnú výšku pridajte sheet-resizable a nastavte sheet-height, sheet-min-height a sheet-max-height.

Pri priamom direction="bottom" je panel predvolene viazaný na rodičovský kontajner, rovnako ako bočné smery. Cez scope="viewport" ho môžete explicitne roztiahnuť na celý viewport; scope="container" alebo scope="parent" ho ponechá v okolí komponentu. Prípadný backdrop zostáva vždy celostránkový.

Staršie atribúty sheet-scope a sheet-boundary zostávajú podporované. Pri scope="container" alebo sheet-scope="container" môžete cez sheet-boundary uviesť CSS selektor najbližšieho composed ancestor elementu, ktorý má tvoriť hranice panela.

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

<wje-sliding-container
  trigger="reservation-panel"
  direction="bottom"
  scope="container"
  max-height="85vh"
  sheet-resizable
  sheet-height="55vh"
  sheet-min-height="35vh"
  sheet-max-height="92vh"
  backdrop
  backdrop-dismiss
  has-opacity
>
  <div class="panel-content">
    <h3>Reservation details</h3>
    <p>Panel sa otvorí zo spodnej hrany svojho kontajnera.</p>
  </div>
</wje-sliding-container>

Panel používa part sliding-container; resize handle používa party sheet-handle-area a sheet-handle.

Kompatibilita so starším responzívnym API

Existujúce použitia mobile-presentation="bottom-sheet" a mobile-break-point zostávajú podporované. Pod breakpointom sa interne vyhodnotia ako efektívny smer bottom; nad breakpointom sa zachová nakonfigurovaný smer left alebo right. Legacy režim si bez explicitného scope alebo sheet-scope zachováva pôvodný viewport scope a kombinácia s backdrop-dismiss si zachováva aj pôvodný implicitný backdrop.

Verejná metóda isBottomSheet() zostáva dostupná pre existujúce aplikačné lifecycle hooky. Vráti true pri aktívnej legacy mobilnej prezentácii aj pri priamom direction="bottom". Pre nový kód preferujte priamo direction="bottom" vždy, keď má byť drawer spodný bez ohľadu na viewport.

Kedy použiť

Použite wje-sliding-container, keď potrebujete kontextový panel, filter, detail záznamu alebo pracovný priestor vysúvaný z okraja viewportu.

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 vyberte smer a variant, až potom dolaďujte rozmery a animáciu.
• Preferujte konzistentné spacing tokeny pred ad-hoc margin/padding hodnotami.
• Pri smere bottom otestujte scroll pozadia, backdrop dismiss a zmenu výšky na desktope aj 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

backdrop

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

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	Riadi správanie voľby direction v komponente.
Atribút	direction
Typ	'left'｜'right'｜'bottom'
Predvolené	-

expandedDirection

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

expandedTrigger

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

expandedWidth

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

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

scope

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

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:beforeExpand	Vyvolá sa pri odoslaní udalosti wje-sliding-container:beforeExpand.
wje-sliding-container:expand	Vyvolá sa pri odoslaní udalosti wje-sliding-container:expand.
wje-sliding-container:beforeCollapse	Vyvolá sa pri odoslaní udalosti wje-sliding-container:beforeCollapse.
wje-sliding-container:afterCollapse	Vyvolá sa pri odoslaní udalosti wje-sliding-container:afterCollapse.
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

startResizeObservation

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

stopResizeObservation

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

bindTrigger

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

unbindTrigger

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

bindExpandedTrigger

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

unbindExpandedTrigger

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

usesBottomPresentation

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

usesLegacyBottomSheetPresentation

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

isBottomSheet

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

setBaseInteractionState

Popis	Nastaví base interaction state a aplikuje súvisiace zmeny stavu.
Signatúra	(isInteractive: boolean) => 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}

getBottomScopeElement

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

getBottomScopeFrame

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

setBottomLayerFrame

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

resetBottomLayerFrame

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

getInlineStyleValue

Popis	Vráti inline style hodnotu z aktuálneho stavu komponentu.
Signatúra	(style: CSSStyleDeclaration, property: string) => string

restoreInlineStyleValue

Popis	Spustí metódu restoreInlineStyleValue na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(style: CSSStyleDeclaration, property: string, value: string) => void

setSideOverVariant

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

resetSideOverVariant

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

hasExpandedContent

Popis	Overí, či komponent obsahuje expanded content.
Signatúra	() => boolean

getBaseWidthInPixels

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

resolveExpandedWidth

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

positionExpandedPanel

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

swapsExpandedFlowPanel

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

getExpandedAnchorLeft

Popis	Vráti expanded anchor left z aktuálneho stavu komponentu.
Signatúra	(baseWidth: number, expandedWidth: number) => number

resetPanelsAnchor

Popis	Obnoví panels anchor na počiatočné hodnoty.
Signatúra	() => void

showExpandedContent

Popis	Zobrazí expanded content v používateľskom rozhraní komponentu.
Signatúra	() => void

hideExpandedContent

Popis	Skryje expanded content v používateľskom rozhraní komponentu.
Signatúra	() => void

applyExpandedState

Popis	Spustí metódu applyExpandedState na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(isExpanded: boolean, baseWidth?: number, expandedWidth?: number) => void

canExpand

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

syncExpandedAfterDraw

Popis	Synchronizuje expanded after draw s externým alebo interným zdrojom stavu.
Signatúra	() => void

applyBottomPresentation

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

resetBottomPresentation

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

setBottomVisualState

Popis	Nastaví bottom 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

getBottomAvailableHeight

Popis	Vráti bottom available height z aktuálneho stavu komponentu.
Signatúra	() => 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

beforeExpand

Popis	Spustí sa pred expand a pripraví stav komponentu.
Signatúra	(e?: Event) => void

afterExpand

Popis	Spustí sa po expand a dokončí nadväzujúce operácie.
Signatúra	(e?: Event) => void

beforeCollapse

Popis	Spustí sa pred collapse a pripraví stav komponentu.
Signatúra	(e?: Event) => void

afterCollapse

Popis	Spustí sa po collapse a dokončí nadväzujúce operácie.
Signatúra	(e?: Event) => void

cancelExpandedTransition

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

completeExpandedTransition

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

finishExpandedTransitionImmediately

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

animateExpandedTransition

Popis	Spustí metódu animateExpandedTransition na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(target: boolean, baseWidth: number, expandedWidth: number) => Promise<boolean>

expand

Popis	Rozbalí aktuálnu accordion položku a aktualizuje jej ARIA expanded stav.
Signatúra	(e?: Event) => Promise<boolean>

collapse

Popis	Zbalí aktuálnu accordion položku a aktualizuje jej ARIA expanded stav.
Signatúra	(e?: Event) => Promise<boolean>

toggleExpanded

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

resetExpanded

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

getAnimationOptions

Popis	Vráti animation položky z aktuálneho stavu komponentu.
Signatúra	() => object

finishBaseTransitionImmediately

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

setSideVisualState

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

doAnimateBottomTransition

Popis	Spustí metódu doAnimateBottomTransition 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>

setBottomClosedState

Popis	Nastaví bottom 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.
expanded	Štýluje shadow časť expanded.
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-expanded-background	Vlastná CSS premenná na štýlovanie komponentu (expanded 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-panel-z-index	Vlastná CSS premenná na štýlovanie komponentu (bottom sheet panel z index).
--wje-sliding-container-backdrop-z-index	Vlastná CSS premenná na štýlovanie komponentu (backdrop 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-backdrop-filter	Vlastná CSS premenná na štýlovanie komponentu (backdrop filter).
--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.
expanded	Slot pre vlastný obsah expanded v komponente.