Angular Splitter - SplitterItem

A splitter item (pane).

Type:

Object

collapsed

Specifies whether an item (pane) is initially collapsed.

Type:

Boolean

Default Value: false

NOTE
Splitter should have at least one non-collapsed pane without a set size.

collapsedSize

Specifies the size of a collapsible item (pane) when collapsed in pixels or as a percentage.

Type:

Number

|

String

| undefined
Default Value: undefined

app.component.html
  • <dx-splitter ... >
  • <dxi-item ...
  • collapsedSize="20px"
  • >
  • </dxi-item>
  • </dx-splitter>
NOTE
The collapsedSize value must not exceed maxSize or be less then minSize.

View Demo

collapsible

Specifies whether an item (pane) is collapsible.

Type:

Boolean

Default Value: false

Splitter with collapsible panes

To collapse a pane, you can also double-click the separator bar.

NOTE
Splitter should have at least one non-collapsed pane without a set size.

View Demo

maxSize

Specifies the maximum size of an item (pane) in pixels or as a percentage.

Type:

Number

|

String

| undefined
Default Value: undefined

app.component.html
  • <dx-splitter ... >
  • <dxi-item ...
  • maxSize="500px"
  • >
  • </dxi-item>
  • </dx-splitter>

View Demo

minSize

Specifies the minimum size of an item (pane) in pixels or as a percentage.

Type:

Number

|

String

| undefined
Default Value: undefined

app.component.html
  • <dx-splitter ... >
  • <dxi-item ...
  • minSize="30%"
  • >
  • </dxi-item>
  • </dx-splitter>

View Demo

resizable

Specifies whether an item (pane) is resizable.

Type:

Boolean

Default Value: true

size

Specifies the initial size of an item (pane) in pixels or as a percentage. The size changes after any layout alteration.

Type:

Number

|

String

| undefined
Default Value: undefined

app.component.html
  • <dx-splitter ... >
  • <dxi-item ...
  • size="50%"
  • >
  • </dxi-item>
  • </dx-splitter>

If you do not specify pane sizes, the UI component splits up the panes automatically with even distribution.

NOTE
  • You can use minSize and maxSize properties to specify size constraints.

  • The total pane size should not exceed Splitter size.

View Demo

splitter

Specifies a splitter inside an item (pane).

Selector: dxo-splitter
Type: dxSplitter_Options | undefined
Default Value: undefined

Use this property to make the item a nested Splitter UI component.

Splitter with a nested splitter

app.component.html
  • <dx-splitter id="splitter" orientation="vertical">
  • <dxi-item text="Top Panel"></dxi-item>
  • <dxi-item>
  • <dx-splitter>
  • <dxi-item text="Nested Left Panel"></dxi-item>
  • <dxi-item text="Nested Central Panel"></dxi-item>
  • <dxi-item text="Nested Right Panel"></dxi-item>
  • </dx-splitter>
  • </dxi-item>
  • </dx-splitter>

View Demo

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data:

CollectionWidgetItem

The item object to be rendered.

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a DOM Node of the template's container.

The following example adds a custom item to the component. Note that Angular uses custom templates instead of the template property.

app.component.html
app.component.ts
app.module.ts
  • <dx-splitter ... >
  • <dxi-item ... >
  • <div *dxTemplate>
  • <div>Custom Item</div>
  • </div>
  • </dxi-item>
  • </dx-splitter>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • // ...
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxSplitterModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxSplitterModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
See Also

text

Specifies text displayed for the UI component item.

Type:

String

If you use both this property and a template, the template overrides the text.

visible

Specifies whether or not a UI component item must be displayed.

Type:

Boolean

Default Value: true

When you set this property to true at runtime, displayed pane size becomes 0. Update other pane sizes to display the pane.