UI Ingredients v1.6.0
Github

Splitter

A component for resizing and adjusting the size of adjacent panes or sections.

A
B

Anatomy

Usage

<script>
  import {Splitter} from 'ui-ingredients';
</script>

<Splitter.Root
  panels={[
    {
      id: 'a',
      minSize: 25,
    },
    {
      id: 'b',
      minSize: 25,
    },
  ]}
  defaultSize={[50, 50]}
>
  <Splitter.Panel id="a">A</Splitter.Panel>
  <Splitter.ResizeTrigger id="a:b" />
  <Splitter.Panel id="b">B</Splitter.Panel>
</Splitter.Root>

API Reference

Root

Prop Default Description
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 { 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.
orientation "horizontal" "horizontal" | "vertical" The orientation of the splitter. Can be `horizontal` or `vertical`
panels PanelData[] The size constraints of the panels.
size number[] The controlled size data of the panels
asChild Snippet Render a different element.
Data Attribute Value
data-orientation The orientation of the splitter
data-part root
data-scope splitter

Panel

Prop Default Description
id PanelId
asChild Snippet Render a different element.
Data Attribute Value
data-id
data-index The index of the item
data-orientation The orientation of the panel
data-part panel
data-scope splitter

ResizeTrigger

Prop Default Description
id string
asChild Snippet Render a different element.
Data Attribute Value
data-disabled Present when disabled
data-focus Present when focused
data-id
data-orientation The orientation of the resizetrigger
data-part resize-trigger
data-scope splitter

Accessibility

Keyboard Support

Previous Slider
Next Steps