Panes

The Splitter provides options for setting the behavior of its panes.

By using these options, you can configure the following pane features:

Dimensions

The size property controls the dimensions of the Splitter panes. It accepts units in both pixel and percentage values. To control the minimum and maximum size of a pane, use the min and max properties of the Splitter panes option.

To allow the Splitter to fully and evenly distribute the available space between panes of non-declared size, do not specify the size of at least one pane. Otherwise, if you declare size for all panes, the Splitter will throw an error.

<style>
 h3 { font-size: 1.2em; padding: 10px; }
 p { margin: 0; padding: 0 10px; }
</style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            panes: [
                { size: '200px', min: '5%' },
                { },
                { size: '20%' }
            ],
        };
    }

    onLayoutChange = (updatedState) => {
        this.setState({
            panes: updatedState
        });
    }

    render() {
        return (
            <div>
                <Splitter
                    style={{height: 200}}
                    panes={this.state.panes}
                    onLayoutChange={this.onLayoutChange}
                >
                    <div>
                        <h3>Left pane</h3>
                        <p>Minimum size of 5%</p>
                    </div>
                    <h3>Middle pane</h3>
                    <h3>Right pane</h3>
                </Splitter>
            </div>
        );
    }
}
ReactDOM.render(
    <App/>,
    document.querySelector('my-app')
);

Resizing

By default, the Splitter enables the user to resize its panes. To disable this behavior, set the resizable property to false.

<style>
 h3 { font-size: 1.2em; padding: 10px; }
 p { margin: 0; padding: 0 10px; }
</style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            panes: [
                { size: '200px' },
                { },
                { size: '20%', resizable: false }
            ],
        };
    }

    onLayoutChange = (updatedState) => {
        this.setState({
            panes: updatedState
        });
    }

    render() {
        return (
            <div>
                <Splitter
                    style={{height: 200}}
                    panes={this.state.panes}
                    onLayoutChange={this.onLayoutChange}
                >
                    <div>
                        <h3>Left pane</h3>
                    </div>
                    <h3>Middle pane</h3>
                    <div>
                        <h3>Right pane</h3>
                        <p>Not resizable</p>
                    </div>
                </Splitter>
            </div>
        );
    }
}
ReactDOM.render(
    <App/>,
    document.querySelector('my-app')
);

Collapsing

You can enable a Splitter pane to collapse by setting the collapsible property to true. As a result, the Splitter renders a button which shows or, respectively, hides the pane. To collapse a pane, you can also double-click the split-bar. To render a pane that is initially collapsed, use the collapsed property.

<style>
 h3 { font-size: 1.2em; padding: 10px; }
 p { margin: 0; padding: 0 10px; }
</style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            panes: [
                { size: '20%', collapsible: true },
                { }
            ],
        };
    }

    onLayoutChange = (updatedState) => {
        this.setState({
            panes: updatedState
        });
    }

    render() {
        return (
            <div>
                <Splitter
                    style={{height: 200}}
                    panes={this.state.panes}
                    onLayoutChange={this.onLayoutChange}
                >
                    <div>
                        <h3>Sidebar content</h3>
                        <p>Collapsible pane</p>
                    </div>
                    <h3>Main content</h3>
                </Splitter>
            </div>
        );
    }
}
ReactDOM.render(
    <App/>,
    document.querySelector('my-app')
);

Scrolling

By default, the content of the Splitter panes is scrollable. To disable the scrolling feature, set the scrollable property to false.

<style>
 h3 { font-size: 1.2em; padding: 10px; }
 p { margin: 0; padding: 0 10px; }
</style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            panes: [
                { size: '20%', scrollable: false },
                { }
            ],
        };
    }

    onLayoutChange = (updatedState) => {
        this.setState({
            panes: updatedState
        });
    }

    render() {
        return (
            <div>
                <Splitter
                    style={{height: 200}}
                    panes={this.state.panes}
                    onLayoutChange={this.onLayoutChange}
                >
                    <div>
                        <h3>Non-scrollable content</h3>
                    </div>
                    <h3>Main content</h3>
                </Splitter>
            </div>
        );
    }
}
ReactDOM.render(
    <App/>,
    document.querySelector('my-app')
);

In this article