Shadcn
Resizable 可调整面板
允许用户拖动分隔线调整相邻面板尺寸。
Preview
播放列表
歌词详情
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@scopify/ui/shadcn/components/resizable"
export default function ResizableDemo() {
return (
<ResizablePanelGroup
orientation="horizontal"
className="max-w-sm rounded-lg border"
>
<ResizablePanel defaultSize="50%">
<div className="flex h-[200px] items-center justify-center p-6">
<span className="font-semibold">One</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize="50%">
<ResizablePanelGroup orientation="vertical">
<ResizablePanel defaultSize="25%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Two</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize="75%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Three</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
)
}
About
The Resizable component is built on top of react-resizable-panels by bvaughn.
Scopify 说明
本页按 shadcn/ui 官方 Radix UI 组件文档的章节与示例完整整理。示例预览使用 Scopify 当前的 @scopify/ui/shadcn 实现；导入路径、主题 Token 和行为差异以本仓库源码为准。
Installation
npx shadcn@latest add resizableUsage
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@scopify/ui/shadcn/components/resizable"<ResizablePanelGroup orientation="horizontal">
<ResizablePanel>One</ResizablePanel>
<ResizableHandle />
<ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>Composition
Use the following composition to build a ResizablePanelGroup:
ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanelVertical
Use orientation="vertical" for vertical resizing.
Preview
播放列表
歌词详情
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@scopify/ui/shadcn/components/resizable"
export function ResizableVertical() {
return (
<ResizablePanelGroup
orientation="vertical"
className="min-h-[200px] max-w-sm rounded-lg border"
>
<ResizablePanel defaultSize="25%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Header</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize="75%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Content</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
)
}
Handle
Use the withHandle prop on ResizableHandle to show a visible handle.
Preview
播放列表
歌词详情
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@scopify/ui/shadcn/components/resizable"
export default function ResizableHandleDemo() {
return (
<ResizablePanelGroup
orientation="horizontal"
className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
>
<ResizablePanel defaultSize="25%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Sidebar</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize="75%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Content</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
)
}
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Preview
播放列表
歌词详情
"use client"
import * as React from "react"
import {
useTranslation,
type Translations,
} from "@/components/language-selector"
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/styles/radix-nova/ui-rtl/resizable"
const translations: Translations = {
en: {
dir: "ltr",
values: {
one: "One",
two: "Two",
three: "Three",
},
},
ar: {
dir: "rtl",
values: {
one: "واحد",
two: "اثنان",
three: "ثلاثة",
},
},
he: {
dir: "rtl",
values: {
one: "אחד",
two: "שניים",
three: "שלושה",
},
},
}
export function ResizableRtl() {
const { dir, t } = useTranslation(translations, "ar")
return (
<ResizablePanelGroup
orientation="horizontal"
className="max-w-sm rounded-lg border"
dir={dir}
>
<ResizablePanel defaultSize="50%">
<div className="flex h-[200px] items-center justify-center p-6">
<span className="font-semibold">{t.one}</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize="50%">
<ResizablePanelGroup orientation="vertical" dir={dir}>
<ResizablePanel defaultSize="25%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">{t.two}</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize="75%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">{t.three}</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
)
}
API Reference
See the react-resizable-panels documentation.
Changelog
2025-02-02 react-resizable-panels v4
Updated to react-resizable-panels v4. See the v4.0.0 release notes for full details.
If you're using react-resizable-panels primitives directly, note the following changes:
| 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 |
The shadcn/ui wrapper components (ResizablePanelGroup, ResizablePanel,
ResizableHandle) remain unchanged.