Splitter is utilized to separate and resize panels.
import { Splitter } from 'primereact/splitter';<Splitter>
<Splitter.Panel />
<Splitter.Gutter>
<Splitter.Thumb />
</Splitter.Gutter>
<Splitter.Panel />
</Splitter>Splitter requires two Splitter.Panel components as children which are displayed horizontally by default.
import { Splitter } from 'primereact/splitter';
export default function HorizontalDemo() {
return (
<div className="card ">
<Splitter style={{ height: '300px' }}>
<Splitter.Panel className="flex items-center justify-center"> Panel 1 </Splitter.Panel>
<Splitter.Gutter>
<Splitter.Thumb />
</Splitter.Gutter>
<Splitter.Panel className="flex items-center justify-center"> Panel 2 </Splitter.Panel>
</Splitter>
</div>
);
}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.
import { Splitter } from 'primereact/splitter';
export default function SizeDemo() {
return (
<div className="card ">
<Splitter style={{ height: '300px' }}>
<Splitter.Panel className="flex items-center justify-center" size={25} minSize={10}>
Panel 1
</Splitter.Panel>
<Splitter.Gutter>
<Splitter.Thumb />
</Splitter.Gutter>
<Splitter.Panel className="flex items-center justify-center" size={75}>
Panel 2
</Splitter.Panel>
</Splitter>
</div>
);
}Splitters can be combined to create advanced layouts.
import { Splitter } from 'primereact/splitter';
export default function VerticalDemo() {
return (
<div className="card ">
<Splitter orientation="vertical" style={{ height: '300px' }}>
<Splitter.Panel className="flex items-center justify-center"> Panel 1 </Splitter.Panel>
<Splitter.Gutter>
<Splitter.Thumb />
</Splitter.Gutter>
<Splitter.Panel className="flex items-center justify-center"> Panel 2 </Splitter.Panel>
</Splitter>
</div>
);
}Splitters can be combined to create advanced layouts.
import { Splitter } from 'primereact/splitter';
export default function NestedDemo() {
return (
<div className="card ">
<Splitter style={{ height: '300px' }}>
<Splitter.Panel className="flex items-center justify-center" size={20} minSize={10}>
Panel 1
</Splitter.Panel>
<Splitter.Gutter>
<Splitter.Thumb />
</Splitter.Gutter>
<Splitter.Panel size={80}>
<Splitter orientation="vertical">
<Splitter.Panel className="flex items-center justify-center" size={15}>
Panel 2
</Splitter.Panel>
<Splitter.Gutter>
<Splitter.Thumb />
</Splitter.Gutter>
<Splitter.Panel size={85}>
<Splitter>
<Splitter.Panel className="flex items-center justify-center" size={20}>
Panel 3
</Splitter.Panel>
<Splitter.Gutter>
<Splitter.Thumb />
</Splitter.Gutter>
<Splitter.Panel className="flex items-center justify-center" size={80}>
Panel 4
</Splitter.Panel>
</Splitter>
</Splitter.Panel>
</Splitter>
</Splitter.Panel>
</Splitter>
</div>
);
}Splitter bar defines separator as the role with aria-orientation set to either horizontal or vertical.
| 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 horizontal splitter to the left. |
right arrow | Moves a horizontal splitter to the right. |