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.

Editing styles

Attributes and Properties

initial

Description	Initial value of the distribution in percentage.
Attribute	initial
Type	number
Default	50

Events

No events available for this component.

Methods

pixelsToPercentage

Description	Converts the pixel value to a percentage.
Signature	pixelsToPercentage(value: number) => number

CSS Shadow Parts

Name	Description
divider	Refers to the slider.

CSS Custom Properties

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

Slots

Name	Description
start	Slot for initial display.
end	Slot for end display.
divider	Slot for slider.