Splitter

Splitter is utilized to separate and resize panels.

Import #


import { SplitterModule } from 'primeng/splitter';

Horizontal #

Splitter requires two SplitterPanel components as children which are displayed horizontally by default.

Panel 1
Panel 2

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

Size #

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

Panel 1
Panel 2

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

Vertical #

Panels are displayed as stacked by setting the layout to vertical.

Panel 1
Panel 2

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

Nested #

Splitters can be combined to create advanced layouts.

Panel 1
Panel 2
Panel 3
Panel 4

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

Style #

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-splitterContainer element.
p-splitterContainer element during resize.
p-splitter-horizontalContainer element with horizontal layout.
p-splitter-verticalContainer element with vertical layout.
p-splitter-panelSplitter panel element.
p-splitter-gutterGutter element to use when resizing the panels.
p-splitter-gutter-handleHandl element of the gutter.

Accessibility #

Screen Reader

Splitter bar defines separator as the role with aria-orientation set to either horizontal or vertical.

Keyboard Support

KeyFunction
tabMoves focus through the splitter bar.
down arrowMoves a vertical splitter down.
up arrowMoves a vertical splitter up.
left arrowMoves a vertical splitter to the left.
right arrowMoves a vertical splitter to the right.
PrimeNG 17.18.12 by PrimeTek