Splitter is utilized to separate and resize panels.
import { Splitter } from 'primeng/splitter';
Splitter requires two SplitterPanel components as children which are displayed horizontally by default.
<p-splitter [style]="{ height: '300px' }" styleClass="mb-8">
<ng-template pTemplate>
<div class="flex items-center justify-center h-full">Panel 1</div>
</ng-template>
<ng-template pTemplate>
<div class="flex items-center justify-center h-full">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-8">
<ng-template pTemplate>
<div class="flex items-center justify-center h-full">Panel 1</div>
</ng-template>
<ng-template pTemplate>
<div class="flex items-center justify-center h-full">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-8" layout="vertical">
<ng-template pTemplate>
<div class="flex items-center justify-center h-full">Panel 1</div>
</ng-template>
<ng-template pTemplate>
<div class="flex items-center justify-center h-full">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-8">
<ng-template pTemplate>
<div class="col flex items-center justify-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 items-center justify-center">
Panel 2
</div>
</ng-template>
<ng-template pTemplate>
<p-splitter [panelSizes]="[20, 80]">
<ng-template pTemplate>
<div class="col flex items-center justify-center">
Panel 3
</div>
</ng-template>
<ng-template pTemplate>
<div class="col flex items-center justify-center">
Panel 4
</div>
</ng-template>
</p-splitter>
</ng-template>
</p-splitter>
</ng-template>
</p-splitter>
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. |