Skip to main content

Basic

Each child of Allotment becomes a pane. Drag the line between two panes to resize them, and double-click it to reset them to equal sizes.

All the examples on this site are editable: change the code and the result updates as you type.

Result
Loading...
Live Editor
<div style={{ height: 300 }}>
  <Allotment>
    <div className="demo-pane">One</div>
    <div className="demo-pane">Two</div>
    <div className="demo-pane">Three</div>
  </Allotment>
</div>
tip

Allotment fills its parent element, so the parent needs a height. If you can't see anything, check that first.

Vertical​

Set vertical to stack the panes from top to bottom.

Result
Loading...
Live Editor
<div style={{ height: 300 }}>
  <Allotment vertical>
    <div className="demo-pane">Top</div>
    <div className="demo-pane">Bottom</div>
  </Allotment>
</div>

Without a separator​

Set separator={false} to hide the line between panes. You can still drag the boundary to resize them.

Result
Loading...
Live Editor
<div style={{ height: 300 }}>
  <Allotment separator={false}>
    <div className="demo-pane">Left</div>
    <div className="demo-pane">Right</div>
  </Allotment>
</div>

Open in Storybook