Patternfly Logo

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Splitter

Examples

Basic

Vertical

Props

Splitter properties
NameTypeRequiredDefaultDescription
classNamestringNoAdditional classes added to the splitter.
innerRefReact.RefObject<any>NoA reference object to attach to the splitter.
orientation'horizontal' | 'vertical'NoOrientation of the splitter

CSS variables

.pf-c-splitter--pf-c-splitter--Height
0.5rem
.pf-c-splitter--pf-c-splitter--Width
100%
.pf-c-splitter--pf-c-splitter--BackgroundColor
#d2d2d2
.pf-c-splitter--pf-c-splitter--Cursor
row-resize
.pf-c-splitter--pf-c-splitter--m-vertical--Height
100%
.pf-c-splitter--pf-c-splitter--m-vertical--Width
0.5rem
.pf-c-splitter--pf-c-splitter--m-vertical--Cursor
col-resize
.pf-c-splitter--pf-c-splitter__handle--Top
50%
.pf-c-splitter--pf-c-splitter__handle--Left
50%
.pf-c-splitter--pf-c-splitter__handle--after--BorderColor
#151515
.pf-c-splitter--pf-c-splitter__handle--after--BorderTopWidth
1px
.pf-c-splitter--pf-c-splitter__handle--after--BorderRightWidth
0
.pf-c-splitter--pf-c-splitter__handle--after--BorderBottomWidth
1px
.pf-c-splitter--pf-c-splitter__handle--after--BorderLeftWidth
0
.pf-c-splitter--pf-c-splitter--m-vertical__handle--after--BorderTopWidth
0
.pf-c-splitter--pf-c-splitter--m-vertical__handle--after--BorderRightWidth
1px
.pf-c-splitter--pf-c-splitter--m-vertical__handle--after--BorderBottomWidth
0
.pf-c-splitter--pf-c-splitter--m-vertical__handle--after--BorderLeftWidth
1px
.pf-c-splitter--pf-c-splitter__handle--after--Width
0.75rem
.pf-c-splitter--pf-c-splitter__handle--after--Height
0.25rem
.pf-c-splitter--pf-c-splitter__handle--m-vertical--after--Width
0.25rem
.pf-c-splitter--pf-c-splitter__handle--m-vertical--after--Height
0.75rem
.pf-c-splitter.pf-m-vertical--pf-c-splitter--Height
100%
.pf-c-splitter.pf-m-vertical--pf-c-splitter--Width
0.5rem
.pf-c-splitter.pf-m-vertical--pf-c-splitter--Cursor
col-resize
.pf-c-splitter.pf-m-vertical--pf-c-splitter__handle--after--Width
0.25rem
.pf-c-splitter.pf-m-vertical--pf-c-splitter__handle--after--Height
0.75rem
.pf-c-splitter.pf-m-vertical--pf-c-splitter__handle--after--BorderTopWidth
0
.pf-c-splitter.pf-m-vertical--pf-c-splitter__handle--after--BorderRightWidth
1px
.pf-c-splitter.pf-m-vertical--pf-c-splitter__handle--after--BorderBottomWidth
0
.pf-c-splitter.pf-m-vertical--pf-c-splitter__handle--after--BorderLeftWidth
1px

View source on GitHub