Splitter

Splitter is utilized to separate and resize panels.

Horizontal

Panel 1

Panel 2

Vertical

Panel 1

Panel 2

Nested

Panel 1

Panel 2

Panel 3

Panel 4

Import via Module


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

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/splitter/splitter.min.js"></script>

Getting Started

Splitter requires two SplitterPanel components to wrap.


<Splitter style={{height: '300px'}}>
    <SplitterPanel>
        Panel 1
    </SplitterPanel>
    <SplitterPanel>
        Panel 2
    </SplitterPanel>
</Splitter>

Layout

Default orientation is configured with the layout property and default is the "horizontal" whereas other alternative is the "vertical".


<Splitter style={{height: '300px'}} layout="vertical">
    <SplitterPanel>
        Panel 1
    </SplitterPanel>
    <SplitterPanel>
        Panel 2
    </SplitterPanel>
</Splitter>

Initial Sizes

When no size is defined, panels are split 50/50, use the size property to give relative widths e.g. 20/80.


<Splitter>
    <SplitterPanel size={20}>
        Panel 1
    </SplitterPanel>
    <SplitterPanel size={80}>
        Panel 2
    </SplitterPanel>
</Splitter>

Minimum Size

Minimum size defines the lowest boundary for the size of a panel.


<Splitter>
    <SplitterPanel size={20} minSize={10}>
        Panel 1
    </SplitterPanel>
    <SplitterPanel size={80} minSize={20}>
        Panel 2
    </SplitterPanel>
</Splitter>

Nested Panels

Splitters can be combined to create advanced layouts.


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

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.


<Splitter stateKey={"mykey"} stateStorage={"local"}>
    <SplitterPanel>
        Panel 1
    </SplitterPanel>
    <SplitterPanel>
        Panel 2
    </SplitterPanel>
</Splitter>

Properties of SplitterPanel

Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.

Name	Type	Default	Description
size	number	null	Size of the element relative to 100%.
minSize	number	null	Minimum size of the element relative to 100%.
style	object	null	Inline style of the component.
className	string	null	ClassName of the component.

Properties of Splitter

Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
style	object	null	Inline style of the component.
className	string	null	ClassName of the component.
layout	string	horizontal	Orientation of the panels, valid values are "horizontal" and "vertical".
gutterSize	number	4	Size of the divider in pixels.
stateKey	string	null	Storage identifier of a stateful Splitter.
stateStorage	string	session	Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.

Events of Splitter

Name	Parameters	Description
onResizeEnd	event.originalEvent: Browser event event.sizes: Sizes of the panels as an array	Callback to invoke when resize ends.

Styling

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.