SplitView

shadow

The Split view element is a versatile component that allows you to create a split view with two or more sections. Provides a divider slider that allows you to dynamically resize sections. Two orientations are supported - vertical and horizontal, and nesting another SplitView to create more complex views.

Basic usage

Vertical SplitView

Two orientations are supported. Add the vertical attribute to display a vertical SplitView.

Min/Max

Adding the min and max properties with values "0" to "100" will limit the range of motion of the separator.

Disabled

Adding the disabled attribute disables the ability to scroll the separator.

Nested SplitView

By nesting another SplitView, more complex views can be created.

Styling

When to use

Use wje-split-view 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

No properties available for this component.

Events

No events available for this component.

Methods

detectSize

Description	Detects the size of the split view.
Signature	() => void

pixelsToPercentage

Description	Converts pixels to a percentage.
Signature	(value: number) => number

CSS Shadow Parts

Name	Description
wje-divider	The divider of the split view.

CSS Custom Properties

Name	Description
--wje-split-view-divider-area	Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., px, rem, %).
--wje-split-view-divider-width	Specifies the visual width of the divider. Controls how thick the divider appears.
--wje-split-view-min	Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value.
--wje-split-view-max	Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value.
--wje-split-view-calc-a	Represents the calculated size of the first view. This is used to dynamically set the size of the first view.
--wje-split-view-calc-b	Represents the calculated size of the second view. This is used to dynamically set the size of the second view.
--wje-split-view-clamp-a	Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range.
--wje-split-view-clamp-b	Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range.
--wje-split-view-divider-background	Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable).
--wje-split-view-divider-size	Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit.

Slots

Name	Description
start	Slot for the start view.
end	Slot for the end view.
divider	Slot for the divider.