Skip to Content
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
ExamplesDocumentationCSS Variables

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--Heightc_splitter_Height
0.5rem
.pf-c-splitter--pf-c-splitter--Widthc_splitter_Width
100%
.pf-c-splitter--pf-c-splitter--BackgroundColorc_splitter_BackgroundColor
#d2d2d2
.pf-c-splitter--pf-c-splitter--Cursorc_splitter_Cursor
row-resize
.pf-c-splitter--pf-c-splitter--m-vertical--Heightc_splitter_m_vertical_Height
100%
.pf-c-splitter--pf-c-splitter--m-vertical--Widthc_splitter_m_vertical_Width
0.5rem
.pf-c-splitter--pf-c-splitter--m-vertical--Cursorc_splitter_m_vertical_Cursor
col-resize
.pf-c-splitter--pf-c-splitter__handle--Topc_splitter__handle_Top
50%
.pf-c-splitter--pf-c-splitter__handle--Leftc_splitter__handle_Left
50%
.pf-c-splitter--pf-c-splitter__handle--after--BorderColorc_splitter__handle_after_BorderColor
#151515
.pf-c-splitter--pf-c-splitter__handle--after--BorderTopWidthc_splitter__handle_after_BorderTopWidth
1px
.pf-c-splitter--pf-c-splitter__handle--after--BorderRightWidthc_splitter__handle_after_BorderRightWidth
0
.pf-c-splitter--pf-c-splitter__handle--after--BorderBottomWidthc_splitter__handle_after_BorderBottomWidth
1px
.pf-c-splitter--pf-c-splitter__handle--after--BorderLeftWidthc_splitter__handle_after_BorderLeftWidth
0
.pf-c-splitter--pf-c-splitter--m-vertical__handle--after--BorderTopWidthc_splitter_m_vertical__handle_after_BorderTopWidth
0
.pf-c-splitter--pf-c-splitter--m-vertical__handle--after--BorderRightWidthc_splitter_m_vertical__handle_after_BorderRightWidth
1px
.pf-c-splitter--pf-c-splitter--m-vertical__handle--after--BorderBottomWidthc_splitter_m_vertical__handle_after_BorderBottomWidth
0
.pf-c-splitter--pf-c-splitter--m-vertical__handle--after--BorderLeftWidthc_splitter_m_vertical__handle_after_BorderLeftWidth
1px
.pf-c-splitter--pf-c-splitter__handle--after--Widthc_splitter__handle_after_Width
0.75rem
.pf-c-splitter--pf-c-splitter__handle--after--Heightc_splitter__handle_after_Height
0.25rem
.pf-c-splitter--pf-c-splitter__handle--m-vertical--after--Widthc_splitter__handle_m_vertical_after_Width
0.25rem
.pf-c-splitter--pf-c-splitter__handle--m-vertical--after--Heightc_splitter__handle_m_vertical_after_Height
0.75rem
.pf-c-splitter.pf-m-vertical--pf-c-splitter--Heightc_splitter_Height
100%
.pf-c-splitter.pf-m-vertical--pf-c-splitter--Widthc_splitter_Width
0.5rem
.pf-c-splitter.pf-m-vertical--pf-c-splitter--Cursorc_splitter_Cursor
col-resize
.pf-c-splitter.pf-m-vertical--pf-c-splitter__handle--after--Widthc_splitter__handle_after_Width
0.25rem
.pf-c-splitter.pf-m-vertical--pf-c-splitter__handle--after--Heightc_splitter__handle_after_Height
0.75rem
.pf-c-splitter.pf-m-vertical--pf-c-splitter__handle--after--BorderTopWidthc_splitter__handle_after_BorderTopWidth
0
.pf-c-splitter.pf-m-vertical--pf-c-splitter__handle--after--BorderRightWidthc_splitter__handle_after_BorderRightWidth
1px
.pf-c-splitter.pf-m-vertical--pf-c-splitter__handle--after--BorderBottomWidthc_splitter__handle_after_BorderBottomWidth
0
.pf-c-splitter.pf-m-vertical--pf-c-splitter__handle--after--BorderLeftWidthc_splitter__handle_after_BorderLeftWidth
1px