Splitter

Splitter is utilized to separate and resize panels.


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

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>
         

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>
         

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>
         

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>
         

Following is the list of structural style classes

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 guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.
Visit the API documentation for detailed information about all the properties, events and methods of the component.