Split API

This page provides an overview of the Split component API, detailing its props, emits, slots, and exposed methods/states.

Props

The Split component accepts the following props:

Prop	Default	Type	Description
`autoSaveName`	`undefined`	`string` or `undefined`	Automatically saves the panel configuration under this name.
`separatorType`	`"strip"`	`"strip"` or `"hexagon"` or `IconsProps["type"]`	The type of separator used between panels.
`separatorNotHoverOpacity`	`undefined`	`boolean` or `undefined`	Controls opacity of the separator when not hovered.
`class`	`""`	`StyleClass` or `undefined`	Custom CSS class for the Split component container.
`styles`	`undefined`	`ISplitStyles` or `undefined`	Custom styles for the panels in the Split component.
`units`	`"percentages"`	`"percentages"` or `"pixels"` or `undefined`	The units for panel sizes (`percentages` or `pixels`).
`panels`	`[]`	`Array<Panel>`	The list of panels in the Split component.
`direction`	`"horizontal"`	`"vertical"` or `"horizontal"` or `undefined`	The direction of panel resizing (`vertical` or `horizontal`).

Slots

The Split component provides dynamic slots for each panel:

Slot	Payload	Description
`default`	`{ size: number, panel: Panel }`	Default slot for rendering content inside the panels. Each panel slot is dynamically named based on the panel's `name` property.

Emits

The Split component emits the following events:

Event	Payload	Description
`updated-panels`	`{ panels: Record<Panel["name"], number> }`	Emitted when the panel sizes are updated.
`updated-size-panel`	`{ panel: Size, namePanel: Panel["name"] }`	Emitted when a single panel's size is updated.
`start-resize-panel`	`{ $event?: MouseEvent, namePanel?: Panel["name"] }`	Emitted when resizing starts for a panel.
`stop-resize-panel`	`{ $event?: MouseEvent, namePanel?: Panel["name"] }`	Emitted when resizing stops for a panel.
`move-resize-panel`	`{ $event: MouseEvent, namePanel: Panel["name"] }`	Emitted when a panel is actively being resized.
`out-resize-panel`	`{ $event: MouseEvent, namePanel: Panel["name"] }`	Emitted when the resize action exits a panel boundary.

Expose

The Split component exposes the following methods and states via ref:

Expose	Value	Description
`resizableGroup`	`HTMLElement` or `undefined`	Reference to the resizable group container element.
`resizablePanels`	`Record<string, HTMLElement>`	References to the individual resizable panel elements.
`sizePanels`	`Record<Panel["name"], number>`	The current sizes of the panels.
`cursorPanels`	`Record<Panel["name"], CursorType>`	The current cursor type for resizing panels.
`activeCursorPanel`	`CursorType`	The cursor type currently active during resizing.
`units`	`SplitProps["units"]`	The units used for panel sizes (`percentages` or `pixels`).
`panels`	`SplitProps["panels"]`	The configuration for all panels in the Split component.
`direction`	`SplitProps["direction"]`	The direction of panel resizing (`vertical` or `horizontal`).
`separatorType`	`SplitProps["separatorType"]`	The type of separator used between panels.
`separatorNotHoverOpacity`	`SplitProps["separatorNotHoverOpacity"]`	Indicates whether the separator has reduced opacity when not hovered.
`styles`	`SplitProps["styles"]`	The styles applied to the Split component.
`classBase`	`StyleClass`	The base CSS class for the Split component.

Types

Panel

Defines the configuration for a single panel within the Split component.

Property	Type	Description
`name`	`string`	The name of the panel.
`size`	`Size` or `undefined`	The initial size of the panel.
`maxSize`	`Size` or `undefined`	The maximum size of the panel.
`minSize`	`Size` or `undefined`	The minimum size of the panel.
`disabled`	`boolean` or `undefined`	Disables resizing for the panel.
`class`	`StyleClass` or `undefined`	Custom CSS class for the panel container.
`[key: string]`	`any`	Any additional properties for the separator item.

ISplitStyles

Defines custom styles for the Split component.

Property	Type	Description
`panel`	`StyleClass`	Custom CSS class for the panel elements.

The Size type represents the size value for panels in the Split component. It is defined as a number and can represent sizes in percentages or pixels, depending on the units prop of the Split component.

Type	Description
`number`	Numeric value representing the size of a panel. The interpretation (percentage or pixels) depends on the `units` prop.