Source: https://primereact.org/splitter/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Splitter

Splitter is utilized to separate and resize panels.

Import#

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

Copy

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>

Copy

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>

Copy

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>

Copy

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>

Copy

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. | | home | Maximizes the primary panel. | | end | Minimizes the primary panel. | | enter | Toggles the primary panel between minimum and maximum sizes. |

Import
Horizontal
Size
Vertical
Nested
Accessibility

PrimeReact 10.9.7 by PrimeTek