React Splitter Overview

The Ignite UI for React Splitter provides a resizable split-pane layout that divides content into two areas: start and end. Users can drag the splitter bar, use keyboard shortcuts, or collapse and expand panes with built-in controls. You can also nest splitters to build complex dashboard-style layouts.

React Splitter Example

Getting Started with React Splitter

First, you need to install the corresponding Ignite UI for React npm package by running the following command:

npm install igniteui-react

You will then need to import the IgrSplitter and its necessary CSS, like so:

import { IgrSplitter } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Using React Splitter

Use the start and end slots to place pane content:

<IgrSplitter>
  <div slot="start">Start pane content</div>
  <div slot="end">End pane content</div>
</IgrSplitter>

We recommend using a <div> or other semantic elements such as <section> or <article> for the start and end slots of the Splitter component.

Orientation

Set the Orientation property to control pane direction:

• horizontal (default): start and end panes are rendered left and right.
• vertical: start and end panes are rendered top and bottom.

<IgrSplitter orientation="vertical">
  <div slot="start">Top pane</div>
  <div slot="end">Bottom pane</div>
</IgrSplitter>

Pane Size and Constraints

Use size properties to set initial and constrained pane sizes:

• StartSize, EndSize
• StartMinSize, EndMinSize
• StartMaxSize, EndMaxSize

Values accept CSS length values such as px and %.

<IgrSplitter
  startSize="35%"
  endSize="65%"
  startMinSize="200px"
  endMinSize="180px"
>
  <div slot="start">Navigation</div>
  <div slot="end">Main content</div>
</IgrSplitter>

Collapsing and Resizing

Use these properties to control interactions:

• DisableResize: disables pane resizing.
• DisableCollapse: disables pane collapsing.
• HideDragHandle: hides the drag handle.
• HideCollapseButtons: hides collapse and expand buttons.

You can also collapse or expand panes programmatically:

import { useRef } from 'react';

const splitterRef = useRef<IgrSplitterComponent>(null);

const toggleStartPane = () => {
  splitterRef.current?.toggle('start');
};

Nested Splitters

Splitters can be nested to create multi-region layouts.

Events

The Splitter emits the following events during resize operations:

• ResizeStart: fired once when resizing starts.
• Resizing: fired continuously while resizing.
• ResizeEnd: fired once when resizing ends.

The event detail includes current StartPanelSize, EndPanelSize, and Delta for ongoing and end events.

const handleResizeEnd = (event: CustomEvent<IgcSplitterResizeEventArgs>) => {
  console.log(event.detail.startPanelSize, event.detail.endPanelSize, event.detail.delta);
};

<IgrSplitter onResizeEnd={handleResizeEnd}>
  <div slot="start">Start pane</div>
  <div slot="end">End pane</div>
</IgrSplitter>

Keyboard Navigation

When the splitter bar is focused:

Styling

The IgrSplitter component exposes CSS parts for styling:

It also supports theme CSS variables, including:

• --bar-color
• --handle-color
• --expander-color
• --bar-color-active
• --handle-color-active
• --expander-color-active
• --focus-color
• --size

igc-splitter {
  --bar-color: #011627;
  --handle-color: #ecaa53;
  --expander-color: #ecaa53;
  --bar-color-active: #011627;
  --handle-color-active: #ecaa53;
  --expander-color-active: #ecaa53;
  --focus-color: #ecaa53;
}

API References

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub