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

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

maxSize

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

Type:

Number

|

String

| undefined
Default Value: undefined

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.

Type:

Number

|

String

| undefined
Default Value: undefined

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

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

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

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.