JavaScript/jQuery Splitter - SplitterItem

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:

|

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.

collapsible

Specifies whether an item (pane) is collapsible.

Type:

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.

maxSize

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

Type:

|

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;

minSize

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

Type:

|

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;

resizable

Specifies whether an item (pane) is resizable.

Type:

Default Value: true

Splitter with resizable panes

size

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

Type:

|

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.

splitter

Specifies a splitter inside an item (pane).

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;

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;

text

Specifies text displayed for the UI component item.

Type:

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: