Angular Splitter Component Overview

The Ignite UI for Angular Splitter component provides the ability to create layouts, split into multiple vertically or horizontally arranged panes that may be resized, expanded and collapsed. These interactions are performed through UI exposed in the splitter bars between the panes. A simple Splitter layout is demonstrated in the demo below.

Angular Splitter Example

Getting Started with Ignite UI for Angular Splitter

To get started with the Ignite UI for Angular Splitter component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

ng add igniteui-angular

For a complete introduction to the Ignite UI for Angular, read the getting started topic.

The next step is to import the IgxSplitterModule in your app.module.ts file.

// app.module.ts
...
import { IgxSplitterModule } from 'igniteui-angular';
// import { IgxSplitterModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxSplitterModule],
    ...
})
export class AppModule {}

Alternatively, as of 16.0.0 you can import the IgxSplitterComponent as a standalone dependency, or use the IGX_SPLITTER_DIRECTIVES token to import the component and all of its supporting components and directives.

// home.component.ts

import { IGX_SPLITTER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_SPLITTER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-splitter>
        <igx-splitter-pane>
            Pane 1
        </igx-splitter-pane>
        <igx-splitter-pane>
            Pane 2
        </igx-splitter-pane>
    </igx-splitter>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_SPLITTER_DIRECTIVES]
    /* or imports: [IgxSplitterComponent, IgxSplitterPaneComponent] */
})
export class HomeComponent {}

Now that you have the Ignite UI for Angular Splitter module or directives imported, you can start using the igx-splitter component.

Using the Angular Splitter

igxSplitter is initialized with the igx-splitter tag. Multiple splitter panes can be defined under a single igx-splitter component. The content of the pane is templatable and will be rendered in its own resizable container.

<!-- splitter.component.html -->
<igx-splitter>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
</igx-splitter>

Orientation

The splitter can be vertical or horizontal, which is defined by the type input. The default value is Vertical.

public type = SplitterType.Horizontal;

<igx-splitter [type]="type">
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
</igx-splitter>

Configuring panes

The igxSplitterPane component contains several input properties. You can set the initial pane size by using the size input property. The minSize and maxSize input properties can be used to set the minimum or maximum allowed size of the pane. Resizing beyond minSize and maxSize is not allowed.

<igx-splitter>
    <igx-splitter-pane size='300px' minSize='100px'>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane size='300px' maxSize='500px'>
        ...
    </igx-splitter-pane>
</igx-splitter>

You can also forbid the resizing of a pane by setting its resizable input property to false.

<igx-splitter>
    <igx-splitter-pane [resizable]='false'>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
</igx-splitter>

Nested panes

You can nest splitter components to create a more complex layout inside a splitter pane.

public typeHorizontal = SplitterType.Horizontal;
public typeVertical = SplitterType.Vertical;

<igx-splitter style='height: 30vh;' [type]='typeHorizontal' >
    <igx-splitter-pane>
        <igx-splitter [type]='typeVertical' [style.width]='"100%"'>
            <igx-splitter-pane>
                Pane1.1
            </igx-splitter-pane>
            <igx-splitter-pane>
                Pane1.2
            </igx-splitter-pane>
        </igx-splitter>
    </igx-splitter-pane>
    <igx-splitter-pane>
        <igx-splitter [type]='typeVertical' [style.width]='"100%"'>
            <igx-splitter-pane>
                Pane2.1
            </igx-splitter-pane>
            <igx-splitter-pane>
                Pane2.2
            </igx-splitter-pane>
        </igx-splitter>
    </igx-splitter-pane>
</igx-splitter>

Demo

Keyboard navigation

Keyboard navigation is available by default in the splitter component. When you focus a splitter bar and press one of the following key combinations, the described behavior is performed.

Key combinations

• Arrow Up - Moves the splitter bar up in a vertical splitter
• Arrow Down - Moves the splitter bar down in a vertical splitter
• Arrow Left - Moves the splitter bar left in a horizontal splitter
• Arrow Right - Moves the splitter bar right in a horizontal splitter
• Ctrl + Arrow Up - Expands/Collapses a pane in a vertical splitter
• Ctrl + Arrow Down - Expands/Collapses a pane in a vertical splitter
• Ctrl + Arrow Left - Expands/Collapses a pane in a horizontal splitter
• Ctrl + Arrow Right - Expands/Collapses a pane in a horizontal splitter

Styling

To get started with styling the igxSplitter component, you need to import the index file, where all the theme functions and component mixins live:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

You can change the default styles of the splitter by creating a new theme that extends the splitter-theme.

// In splitter-styling-sample.component.scss

$splitter-theme: splitter-theme(
    $bar-color: #011627,
    $handle-color: #ECAA53,
    $expander-color: #ECAA53,
    $border-radius: 0,
    $focus-color: #ECAA53,
    $size: 4px
);

Using CSS Variables

The next step is to pass the custom splitter theme:

@include css-vars($custom-splitter-theme);

Using Theme Overrides

In order to style components for Internet Explorer 11, we have to use different approach, since it doesn't support CSS variables.

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep. On the other side, in order to prevent the custom theme to leak to other components, be sure to include the :host selector before ::ng-deep:

:host {
    ::ng-deep {
        // Pass the custom splitter theme to the `igx-splitter` mixin
        @include splitter($custom-splitter-theme);
    }
}

Demo

This is the final result from applying your new theme.

Custom sizing

You can either use the --size variable, targeting the igx-splitter directly:

igx-splitter {
  --size: 10px;
}

Or you can use the universal --igx-splitter-size variable to target all instances:

<div class="my-app">
  <igx-splitter></igx-splitter>
</div>

.my-app {
  --igx-splitter-size: 10px;
}

API References

• IgxSplitterComponent
• IgxSplitterPaneComponent
• SplitterType
• IgxSplitterComponent Styles

Theming Dependencies

• IgxDropDown Theme
• IgxIcon Styles

Our community is active and always welcoming to new ideas.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub