Splitter

Splitter is utilized to separate and resize panels.

Import #


import { SplitterModule } from 'primeng/splitter';

Horizontal #

Splitter requires two SplitterPanel components as children which are displayed horizontally by default.

Panel 1

Panel 2



<p-splitter [style]="{ height: '300px' }" styleClass="mb-5">
    <ng-template pTemplate>
        <div class="col flex align-items-center justify-content-center">Panel 1</div>
    </ng-template>
    <ng-template pTemplate>
        <div class="col flex align-items-center justify-content-center">Panel 2</div>
    </ng-template>
</p-splitter>

When no panelSizes are defined, panels are split 50/50, use the panelSizes property to give relative widths e.g. [25, 75].

Panels are displayed as stacked by setting the layout to vertical.

Splitters can be combined to create advanced layouts.

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-splitter	Container element.
p-splitter	Container element during resize.
p-splitter-horizontal	Container element with horizontal layout.
p-splitter-vertical	Container element with vertical layout.
p-splitter-panel	Splitter panel element.
p-splitter-gutter	Gutter element to use when resizing the panels.
p-splitter-gutter-handle	Handl element of the gutter.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Screen Reader

Splitter bar defines separator as the role with aria-orientation set to either horizontal or vertical.

Keyboard Support

Key	Function
tab	Moves focus through the splitter bar.
down arrow	Moves a vertical splitter down.
up arrow	Moves a vertical splitter up.
left arrow	Moves a vertical splitter to the left.
right arrow	Moves a vertical splitter to the right.

Splitter API

API defines helper props, events and others for the PrimeNG Splitter module.

Properties #

Name	Type	Default	Description
panelSizes	number	null	Size of the elements relative to 100%.
minSizes	number	null	Minimum size of the elements relative to 100%.
layout	string	horizontal	Orientation of the panels, valid values are "horizontal" and "vertical".
gutterSize	number	4	Size of the divider in pixels.
stateKey	string	null	Storage identifier of a stateful Splitter.
stateStorage	string	session	Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
style	object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
panelStyleClass	string	null	Style class of the panel.
panelStyle	object	null	Inline style of the pnanel.

Events #

Name	Parameters	Description
onResizeStart	event.originalEvent: Original event event.sizes: Sizes of the panels as an array	Callback to invoke when resize starts.
onResizeEnd	event.originalEvent: Original event event.sizes: Sizes of the panels as an array	Callback to invoke when resize ends.

Templates #

Following is the list of structural style classes, for theming classes visit theming page.

Name	Parameters
panel	-