lara-light-indigo

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.

NameTypeDefaultDescription
sizenumbernullSize of the element relative to 100%.
minSizenumbernullMinimum size of the element relative to 100%.
styleobjectnullInline style of the component.
classNamestringnullClassName 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.

NameTypeDefaultDescription
idstringnullUnique identifier of the element.
styleobjectnullInline style of the component.
classNamestringnullClassName of the component.
layoutstringhorizontalOrientation of the panels, valid values are "horizontal" and "vertical".
gutterSizenumber4Size of the divider in pixels.
stateKeystringnullStorage identifier of a stateful Splitter.
stateStoragestringsessionDefines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
Events of Splitter
NameParametersDescription
onResizeEndevent.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

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

None.

Component Scale

Input Style

Ripple Effect

Free Themes

Built-in component themes created by the PrimeReact Theme Designer.

Bootstrap
Blue
Purple
Blue
Purple
Material Design
Indigo
Deep Purple
Indigo
Deep Purple
Material Design Compact
Indigo
Deep Purple
Indigo
Deep Purple
Tailwind
Tailwind Light
Fluent UI
Blue
PrimeOne Design - 2022 NEW
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
PrimeOne Design - 2021
Saga Blue
Saga Green
Saga Orange
Saga Purple
Vela Blue
Vela Green
Vela Orange
Vela Purple
Arya Blue
Arya Green
Arya Orange
Arya Purple
Premium Themes

Premium themes are only available exclusively for PrimeReact Theme Designer subscribers and therefore not included in PrimeReact core.

Soho Light
Soho Dark
Viva Light
Viva Dark
Mira
Nano

Legacy Free Themes

Nova
Nova Alt
Nova Accent
Luna Blue
Luna Green
Luna Amber
Luna Pink
Rhea

Premium Create-React-App Templates

Beautifully crafted premium create-react-app application templates by the PrimeTek design team.

Sakai
Atlantis
Freya
Ultima
Diamond
Sapphire
Serenity
Babylon
Avalon
Apollo
Roma