Splitter

The splitter component adds a visual vertical or horizontal divider between two blocks of content.

Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Contents

UsageAPIs

Usage

Splitters can move, so your content should dynamically resize to accomodate changes in space if it needs to.

APIs

SplitterDirection

Vertical0
number
Children will be laid out left to right and divided vertically
Horizontal1
number
Children will be laid out top to bottom and divided horizontally

SplitterElementPosition

Near0
number
Left/Top element
Far1
number
Right/Bottom element

FixedSizeLimitsFormat

Pixels0
number
minFixedSize and maxFixedSize are specified in pixels
Percentage1
number
minFixedSize and maxFixedSize are specified as a percentage of the total size (e.g. 0.6)

ISplitterProps

ariaLabel
string
Optional aria-label for the divider
ariaLabelledBy
string
Optional aria-labeledby for the divider
className
string
Optional className to apply to the splitter container div.
collapsed
IReadonlyObservableValue<boolean> | boolean
If true, show the fixed side of the splitter in a collapsed form.
disabled
boolean
Is the splitter disabled
expandTooltip"Show more information"
string
Specific tooltip to use for the expand button that is shown in the collapsed state.
farElementClassName
string
Optional classname for the root Splitter far element.
fixedElementSplitterElementPosition.Far
SplitterElementPosition
Which element is the fixed element.
fixedSize
IReadonlyObservableValue<number> | number
The size of the fixed element
fixedSizeLimitsFormatFixedSizeLimitsFormat.Pixels
FixedSizeLimitsFormat }
Format of fixed size limits.
initialFixedSize
number
The initial fixed size, if this element does not have a controlled width. Defaults to 50%
maxFixedSize
number
The maximum size of the fixed element
minFixedSize
number
The minimum size of the fixed element
nearElementClassName
string
Optional classname for the root Splitter near element.
onCollapsedChanged
(collapsed: boolean) => void
Callback for when the collapsed mode changes. If supplied, the collapsed state will be toggled
onFixedSizeChanged
(newFixedSize: number) => void
Callback for when the fixed size changes
onRenderFarElement
() => JSX.Element
Render the content of the far (last) element
onRenderNearElement
() => JSX.Element
Render the content of the near (first) element
splitterDirectionSplitterDirection.Vertical
SplitterDirection
The direction of the splitter.