Patternfly Logo

Splitter

Info alert:Beta feature

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

Examples

Default

Vertical

Documentation

Overview

Accessibility

ClassApplied toOutcome
role="separator".pf-c-splitterIndicates that the splitter is a separator. Required
tabindex="0".pf-c-splitterInserts the splitter into the tab order of the page so that it is focusable. Required
aria-orientation="horizontal".pf-c-splitterIndicates that the splitter is oriented horizontally.
aria-orientation="vertical".pf-c-splitter.pf-m-verticalIndicates that the splitter is oriented vertically.

Usage

ClassApplied toOutcome
.pf-c-splitter<div>Initiates the splitter component. Required
.pf-c-splitter__handle<div>Initiates the splitter handle element. Required
.pf-m-vertical.pf-c-splitterModifies the splitter component to be vertical.

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