# @alisowski/react-resizable-panels 中文文档

规范地址：https://npmcn.com/package/%40alisowski/react-resizable-panels/

版本：0\.1\.27
npm 元数据更新时间：2024-08-06T23:47:51.259Z
中文译文更新时间：2026-11-06T00:45:51.314Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40alisowski/react-resizable-panels
原文对照：https://npmcn.com/package/%40alisowski/react-resizable-panels/?lang=original
项目主页：https://github.com/bvaughn/react-resizable-panels#readme
源码仓库：https://github.com/bvaughn/react-resizable-panels

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：856 kB，57 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^16\.14\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0，react-dom ^16\.14\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0
- 首次发布：2023-10-13T22:48:37.601Z
- 最新版本发布：2024-08-06T23:47:51.050Z
- 近 30 天下载量：7863（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：24（近 12 个月 0 个）

## 中文简介

可调整面板组/放电的响应组件

## 安装

```sh
npm install @alisowski/react-resizable-panels
```

也可以使用：`pnpm add @alisowski/react-resizable-panels`、`yarn add @alisowski/react-resizable-panels`、`bun add @alisowski/react-resizable-panels`

## README

# 反应-可逆小板

可调整面板组/放电的响应组件

```jsx
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";

<PanelGroup autoSaveId="example" direction="horizontal">
  <Panel defaultSize={25}>
    <SourcesExplorer />
  </Panel>
  <PanelResizeHandle />
  <Panel>
    <SourceViewer />
  </Panel>
  <PanelResizeHandle />
  <Panel defaultSize={25}>
    <Console />
  </Panel>
</PanelGroup>
```

### 如果你喜欢这个项目的话,.. [成为提案人](https://github.com/sponsors/bvaughn/) 或 ☕ [给我买杯咖啡](http://givebrian.coffee/)

## 道具

### `PanelGroup`

| 道具 | 类型 | 说明 |
| :-- | :-- | :-- |
| `autoSaveId` | `?string` | 用于通过自动保存组安排的独特 id `localStorage` |
| `children` | `ReactNode` | 任意反应元素 |
| `className` | `?string` | 要附加到根元素的类名 |
| `direction` | `"horizontal" | "vertical"` | 团体定向 |
| `disablePointerEventsDuringResize` | `?boolean = false` | 禁用内部指针事件 `Panel`s 调整大小时 2个 |
| `id` | `?string` | 组 ID; 返回到 `useId` 未提供时 |
| `onLayout` | `?(sizes: number[]) => void` | 当组布局改变时调用 |
| `storage` | `?PanelGroupStorage` | 自定义存储 API; 默认为 `localStorage` 1个 |
| `style` | `?CSSProperties` | 要附加到根元素的 CSS 样式 |
| `tagName` | `?string = "div"` | 根元素的 HTML 元素标签名称 |

1个: 存储 API 必须定义如下 _同步_ 方法:

-   `getItem: (name:string) => string`
-   `setItem: (name: string, value: string) => void`

2个: 这种行为默认被禁用, 因为它可以干扰滚动条样式, 但在边框中有用 `Panel` 包含一个 `<iframe>`

`PanelGroup` 组件还暴露了手动重塑的必需的 API :

| 方法 | 说明 |
| :-- | :-- |
| `setLayout(panelSizes: number[])` | 将面板组大小调整到指定的 _面板大小_ (单位:千美元)`[1 - 100, ...]`) (中文(简体) ). |

### `Panel`

| 道具 | 类型 | 说明 |
| :-- | :-- | :-- |
| `children` | `ReactNode` | 任意反应元素 |
| `className` | `?string` | 要附加到根元素的类名 |
| `collapsedSize` | `?number=0` | 面板应该倒塌到这个大小 |
| `collapsible` | `?boolean=false` | 扩大规模后,小组应倒闭 `minSize` |
| `defaultSize` | `?number` | 面板的初始大小(1-100之间的数值) |
| `id` | `?string` | 面板 id( 组内的独特性); 回到 `useId` 未提供时 |
| `maxSize` | `?number = 100` | 最大允许面板大小(1-100之间的数值);默认为 `100` |
| `minSize` | `?number = 10` | 面板最小允许大小(数值在1-100之间);默认为 `10` |
| `onCollapse` | `?(collapsed: boolean) => void` | 当面板倒塌时呼叫; `collapsed` 反映新状态的布尔参数 |
| `onResize` | `?(size: number) => void` | 调整面板大小时调用; `size` 参数是1-100之间的数值. 1个 |
| `order` | `?number` | 集团内小组的顺序;有条件的小组所需 |
| `style` | `?CSSProperties` | 要附加到根元素的 CSS 样式 |
| `tagName` | `?string = "div"` | 根元素的 HTML 元素标签名称 |

1个: 如果有的话 `Panel` 有一个 `onResize` 调回, 调回 `order` 应当为所有人提供道具 `Panel`编号.

`Panel` 组件还暴露了手动重塑的必需的 API :

| 方法 | 说明 |
| :-- | :-- |
| `collapse()` | 如果面板是 `collapsible`完全崩溃. |
| `expand()` | 如果当前是面板 _崩溃_,将其扩展至最近的规模. |
| `getCollapsed(): boolean` | 回返 `true` 如果面板是当前 _崩溃_ (单位:千美元)`size === 0`) (中文(简体) ). |
| `getSize(): number` | 返回最近承诺的面板大小的百分比(`1 - 100`) (中文(简体) ). |
| `resize(percentage: number)` | 将面板大小调整到指定的 _百分比_ (单位:千美元)`1 - 100`) (中文(简体) ). |

### `PanelResizeHandle`

| 道具 | 类型 | 说明 |
| :-- | :-- | :-- |
| `children` | `?ReactNode` | 自定义拖曳 UI; 可以是任意反应元素 |
| `className` | `?string` | 要附加到根元素的类名 |
| `disabled` | `?boolean` | 禁用拖动手柄 |
| `id` | `?string` | 调整手柄 ID( 组内的独特性); 返回到 `useId` 未提供时 |
| `onDragging` | `?(isDragging: boolean) => void` | 当组布局改变时调用 |
| `style` | `?CSSProperties` | 要附加到根元素的 CSS 样式 |
| `tagName` | `?string = "div"` | 根元素的 HTML 元素标签名称 |

* * *

#### 如果你喜欢这个项目, [给我买杯咖啡](http://givebrian.coffee/)。 。 。 .

## 常见问题

### @alisowski/react-resizable-panels 是什么？

可调整面板组/放电的响应组件

### 如何安装 @alisowski/react-resizable-panels？

在项目目录运行 npm install @alisowski/react-resizable-panels，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.14\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0）、react-dom（^16\.14\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @alisowski/react-resizable-panels 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @alisowski/react-resizable-panels 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @alisowski/react-resizable-panels 可以商用吗？

@alisowski/react-resizable-panels 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @alisowski/react-resizable-panels 的下载量有多少？

根据 npm 官方下载统计，@alisowski/react-resizable-panels 在 2026/10/06 – 2026/11/04 这 30 天内被下载 7,863 次，日均约 262 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @alisowski/react-resizable-panels 还在维护吗？

最新版本 0\.1\.27 发布于 2024/08/07（2 年前）；至今共发布 24 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/10/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。