DEV Community

loading...
Cover image for Angular Splitter

Angular Splitter

PrimeTek
PrimeTek is a world renowned vendor of popular UI Component suites including PrimeFaces, PrimeNG, PrimeReact and PrimeVue. For any inquires please use contact@primetek.com.tr to contact us.
・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)