Blazor Splitter Overview

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

Blazor Splitter Example

Getting Started with Blazor Splitter

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbSplitterModule)
);

You will also need to link an additional CSS file to apply the styling to the IgbSplitter component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

Using Blazor Splitter

Use the start and end slots to place pane content:

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

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.

<IgbSplitter Orientation="SplitterOrientation.Vertical">
  <div slot="start">Top pane</div>
  <div slot="end">Bottom pane</div>
</IgbSplitter>

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

<IgbSplitter
  StartSize="35%"
  EndSize="65%"
  StartMinSize="200px"
  EndMinSize="180px"
>
  <div slot="start">Navigation</div>
  <div slot="end">Main content</div>
</IgbSplitter>

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:

<IgbSplitter @ref="SplitterRef">
  <div slot="start">Start pane</div>
  <div slot="end">End pane</div>
</IgbSplitter>

@code {
    private IgbSplitter SplitterRef;

    public async Task ToggleStartPane()
    {
      this.SplitterRef.Toggle(PanePosition.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.

<IgbSplitter ResizeEnd="OnResizeEnd">
  <div slot="start">Start pane</div>
  <div slot="end">End pane</div>
</IgbSplitter>

@code {
    public void OnResizeEnd(IgbSplitterResizeEventArgs e)
    {
        Console.WriteLine($"StartPanelSize: {e.Detail.StartPanelSize}, EndPanelSize: {e.Detail.EndPanelSize}");
    }
}

Keyboard Navigation

When the splitter bar is focused:

Styling

The IgbSplitter 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 Blazor Forums
• Ignite UI for Blazor GitHub