Splitter

    Resizable split panels for creating adjustable multi-pane layouts.

    When to Use

    • To divide content into resizable sections (e.g., code editor + preview)
    • For side-by-side comparisons with adjustable widths
    • To create dashboard panels that users can resize

    Import

    import { Splitter } from "orizon";

    Examples

    Horizontal Splitter

    Drag the divider to resize panels.

    Panel 1
    Panel 2
    <Splitter>
  <Splitter.Panel defaultSize="50%">
    <div>Panel 1</div>
  </Splitter.Panel>
  <Splitter.Panel>
    <div>Panel 2</div>
  </Splitter.Panel>
</Splitter>

    Vertical Splitter

    Set layout="vertical" for top/bottom panels.

    Top Panel
    Bottom Panel
    <Splitter layout="vertical">
  <Splitter.Panel defaultSize="40%">Top Panel</Splitter.Panel>
  <Splitter.Panel>Bottom Panel</Splitter.Panel>
</Splitter>

    Three Panels

    Multiple panels can be arranged together.

    Left
    Center
    Right
    <Splitter>
  <Splitter.Panel defaultSize="30%">Left</Splitter.Panel>
  <Splitter.Panel defaultSize="40%">Center</Splitter.Panel>
  <Splitter.Panel>Right</Splitter.Panel>
</Splitter>

    With Min/Max Constraints

    Limit how far panels can be resized.

    Min 20% / Max 80%
    Flexible
    <Splitter>
  <Splitter.Panel defaultSize="50%" min="20%" max="80%">
    Min 20% / Max 80%
  </Splitter.Panel>
  <Splitter.Panel>Flexible</Splitter.Panel>
</Splitter>

    Collapsible

    Panels can be collapsed to their minimum size.

    Collapsible Panel
    Fixed Panel
    <Splitter>
  <Splitter.Panel defaultSize="50%" collapsible>
    Collapsible Panel
  </Splitter.Panel>
  <Splitter.Panel>Fixed Panel</Splitter.Panel>
</Splitter>

    API

    SplitterProps

    • layout — "horizontal" | "vertical" — Split direction (default: "horizontal")
    • lazy — boolean — Lazy render panels during resize (default: false)
    • onResize — (sizes: number[]) => void — Callback during resize
    • onResizeStart — (sizes: number[]) => void — Callback when resize starts
    • onResizeEnd — (sizes: number[]) => void — Callback when resize ends
    • className — string — Custom CSS class
    • style — CSSProperties — Inline styles

    Splitter.Panel Props

    • defaultSize — number | string — Initial panel size
    • min — number | string — Minimum panel size
    • max — number | string — Maximum panel size
    • collapsible — boolean — Whether panel can be collapsed (default: false)
    • resizable — boolean — Whether panel can be resized (default: true)
    • className — string — Custom CSS class
    • style — CSSProperties — Inline styles