For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/splitter.md.
Leaf UI
  • English

      • Splitter

      Resize panels in a workspace.

      Basic usage

      Navigation — drag the divider or use arrow keys.
      Workspace
      basic.tsx
      import { Splitter } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function SplitterBasic() {
  const [sizes, setSizes] = useState<readonly number[]>([35, 65]);
  return (
    <Splitter
      style={{ height: 220 }}
      sizes={sizes}
      onResize={setSizes}
      panels={[
        {
          key: 'navigation',
          min: 20,
          max: 55,
          collapsible: true,
          children: (
            <div style={{ padding: 16 }}>
              {'Navigation — drag the divider or use arrow keys.'}
            </div>
          ),
        },
        {
          key: 'content',
          min: 30,
          children: <div style={{ padding: 16 }}>{'Workspace'}</div>,
        },
      ]}
    />
  );
}

      Vertical panels

      Editor
      Output
      basic.tsx
      import { Splitter } from '@ifhover/leaf-ui';

export function SplitterVertical() {
  return (
    <Splitter
      direction="vertical"
      style={{ height: 240 }}
      defaultSizes={[60, 40]}
      panels={[
        {
          key: 'editor',
          min: 25,
          children: <div style={{ padding: 16 }}>{'Editor'}</div>,
        },
        {
          key: 'output',
          min: 15,
          children: <div style={{ padding: 16 }}>{'Output'}</div>,
        },
      ]}
    />
  );
}

      SplitterPanel

      PropertyTypeDefaultDescription
      keystring—Required. Stable, unique identifier.
      childrenReactNode—Required. Content, or child nodes for hierarchical records.
      minnumber—Minimum panel percentage.
      maxnumber—Maximum panel percentage.
      collapsibleboolean—Allow collapsing and restoring a panel.
      resizableboolean—Allow resizing by dragging or arrow keys.

      Splitter API

      PropertyTypeDefaultDescription
      panelsreadonly SplitterPanel[]—Required. Workspace panels.
      sizesreadonly number[]—Controlled panel proportions, normalized to 100.
      defaultSizesreadonly number[]—Initial panel proportions.
      onResize(sizes: number[]) => void—Called while resizing.
      onResizeEnd(sizes: number[]) => void—Called when resizing ends.
      direction'horizontal' | 'vertical''horizontal'Arrange panels horizontally or vertically.

      Types and interaction

      Import the props and data types when creating reusable configuration.

      import type { SplitterPanel, SplitterProps } from '@ifhover/leaf-ui';

      Provide accessible labels for icon-only actions. Interactive controls support keyboard navigation and respect ConfigProvider themes and reduced motion.