Angular Splitter

Angular Splitter is utilized to separate and resize panels.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {SplitterModule} from 'primeng/splitter';

Getting Started

Splitter requires two ng-template structural directives to wrap.

<p-splitter [style]="{'height': '300px'}">
    <ng-template>
        Panel 1
    </ng-template>
    <ng-template>
        Panel 2
    </ng-template>
</p-splitter>

Layout

Default orientation is configured with the layout property and default is the "horizontal" whereas other alternative is the "vertical".

<p-splitter [style]="{'height': '300px'}" layout="vertical">
    <ng-template>
        Panel 1
    </ng-template>
    <ng-template>
        Panel 2
    </ng-template>
</p-splitter>

Initial Sizes

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

<p-splitter [style]="{'height': '300px'}" [panelSizes]="[20,80]" layout="vertical">
    <ng-template>
        Panel 1
    </ng-template>
    <ng-template>
        Panel 2
    </ng-template>
</p-splitter>

Minimum Sizes

Minimum sizes defines the lowest boundary for the size of a panels.

<p-splitter [style]="{'height': '300px'}" [minSizes]="[10,20]" layout="vertical">
    <ng-template>
        Panel 1
    </ng-template>
    <ng-template>
        Panel 2
    </ng-template>
</p-splitter>

Nested Panels

Splitters can be combined to create advanced layouts.

<p-splitter [style]="{'height': '300px'}" [panelSizes]="[20,80]" [minSizes]="[10,0]" styleClass="p-mb-5">
    <ng-template>
        <div class="p-col p-d-flex p-ai-center p-jc-center">
            Panel 1
        </div>
    </ng-template>
    <ng-template>
        <p-splitter layout="vertical" [panelSizes]="[15,85]">
            <ng-template>
                <div class="p-col p-d-flex p-ai-center p-jc-center">
                    Panel 2
                </div>
            </ng-template>
            <ng-template>
                <p-splitter [panelSizes]="[20,80]">
                    <ng-template>
                        <div class="p-col p-d-flex p-ai-center p-jc-center">
                            Panel 3
                        </div>
                    </ng-template>
                    <ng-template>
                        <div class="p-col p-d-flex p-ai-center p-jc-center">
                            Panel 4
                        </div>
                    </ng-template>
                </p-splitter>
            </ng-template>
        </p-splitter>
    </ng-template>
</p-splitter>

Stateful

Splitters can be configured as stateful so that when the user visits the page again, the adjusts sizes can be restored. Define a stateKey to enable this feature. Default location of the state is session storage and other option is the local storage which can be configured using the stateStorage property.

<p-splitter stateKey="mykey" stateStorage="local">
    <ng-template>
        Panel 1
    </ng-template>
    <ng-template>
        Panel 2
    </ng-template>
</p-splitter>

Theming

Splitter supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Splitter showcase for demos and documentation.