Splitter
Splitter is utilized to separate and resize panels.
Panel 1
Panel 2
basic-demo
Usage#
import { Splitter } from '@primereact/ui/splitter';<Splitter>
<Splitter.Panel />
<Splitter.Gutter>
<Splitter.Thumb />
</Splitter.Gutter>
<Splitter.Panel />
</Splitter>Examples#
Horizontal#
Splitter requires two Splitter.Panel components as children which are displayed horizontally by default.
Panel 1
Panel 2
horizontal-demo
import { Splitter } from '@primereact/ui/splitter';
export default function HorizontalDemo() {
return (
<Splitter.Root className="h-60 max-w-lg mx-auto">
<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.Root>
);
}
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
size-demo
import { Splitter } from '@primereact/ui/splitter';
export default function SizeDemo() {
return (
<div>
<Splitter.Root className="h-60 max-w-lg mx-auto">
<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.Root>
</div>
);
}
Vertical#
Splitters can be combined to create advanced layouts.
Panel 1
Panel 2
vertical-demo
import { Splitter } from '@primereact/ui/splitter';
export default function VerticalDemo() {
return (
<Splitter.Root orientation="vertical" className="h-60 max-w-lg mx-auto">
<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.Root>
);
}
Nested#
Splitters can be combined to create advanced layouts.
Panel 1
Panel 2
Panel 3
Panel 4
nested-demo
import { Splitter } from '@primereact/ui/splitter';
export default function NestedDemo() {
return (
<Splitter.Root className="h-78 max-w-lg mx-auto">
<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.Root 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.Root>
<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.Root>
</Splitter.Panel>
</Splitter.Root>
</Splitter.Panel>
</Splitter.Root>
);
}
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 horizontal splitter to the left. |
right arrow | Moves a horizontal splitter to the right. |