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

The sample represents split-view in its default split to make clear the behavior of two panels side by side.

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

The demonstration focuses on custom split-view visuals, especially when you need to customize the layout to the design system.

When to use

Use wje-split-view to compose a stable page layout with a clear content hierarchy.

When not to use

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

Accessibility

Preserve the semantics of the document (header, main, aside, footer) and the logical order of focusable elements.

Recommended practices

• Define desktop/mobile breakpoints first and then fine-tune the details.
• Prefer consistent spacing tokens over ad-hoc margin/padding values.
• For layouts with overflow, always test keyboard navigation and readers.

Attributes and properties

initial

Popis	Riadi správanie voľby initial v komponente.
Atribút	initial
Typ	any
Predvolené	50

Events

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods

detectSize

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

pixelsToPercentage

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

CSS shadow parts

Názov	Popis
wje-divider	Štýluje shadow časť wje-divider.

CSS custom variables

Názov	Popis
--wje-split-view-divider-area	Vlastná CSS premenná na štýlovanie komponentu (divider area).
--wje-split-view-divider-width	Vlastná CSS premenná, ktorá riadi divider width.
--wje-split-view-min	Vlastná CSS premenná na štýlovanie komponentu (min).
--wje-split-view-max	Vlastná CSS premenná na štýlovanie komponentu (max).
--wje-split-view-calc-a	Vlastná CSS premenná na štýlovanie komponentu (calc a).
--wje-split-view-calc-b	Vlastná CSS premenná na štýlovanie komponentu (calc b).
--wje-split-view-clamp-a	Vlastná CSS premenná na štýlovanie komponentu (clamp a).
--wje-split-view-clamp-b	Vlastná CSS premenná na štýlovanie komponentu (clamp b).
--wje-split-view-divider-background	Vlastná CSS premenná na štýlovanie komponentu (divider background).
--wje-split-view-divider-size	Vlastná CSS premenná na štýlovanie komponentu (divider size).

Slots

Názov	Popis
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.
divider	Slot pre obsah oddeľovača.