Splitter is utilized to separate and resize panels.
import { SplitterModule } from 'primeng/splitter';
Splitter requires two SplitterPanel components as children which are displayed horizontally by default.
<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. |
Splitter bar defines separator as the role with aria-orientation set to either horizontal or vertical.
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. |
API defines helper props, events and others for the PrimeNG Splitter module.
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. |
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. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Parameters |
---|---|
panel | - |