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

App.vue
  • <template>
  • <DxSplitter ... >
  • <DxItem ...
  • collapsedSize="20px"
  • />
  • </DxSplitter>
  • </template>
  •  
  • <script setup>
  • import { DxSplitter, DxItem } from "devextreme-vue/splitter";
  • </script>
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

App.vue
  • <template>
  • <DxSplitter ... >
  • <DxItem ...
  • maxSize="500px"
  • />
  • </DxSplitter>
  • </template>
  •  
  • <script setup>
  • import { DxSplitter, DxItem } from "devextreme-vue/splitter";
  • </script>

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

App.vue
  • <template>
  • <DxSplitter ... >
  • <DxItem ...
  • minSize="30%"
  • />
  • </DxSplitter>
  • </template>
  •  
  • <script setup>
  • import { DxSplitter, DxItem } from "devextreme-vue/splitter";
  • </script>

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

App.vue
  • <template>
  • <DxSplitter ... >
  • <DxItem ...
  • size="50%"
  • />
  • </DxSplitter>
  • </template>
  •  
  • <script setup>
  • import { DxSplitter, DxItem } from "devextreme-vue/splitter";
  • </script>

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

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>

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