ResizablePanels

仕切りをドラッグするか矢印キーで動かして、2 枚のパネルの大きさを分ける

インポート

ts
import { ResizablePanels } from '@k8ordo/ui';

使い方

value は 1 枚目が占める割合（%）で、2 枚目は残りを取ります。根は親いっぱいに広がるので、親に大きさを与えてください（縦に分けるなら高さが要ります）。仕切りはフォーカスでき、矢印キーは画面上の向きのとおりに動かし、Home / End で min / max の端へ移ります。右から左の言語では 1 枚目が右に付くので、ArrowLeft で広がります。並びは文字の行に沿うので、縦書きの中では orientation="horizontal" が上下に並びます。

Sidebar

Content

tsx
<div className="h-48">
  <ResizablePanels.Root defaultValue={30}>
    <ResizablePanels.Panel>Sidebar</ResizablePanels.Panel>
    <ResizablePanels.Handle />
    <ResizablePanels.Panel>Content</ResizablePanels.Panel>
  </ResizablePanels.Root>
</div>

上下に分ける

orientation="vertical" は 2 枚を上下に並べます。仕切りは上下の矢印キーで動き、値は上のパネルが高さに占める割合です。

Editor

Terminal

tsx
<div className="h-48">
  <ResizablePanels.Root orientation="vertical">
    <ResizablePanels.Panel>Editor</ResizablePanels.Panel>
    <ResizablePanels.Handle />
    <ResizablePanels.Panel>Terminal</ResizablePanels.Panel>
  </ResizablePanels.Root>
</div>

仕切りの名前

仕切りの値は 1 枚目の大きさなので、名前も 1 枚目に合わせます。1 枚目に見出しがあれば aria-labelledby で指してください。指さなければ辞書の resizablePanelsHandle を使います。

Files

Preview

tsx
<ResizablePanels.Root defaultValue={30}>
  <ResizablePanels.Panel>
    <h2 id="files-heading">Files</h2>
  </ResizablePanels.Panel>
  <ResizablePanels.Handle aria-labelledby="files-heading" />
  <ResizablePanels.Panel>Preview</ResizablePanels.Panel>
</ResizablePanels.Root>

制御モード

onChange はドラッグの間も割合を受け取ります。キーボードでは step ずつ動きます。

Sidebar: 30%

Sidebar

Content

tsx
const [size, setSize] = useState(30);

<ResizablePanels.Root onChange={setSize} value={size}>
  …
</ResizablePanels.Root>

Props

ResizablePanels.Root

children?
Type: ReactNode
Default: -
defaultValue?
Type: number
Default: 50
max?
Type: number
Default: 90
min?
Type: number
Default: 10
onChange?
Type: (value: number) => void
Default: -
orientation?
Type: 'horizontal'|'vertical'
Default: 'horizontal'
ref?
Type: Ref<HTMLDivElement>
Default: -
step?
Type: number
Default: 5
value?
Type: number
Default: -

型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLDivElement>

ResizablePanels.Panel

children?
Type: ReactNode
Default: -
ref?
Type: Ref<HTMLDivElement>
Default: -

型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLDivElement>

ResizablePanels.Handle

型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLDivElement>

このコンポーネントが描画する文言（ラベルやプレースホルダーなど）は、propsで指定しないとき文言辞書から解決されます。差し替え方は次を参照してください: i18n

Components