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

Selector: collapsed-size
Type:

Number

|

String

Default Value: undefined

jQuery
index.js
$(() => {
    $("#splitter").dxSplitter({
        items: [
            {
                // ...
                collapsedSize: "20px",
            }
        ],
    });
});
Angular
app.component.html
<dx-splitter ... >
    <dxi-item ...
        collapsedSize="20px"
    >
    </dxi-item>
</dx-splitter>
Vue
App.vue
<template>
    <DxSplitter ... >
        <DxItem ... 
            collapsedSize="20px"
        />
    </DxSplitter>
</template>

<script setup>
import { DxSplitter, DxItem } from "devextreme-vue/splitter";
</script>
React
App.js
import React from "react";
import Splitter, { Item } from "devextreme-react/splitter";

const App = () => (
    <React.Fragment>
        <Splitter ... >
            <Item ... 
                collapsedSize="20px"
            />
        </Splitter>
    </React.Fragment>
);

export default App;
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.

Selector: max-size
Type:

Number

|

String

Default Value: undefined

jQuery
index.js
$(() => {
    $("#splitter").dxSplitter({
        items: [
            {
                // ...
                maxSize: "500px",
            }
        ],
    });
});
Angular
app.component.html
<dx-splitter ... >
    <dxi-item ...
        maxSize="500px"
    >
    </dxi-item>
</dx-splitter>
Vue
App.vue
<template>
    <DxSplitter ... >
        <DxItem ... 
            maxSize="500px"
        />
    </DxSplitter>
</template>

<script setup>
import { DxSplitter, DxItem } from "devextreme-vue/splitter";
</script>
React
App.js
import React from "react";
import Splitter, { Item } from "devextreme-react/splitter";

const App = () => (
    <React.Fragment>
        <Splitter ... >
            <Item ... 
                maxSize="500px"
            />
        </Splitter>
    </React.Fragment>
);

export default App;

View Demo

minSize

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

Selector: min-size
Type:

Number

|

String

Default Value: undefined

jQuery
index.js
$(() => {
    $("#splitter").dxSplitter({
        items: [
            {
                // ...
                minSize: "30%",
            }
        ],
    });
});
Angular
app.component.html
<dx-splitter ... >
    <dxi-item ...
        minSize="30%"
    >
    </dxi-item>
</dx-splitter>
Vue
App.vue
<template>
    <DxSplitter ... >
        <DxItem ... 
            minSize="30%"
        />
    </DxSplitter>
</template>

<script setup>
import { DxSplitter, DxItem } from "devextreme-vue/splitter";
</script>
React
App.js
import React from "react";
import Splitter, { Item } from "devextreme-react/splitter";

const App = () => (
    <React.Fragment>
        <Splitter ... >
            <Item ... 
                minSize="30%"
            />
        </Splitter>
    </React.Fragment>
);

export default App;

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

Default Value: undefined

jQuery
index.js
$(() => {
    $("#splitter").dxSplitter({
        items: [
            {
                // ...
                size: "50%",
            }
        ],
    });
});
Angular
app.component.html
<dx-splitter ... >
    <dxi-item ...
        size="50%"
    >
    </dxi-item>
</dx-splitter>
Vue
App.vue
<template>
    <DxSplitter ... >
        <DxItem ... 
            size="50%"
        />
    </DxSplitter>
</template>

<script setup>
import { DxSplitter, DxItem } from "devextreme-vue/splitter";
</script>
React
App.js
import React from "react";
import Splitter, { Item } from "devextreme-react/splitter";

const App = () => (
    <React.Fragment>
        <Splitter ... >
            <Item ... 
                size="50%"
            />
        </Splitter>
    </React.Fragment>
);

export default App;

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: DxSplitter
Type: dxSplitter_Options
Default Value: undefined

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

Splitter with a nested splitter

jQuery
index.js
$(() => {
    $("#splitter").dxSplitter({
        orientation: "vertical",
        items: [{
                text: "Top Panel"
            },
            {
                splitter: {
                    items: [{
                            text: "Nested Left Panel"
                        },{
                            text: "Nested Central Panel"
                        },{
                            text: "Nested Right Panel"
                        }
                    ]
                }
            }
        ]
    });
});
Angular
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>
Vue
App.vue
<template>
    <DxSplitter class="splitter" orientation="vertical">
        <DxItem text="Top Panel" />
        <DxItem>
            <DxSplitter>
                <DxItem text="Nested Left Panel" />
                <DxItem text="Nested Central Panel" />
                <DxItem text="Nested Right Panel" />
            </DxSplitter>
        </DxItem>
    </DxSplitter>
</template>

<script setup>
import { DxSplitter, DxItem } from "devextreme-vue/splitter";
</script>
React
App.js
import React from "react";
import Splitter, { Item } from "devextreme-react/splitter";

const App = () => (
    <React.Fragment>
        <Splitter orientation="vertical">
            <Item text="Top Panel" />
            <Item>
                <Splitter>
                    <Item text="Nested Left Panel" />
                    <Item text="Nested Central Panel" />
                    <Item text="Nested Right Panel" />
                </Splitter>
            </Item>
        </Splitter>
    </React.Fragment>
);

export default App;

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.

jQuery

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.

The following example adds a custom item to the component.

index.js
$(function() {
    $("#splitterContainer").dxSplitter({
        // ...
        items: [
            {
                // ...
                template: '<div>Custom Item</div>'
            }
        ]
    });
});
Angular

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 { }
Vue

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 Vue uses custom templates instead of the template property.

App.vue
<template>
    <DxSplitter ... >
        <dxItem ... >
            <div>Custom Item</div>
        </dxItem>
    </DxSplitter>
</template>

<script>

import DxSplitter, {
    DxItem
} from 'devextreme-vue/splitter';

export default {
    components: {
        DxSplitter,
        DxItem
    },
    // ...
}
</script>
React

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. In React, specify the render or component properties.

App.js
import React from 'react';

import Splitter, {
    Item
} from 'devextreme-react/splitter';

const renderCustomItem = () => {
    return <div>Custom Item</div>;
}

const App() = () => {
    return (
        <Splitter ... >
            <Item ...
                render={renderCustomItem}
            >
            </Item>
        </Splitter>
    );
}
export default App;
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.