Top
SplitContainer - Styling & Theming
SplitContainer
To style and customize the appearance of <SplitContainer />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a <SplitContainer /> className - note that this will not override the default <SplitContainer /> className of zippy-react-toolkit-split-container, but rather will be appended to the classNames the <SplitContainer /> already has.
Below you can find a list with all the css classes applied to <SplitContainer /> components and when/how they are applied.
ClassNameDescription
zippy-react-toolkit-split-container
This is the block className for all <SplitContainer /> components. Always applied.
zippy-react-toolkit-split-container--constrained
Only applied to the <SplitContainer /> when the splitbar is dragged to reach the max/min constraints.
zippy-react-toolkit-split-container--focused
Only applied to the <SplitContainer /> when it is focused. The container is focusable only when enableKeyboardNavigation=true (enabled by default) or if you specify a positive tabIndex prop.
zippy-react-toolkit-split-container--horizontal
Applied to the <SplitContainer /> when orientation="horizontal".
zippy-react-toolkit-split-container--orientation-horizontal
Applied to the <SplitContainer /> when orientation="horizontal".
zippy-react-toolkit-split-container--vertical
Applied to the <SplitContainer /> when orientation="vertical".
zippy-react-toolkit-split-container--orientation-vertical
Applied to the <SplitContainer /> when orientation="vertical".
zippy-react-toolkit-split-container--collapsed
Applied to the <SplitContainer /> when one of the sides is collapsed.
zippy-react-toolkit-split-container--collapsing
Applied to the <SplitContainer /> during the collapse transition.
zippy-react-toolkit-split-container--expanding
Applied to the <SplitContainer /> during the expand transition.
zippy-react-toolkit-split-container--resizing
Applied to the <SplitContainer /> while the splitbar is being dragged.
zippy-react-toolkit-split-container--locked
Applied to the <SplitContainer /> when locked=true.
zippy-react-toolkit-split-container--bordered
Applied to the <SplitContainer /> when bordered=true.
zippy-react-toolkit-split-container__side
Applied to the side elements.
zippy-react-toolkit-split-container__side--collapsed
Applied to a collapsed side of the container.
zippy-react-toolkit-split-container__side--collapsing
Applied to a collapsing side of the <SplitContainer />, during the collapse transition.
zippy-react-toolkit-split-container__side--expanding
Applied to a expanding side of the <SplitContainer />, during the expand transition.
zippy-react-toolkit-split-container__side--orientation-vertical
Applied to the sides of a vertical <SplitContainer /> (orientation="vertical").
zippy-react-toolkit-split-container__side--orientation-horizontal
Applied to the sides of a horizontal <SplitContainer /> (orientation="horizontal").
zippy-react-toolkit-split-container__side--first
Applied to the first side of the <SplitContainer /> (can be horizontal or vertical).
zippy-react-toolkit-split-container__side--second
Applied to the second side of the <SplitContainer /> (can be horizontal or vertical).
zippy-react-toolkit-split-container__splitter
Applied to the splitbar element.
zippy-react-toolkit-split-container__splitter-dragger
Applied to the mobile transparent layer displayed over the splitbar to make grabbing the splitbar easier in order to perform a resize. Its size is configured via mobileSplitterDragArea.
zippy-react-toolkit-split-container__splitter--orientation-horizontal
Applied to the splitbar element when orientation="horizontal".
zippy-react-toolkit-split-container__splitter--orientation-vertical
Applied to the splitbar element when orientation="vertical".
zippy-react-toolkit-split-container__splitter--draggable
Applied to the splitbar element when draggable=true.
zippy-react-toolkit-split-container__splitter__icon
Applied to the splitbar SVG icons.