Resizable

キーボード操作に対応した、アクセシブルなサイズ変更可能なパネルグループとレイアウト。

import {
  ResizableHandle,
  ResizablePanel,

概要

Resizable コンポーネントは、bvaughn によって react-resizable-panels の上に構築されています。

インストール


pnpm dlx shadcn@latest add resizable

使い方

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

構成

次の構成を使用して、ResizablePanelGroup を構築します。

ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel

垂直

垂直方向のサイズ変更には orientation="vertical" を使用します。

ヘッダー

コンテンツ

import {
  ResizableHandle,
  ResizablePanel,

ハンドル

ResizableHandle の withHandle プロップを使用すると、ハンドルを表示できます。

サイドバー

コンテンツ

import {
  ResizableHandle,
  ResizablePanel,

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

واحد

اثنان

ثلاثة

"use client"

import * as React from "react"

API リファレンス

詳細については、react-resizable-panels のドキュメントを参照してください。

変更履歴

2025-02-02 `react-resizable-panels` v4

react-resizable-panels v4 に更新されました。詳細については、v4.0.0 リリースノートを参照してください。

react-resizable-panels のプリミティブを直接使用している場合は、以下の変更点に注意してください。

v3	v4
`PanelGroup`	`Group`
`PanelResizeHandle`	`Separator`
`direction` prop	`orientation` prop
`defaultSize={50}`	`defaultSize="50%"`
`onLayout`	`onLayoutChange`
`ImperativePanelHandle`	`PanelImperativeHandle`
`ref` prop on Panel	`panelRef` prop
`data-panel-group-direction`	`aria-orientation`

shadcn/ui のラッパーコンポーネント（ResizablePanelGroup、ResizablePanel、 ResizableHandle）は変更されていません。

Radio Group Scroll Area

On This Page

概要インストール使い方構成垂直ハンドル RTL API リファレンス変更履歴 2025-02-02 react-resizable-panels v4

shadcn/uiアプリをVercelにデプロイ

OpenAI、Sonos、Adobeなどに採用されています。

Vercelは、アプリや機能を大規模にデプロイするためのツールとインフラを提供します。