Web Components Splitter Overview

The Ignite UI for Web Components 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.

Web Components Splitter Example

Getting Started with Web Components Splitter

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents

Before using the Splitter, you need to register it as follows:

import { defineComponents, IgcSplitterComponent } from 'igniteui-webcomponents';

defineComponents(IgcSplitterComponent);

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

Using Web Components Splitter

Use the start and end slots to place pane content:

<igc-splitter style="height: 400px;">
  <div slot="start">Start pane content</div>
  <div slot="end">End pane content</div>
</igc-splitter>

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.

<igc-splitter orientation="vertical" style="height: 400px;">
  <div slot="start">Top pane</div>
  <div slot="end">Bottom pane</div>
</igc-splitter>

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 %.

<igc-splitter
  start-size="35%"
  end-size="65%"
  start-min-size="200px"
  end-min-size="180px"
  style="height: 420px;"
>
  <div slot="start">Navigation</div>
  <div slot="end">Main content</div>
</igc-splitter>

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:

const splitter = document.querySelector('igc-splitter') as IgcSplitterComponent;

splitter.toggle('start'); // collapse start pane
splitter.toggle('start'); // expand start pane

Nested Splitters

Splitters can be nested to create multi-region layouts.

Events

The Splitter emits the following events during resize operations:

• igcResizeStart: fired once when resizing starts.
• igcResizing: fired continuously while resizing.
• igcResizeEnd: fired once when resizing ends.

The event detail includes current startPanelSize, endPanelSize, and delta for ongoing and end events.

const splitter = document.querySelector('igc-splitter');

splitter?.addEventListener('igcResizeEnd', (event: CustomEvent) => {
  console.log(event.detail.startPanelSize, event.detail.endPanelSize, event.detail.delta);
});

Keyboard Navigation

When the splitter bar is focused:

Styling

The Splitter 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 Web Components Forums
• Ignite UI for Web Components GitHub