Splitter

Splitter is utilized to separate and resize panels.

Import#


import { Splitter, SplitterPanel } from 'primereact/splitter';

Horizontal#

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

Panel 1

Panel 2


<Splitter style={{ height: '300px' }}>
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
</Splitter>

Size#

Initial dimension of a panel is percentage based and defined using the size property. In addition,minSize is provided to set a minimum value during a resize.

Panel 1

Panel 2


<Splitter style={{ height: '300px' }}>
    <SplitterPanel className="flex align-items-center justify-content-center" size={25} minSize={10}>Panel 1</SplitterPanel>
    <SplitterPanel className="flex align-items-center justify-content-center" size={75}>Panel 2</SplitterPanel>
</Splitter>

Vertical#

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

Panel 1

Panel 2


<Splitter style={{ height: '300px' }} layout="vertical">
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
</Splitter>

Nested#

Splitters can be combined to create advanced layouts.

Panel 1

Panel 2

Panel 3

Panel 4


<Splitter style={{ height: '300px' }}>
    <SplitterPanel className="flex align-items-center justify-content-center" size={20} minSize={10}>
        Panel 1
    </SplitterPanel>
    <SplitterPanel size={80}>
        <Splitter layout="vertical">
            <SplitterPanel className="flex align-items-center justify-content-center" size={15}>
                Panel 2
            </SplitterPanel>
            <SplitterPanel size={85}>
                <Splitter>
                    <SplitterPanel className="flex align-items-center justify-content-center" size={20}>
                        Panel 3
                    </SplitterPanel>
                    <SplitterPanel className="flex align-items-center justify-content-center" size={80}>
                        Panel 4
                     </SplitterPanel>
                </Splitter>
             </SplitterPanel>
        </Splitter>
    </SplitterPanel>
</Splitter>

Style#

Following is the list of structural style classes

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.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.