Splitter

A split component that resizes the left/right panel widths, adjustable via mouse drag or arrow keys.

Basic usage

Default 50/50

Left panel

Example

Custom initial ratio

30% / 70%

Left panel 30%

Example

Range limits

min / max limits

Left panel 20% ~ 80%

Example

Resize event

oas-resize event

Left ratio: 50%

Left panel

Drag the divider, or focus it and use the ← / → arrow keys to adjust

Example

API

Attributes

Attribute	Description	Type	Default
max	Left panel maximum ratio (%)	string	90
min	Left panel minimum ratio (%)	string	10
percent	Left panel ratio (%)	string	50

Events

Event	Description
oas-resize	Fired after resizing, detail: { percent }

Slots

Name	Description
left	—
right	—

The divider is role="separator" + tabindex="0"; once focused, ← / → adjust by 1% each time.