数据组件版本 0.1.0

ResizablePanels 可调面板

允许用户拖动或使用键盘调整两个相邻工作区的空间比例。

使用概览

邮件列表

邮件正文

正在加载示例…

本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。

pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/resizable-panels.json

import { ResizablePanels } from "@richardqiu/quartz/resizable-panels";

<ResizablePanels aria-label="邮件工作区" resizeLabel="调整列表与正文宽度" defaultSizes={[35, 65]}><div>邮件列表</div><div>邮件正文</div></ResizablePanels>

默认

键盘焦点可见

已禁用

label · textactive · boolean

属性	类型	默认值	说明
`defaultSizes`	`readonly [number, number]`	`[50, 50]`	设置两个面板首次渲染时的百分比尺寸。
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	决定分隔器调整左右宽度还是上下高度。