Source: https://primeng.org/splitter

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

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' }" class="mb-8"> <ng-template #panel> <div class="flex items-center justify-center h-full">Panel 1</div> </ng-template> <ng-template #panel> <div class="flex items-center justify-center h-full">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' }" class="mb-8"> <ng-template #panel> <div class="flex items-center justify-center h-full">Panel 1</div> </ng-template> <ng-template #panel> <div class="flex items-center justify-center h-full">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' }" class="mb-8" layout="vertical"> <ng-template #panel> <div class="flex items-center justify-center h-full">Panel 1</div> </ng-template> <ng-template #panel> <div class="flex items-center justify-center h-full">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]" class="mb-8"> <ng-template #panel> <div class="col flex w-full items-center justify-center">Panel 1</div> </ng-template> <ng-template #panel> <p-splitter layout="vertical" [panelSizes]="[50, 50]"> <ng-template #panel> <div style="flex-grow: 1;" class="flex items-center justify-center">Panel 2</div> </ng-template> <ng-template #panel> <p-splitter [panelSizes]="[20, 80]"> <ng-template #panel> <div class="col h-full flex items-center justify-center">Panel 3</div> </ng-template> <ng-template #panel> <div class="col h-full flex items-center justify-center">Panel 4</div> </ng-template> </p-splitter> </ng-template> </p-splitter> </ng-template> </p-splitter>

Accessibility #

Screen Reader

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

Keyboard Support

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

• Import

• Horizontal

• Size

• Vertical

• Nested

• Accessibility

Templates

Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.

PrimeNG 20.3.0 by PrimeTek