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>
| 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. |
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.