Ark Logo
GitHub
Reat
Components
Splitter

Splitter

A component that divides your interface into resizable sections

A
B

Anatomy

To set up the splitter correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Splitter component in your project. Let's take a look at the most basic example:

Using Render Props

The Splitter component allows you to pass a function as a child to gain direct access to its API. This provides more control and allows you to modify the size of the panels programmatically:

Handling Events

Splitter also provides onSizeChangeStart and onSizeChangeEnd events which can be useful to perform some actions during the start and end of the resizing process:

Vertical Splitter

By default, the Splitter component is horizontal. If you need a vertical splitter, use the orientation prop:

API Reference

Accessibility

Complies with the Window Splitter WAI-ARIA design pattern.