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].
<p-splitter [panelSizes]="[25, 75]" [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>
Panels are displayed as stacked by setting the layout to vertical.
<p-splitter [style]="{ height: '300px' }" styleClass="mb-5" layout="vertical">
<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>
Splitters can be combined to create advanced layouts.
<p-splitter [style]="{ height: '300px' }" [panelSizes]="[20, 80]" [minSizes]="[10, 0]" styleClass="mb-5">
<ng-template pTemplate>
<div class="col flex align-items-center justify-content-center">Panel 1</div>
</ng-template>
<ng-template pTemplate>
<p-splitter layout="vertical" [panelSizes]="[15, 85]">
<ng-template pTemplate>
<div style="flex-grow: 1;" class="flex align-items-center justify-content-center">Panel 2</div>
</ng-template>
<ng-template pTemplate>
<p-splitter [panelSizes]="[20, 80]">
<ng-template pTemplate>
<div class="col flex align-items-center justify-content-center">Panel 3</div>
</ng-template>
<ng-template pTemplate>
<div class="col flex align-items-center justify-content-center">Panel 4</div>
</ng-template>
</p-splitter>
</ng-template>
</p-splitter>
</ng-template>
</p-splitter>
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.
Splitter is utilized to separate and resize panels.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
| name | parameters | description | |
|---|---|---|---|
| onResizeEnd | event : SplitterResizeEndEvent | Callback to invoke when resize ends. | |
| onResizeStart | event : SplitterResizeStartEvent | Callback to invoke when resize starts. |
Defines the templates used by the component.
Defines the custom events used by the component's emitters.
Custom panel resize start event.
Custom panel resize end event.