Skip to main content

Sliding Container

shadow

The wje-sliding-container page was auto-generated to keep API documentation coverage in sync with the current component set. Detailed usage and best-practice guidance will be expanded in the next content phase.

When to use​

Use wje-sliding-container to compose stable page structure with clear visual and semantic hierarchy.

When not to use​

Do not use layout components to handle business logic or application orchestration.

Accessibility​

Preserve document semantics (header, main, aside, footer) and logical tab/focus order.

Best Practices​

  • Define mobile/desktop breakpoints first, then refine visual details.
  • Prefer spacing tokens over ad-hoc margin/padding overrides.
  • Test keyboard and screen reader behavior for overflow scenarios.

Attributes and Properties​

maxWidth​

DescriptionThe maximum width of the SlidingContainer.
Attributemax-width
Typestring
Default-

maxHeight​

DescriptionThe maximum height of the SlidingContainer.
Attributemax-height
Typestring
Default-

trigger​

DescriptionThe trigger for the SlidingContainer.
Attributetrigger
Typestring
Default-

direction​

DescriptionSpecifies the sliding direction of the container (e.g., 'left' or 'right').
Attributedirection
Typestring
Default-

variant​

DescriptionDetermines how the SlidingContainer behaves, such as 'over' or 'in-place'.
Attributevariant
Typestring
Default-

screenBreakPoint​

DescriptionThe width (in pixels) at which the SlidingContainer switches to the "over" variant for smaller screens.
Attributescreen-break-point
Typestring
Default-

removeChildAfterClose​

DescriptionRemoves the child after the SlidingContainer is closed.
Attributeremove-child-after-close
Typeboolean
Default-

animationDuration​

DescriptionSpecifies the duration (in milliseconds) of the sliding animation.
Attributeanimation-duration
Typestring
Default-

animationEasing​

DescriptionSpecifies the easing function used for the sliding animation (e.g., 'linear', 'ease-in', 'ease-out').
Attributeanimation-easing
Typestring
Default-

hasOpacity​

DescriptionSets the opacity of the SlidingContainer.
Attributehas-opacity
Typeboolean
Default-

Events​

NameDescription
wje-sliding-container:beforeOpenEmitted when the component opens.
wje-sliding-container:openEmitted when the component is opened.
wje-sliding-container:beforeCloseEmitted when the component closes.
wje-sliding-container:afterCloseEmitted when the component closes.

Methods​

htmlCloseButton​

DescriptionCreates and returns a styled close button element with an icon, including an event listener to trigger the close method.
Signature() => HTMLElement

getParentElement​

DescriptionRetrieves the parent element of the current element. If the parent element is not found, it attempts to find the root host element.
Signature() => Element｜null

checkForVariant​

DescriptionAdjusts the position and dimensions of the current element based on the specified variant. The method handles modifications to the element's positioning style, aligns it relative to its parent, and manages alignment to its siblings based on the specified direction.
Signature(variant: string) => void

beforeOpen​

DescriptionExecutes before the element is opened.
Signature(e: any) => void

afterOpen​

DescriptionCallback function called after the element is opened.
Signature(e: any) => void

beforeClose​

DescriptionExecutes before closing the element.
Signature(e: any) => void

afterClose​

DescriptionCallback function that is called after the container is closed.
Signature(e: any) => void

doAnimateTransition​

DescriptionAnimates the transition of elements with specified options, toggling the visibility and/or dimensions of the associated elements based on their current state. This method handles both forward and reverse animations for two elements (transparentDiv and nativeElement) with optional opacity changes. It ensures smooth transitioning by canceling any previous animations on the provided elements before initiating a new animation sequence.
Signature() => Promise<void>

open​

DescriptionOpens the sliding container by performing necessary preparatory and transitional operations.
Signature(e: Event) => Promise<void>

close​

DescriptionCloses the sliding container and performs associated operations such as animations and event dispatches.
Signature(e: Event) => Promise<void>

toggle​

DescriptionToggles the state between open and closed.
Signature(e: Event) => Promise<void>

componentCleanup​

DescriptionCleans up resources associated with the component by disconnecting the resize observer and setting it to null.
Signature() => void

CSS Shadow Parts​

NameDescription
``Styles the element.

CSS Custom Properties​

No CSS custom properties available for this component.

Slots​

NameDescription
defaultThe default slot for the SlidingContainer.

Content