Splitter | Zalify UI

React

Usage

import { Splitter } from '@zalify-ui/react'

<Splitter.Root>
  <Splitter.Panel />
  <Splitter.ResizeTrigger />
  <Splitter.Panel />
</Splitter.Root>

Examples

Collapsible

Set collapsible to true on a panel to make it collapsible. Use collapsedSize to control its collapsed size. This can be useful for building sidebar layouts.

React

Vertical

Use the orientation prop to create a vertical splitter.

React

Multiple

Here is an example with multiple panels.

React

Store

Use the useSplitter hook to control the state of the splitter programmatically.

React

Props

Root

Prop	Default	Type
`panels`*		`PanelData[]` The size constraints of the panels.
`orientation`	`\horizontal\`	`'horizontal' \| 'vertical'` The orientation of the splitter. Can be `horizontal` or `vertical`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultSize`		`number[]` The initial size of the panels when rendered. Use when you don't need to control the size of the panels.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string resizeTrigger: (id: string) => string label: (id: string) => string panel: (id: string \| number) => string }>` The ids of the elements in the splitter. Useful for composition.
`keyboardResizeBy`		`number` The number of pixels to resize the panel by when the keyboard is used.
`nonce`		`string` The nonce for the injected splitter cursor stylesheet.
`onCollapse`		`(details: ExpandCollapseDetails) => void` Function called when a panel is collapsed.
`onExpand`		`(details: ExpandCollapseDetails) => void` Function called when a panel is expanded.
`onResize`		`(details: ResizeDetails) => void` Function called when the splitter is resized.
`onResizeEnd`		`(details: ResizeEndDetails) => void` Function called when the splitter resize ends.
`onResizeStart`		`() => void` Function called when the splitter resize starts.
`size`		`number[]` The controlled size data of the panels

Panel

Prop	Default	Type
`id`*		`string`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.

ResizeTrigger

Prop	Default	Type
`id`*		`${string}:${string}`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`		`boolean`