Splitter Overview

The Splitter splits the page into sections and allows the user to control the page layout.

Basic Usage

The following example demonstrates the Splitter in action.

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

        this.state = {
            panes: [
                { size: '20%', min: '20px', collapsible: true },
                {},
                { size: '30%', min: '20px', collapsible: true }
            ],
            nestedPanes: [
                { size: '40%' },
                { },
                { size: '30%', resizable: false }
            ]
        };
    }

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

    onNestedLayoutChange = (updatedState) => {
        this.setState({
            nestedPanes: updatedState
        });
    }

    render() {
        return (
            <div>
                <Splitter
                    style={{height: 650}}
                    panes={this.state.nestedPanes}
                    orientation={'vertical'}
                    onLayoutChange={this.onNestedLayoutChange}
                >
                    <Splitter
                        panes={this.state.panes}
                        onLayoutChange={this.onLayoutChange}
                    >
                        <div class="pane-content">
                            <h3>Inner splitter / left pane</h3>
                            <p>Resizable and collapsible.</p>
                        </div>
                        <div class="pane-content">
                            <h3>Inner splitter / center pane</h3>
                            <p>Resizable only.</p>
                        </div>
                        <div class="pane-content">
                            <h3>Inner splitter / right pane</h3>
                            <p>Resizable and collapsible.</p>
                        </div>
                    </Splitter>

                     <div class="pane-content">
                        <h3>Outer splitter / Middle pane</h3>
                        <p>Resizable only.</p>
                    </div>
                    <div class="pane-content">
                        <h3>Outer splitter / Bottom pane</h3>
                        <p>Non-resizable and non-collapsible.</p>
                    </div>
                </Splitter>
            </div>
        );
    }
}
ReactDOM.render(
    <App/>,
    document.querySelector('my-app')
);

Functionality and Features

In this article