# @data-slot/resizable 中文文档 规范地址：https://npmcn.com/package/%40data-slot/resizable/ 版本：1\.1\.3 npm 元数据更新时间：2026-11-05T12:22:52.449Z 中文译文更新时间：2026-11-11T13:13:03.075Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40data-slot/resizable 原文对照：https://npmcn.com/package/%40data-slot/resizable/?lang=original 项目主页：https://github.com/bejamas/data-slot#readme 源码仓库：https://github.com/bejamas/data-slot ## 关键信息（来自 npm 元数据） - 包体积（解压后）：37.1 kB，6 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：1 个 - 首次发布：2026-09-24T11:08:28.201Z - 最新版本发布：2026-11-05T12:22:52.082Z - 近 30 天下载量：6925（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：7（近 12 个月 7 个） ## 中文简介 香草JavaScript的无头可调整面板组. 无障碍而无作相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相. ## 安装 ```sh npm install @data-slot/resizable ``` 也可以使用：`pnpm add @data-slot/resizable`、`yarn add @data-slot/resizable`、`bun add @data-slot/resizable` ## README # @ data- slot/ resizable (中文(简体) ) 香草JavaScript的无头可调整面板组. 无障碍而无作相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相. 灵感来自 [反应-可逆小板](https://github.com/bvaughn/react-resizable-panels) 这样shadcn/ui-tyle组件库就可以把它作为滴入的原始. ## 安装 ```bash npm install @data-slot/resizable ``` ## 快速启动 ```html
Left
Right
``` ## API 密码 ### 初始化 #### `create(scope?)` 在一个范围内自动发现并约束所有可迁移的组(默认为 `document`) (中文(简体) ). ```typescript import { create } from "@data-slot/resizable"; const controllers = create(); // Returns ResizableController[] ``` #### `createResizable(root, options?)` 为特定元素创建控制器. ```typescript import { createResizable } from "@data-slot/resizable"; const resizable = createResizable(element, { direction: "horizontal", keyboardResizeBy: 10, onLayoutChange: (layout) => console.log(layout), }); ``` ### 槽数 | 槽 | 说明 | | --- | --- | | `resizable` | 组的根弹性容器 | | `resizable-panel` | 具有百分比大小的面板 | | `resizable-handle` | 相邻面板之间的可焦点分隔符 | ```html
A
B
``` 组至少需要一个 `resizable-panel`,准确的说是一个 `resizable-handle` 在相邻的相邻的相片之间. ### 数据属性 选项也可以通过数据属性设定. 联合来文的选择优先. 根上为: | 属性 | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `data-direction` | 字符串 | `horizontal` | 布局轴 | | `data-keyboard-resize-by` | 编号 | `10` | 每个箭头按键压移动百分比 | 每个 `resizable-panel`数字 : | 属性 | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `data-default-size` | 编号 | 甚至是分开 | 初始规模(%) | | `data-min-size` | 编号 | `0` | 最小规模(%) | | `data-max-size` | 编号 | `100` | 最大规模(%) | | `data-collapsible` | 布尔 | `false` | 窗帘会倒塌 | | `data-collapsed-size` | 编号 | `0` | 倒塌时的大小(%) | 小组的规模和限制必须在0至100之间. `minSize` 不得超过 `maxSize`和相撞面板的 `collapsedSize` 不得超过 `minSize`。 。 。 . 限制必须允许布局总计100%;如果是初始化,则投出 无法。 相撞面板可占据已倒塌的大小或相撞面板之间的任何大小 它的最小和最大. ### 选项 | 选项 | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `direction` | `"horizontal" | "vertical"` | `"horizontal"` | 布局轴 | | `keyboardResizeBy` | `number` | `10` | 每个箭头按键压移动百分比 | | `onLayoutChange` | `(layout: number[]) => void` | `undefined` | 当布局改变时调用 | ### 主计长 平板指数从零开始. `setLayout()` 需要一个有限、非负数 每个面板和一个正总数; 它使值正常化为100%,并应用 面板限制。 不改变当前布局而丢出无效的布局 . `resizePane()` 需要一定的尺寸。 指数突变方法和 `getSize()` 丢入无效的窗格索引. | 方法/财产 | 说明 | | --- | --- | | `layout` | 当前布局为 `number[]` 百分比(只读) | | `setLayout(sizes)` | 设置完整布局( 验证/ 声明) | | `resizePane(index, size)` | 将窗格大小调整为 `size`百分比(%) | | `collapse(index)` | 折叠可折叠的窗格 | | `expand(index)` | 扩展已倒塌的窗格 | | `isCollapsed(index)` | 窗帘是否崩溃 | | `isExpanded(index)` | 是否扩展窗格 | | `getSize(index)` | 当前窗格的大小(%) | | `destroy()` | 清理所有听众和全局样式 | ### 活动 #### 境外事件 ```javascript element.addEventListener("resizable:change", (e) => { console.log("Layout:", e.detail.layout); }); element.addEventListener("resizable:dragging", (e) => { console.log("Dragging:", e.detail.dragging); }); ``` #### 入境事件 | 活动 | 细节 | 说明 | | --- | --- | --- | | `resizable:set` | `{ layout: number[] }` | 按程序设置布局 | ```javascript element.dispatchEvent(new CustomEvent("resizable:set", { detail: { layout: [30, 70] } })); ``` ### 样式 构成部分 `flex` 样式直接放在根和面板上。 给小组 高度和手柄为可见宽度或高度。 使用 `data-*` 属性 视觉造型 : ```css /* Style the handle */ [data-slot="resizable-handle"] { width: 4px; background: #ccc; } [data-slot="resizable"][data-direction="vertical"] [data-slot="resizable-handle"] { width: 100%; height: 4px; } /* Active drag / keyboard focus */ [data-slot="resizable-handle"][data-active] { background: #2563eb; } /* Collapsed pane */ [data-slot="resizable-panel"][data-collapsed] { opacity: 0; } ``` 于 `flex-grow` 用于动画崩溃/扩展: ```css [data-slot="resizable-panel"] { transition: flex-grow 0.2s ease; } ``` ### 键盘导航 将手柄聚焦于 `Tab` 使用这些密钥之前 : | 密钥 | 行动 | | --- | --- | | `ArrowLeft` 编号 : `ArrowRight` | 将水平组大小由 `keyboardResizeBy` (默认为10%) | | `ArrowUp` 编号 : `ArrowDown` | 在同一步骤下调整垂直组大小 | | `Shift` + 箭头键 | 移动到这个方向的极限 | | `Home` 编号 : `End` | 在限制范围内尽量减少/尽量扩大前一个小组 | | `Enter` | 当上一个面板相撞时切换崩溃 | | `F6` 编号 : `Shift` + 键 `F6` | 聚焦下一个/ 上一个手柄, 在组内包装 | ### 无障碍 该组件自动处理 : - `role="separator"` 每个手柄上 - `aria-orientation` (与布局方向相接) - `aria-controls` 将每个手柄与上一个相连接 - `aria-valuemin` 编号 : `aria-valuemax` 编号 : `aria-valuenow` 反映生活制约因素 - 唯一用于根、窗体和手柄的ID生成 给每个手柄一个可用的名称 `aria-label` 或者说 `aria-labelledby`。 。 。 . ### 行为 #### 切换输入方法 键盘调整大小和有效必要的布局更新结束 应用更改。 后续指针移动在新拖曳之前没有效果 启动。 每个文档中每次只能拖放一组. 所有输入方法都记得一个面板在倒塌前的大小. `expand()` 财务报告和审定财务报表 `Enter` 恢复这个尺寸,但受其他小组的限制. 一个最初被倒塌的面板在没有先前大小的情况下会扩展到最小大小. #### 持续布局 没有内在的持久性,但阅读和恢复分裂是一个 单线 : ```javascript import { createResizable } from "@data-slot/resizable"; const el = document.querySelector('[data-slot="resizable"]'); const saved = localStorage.getItem("layout:sidebar"); const resizable = createResizable(el, { onLayoutChange(layout) { localStorage.setItem("layout:sidebar", JSON.stringify(layout)); }, }); if (saved) resizable.setLayout(JSON.parse(saved)); ``` ## 许可证 麻省理工学院 ## 常见问题 ### @data-slot/resizable 是什么？ 香草JavaScript的无头可调整面板组\. 无障碍而无作相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相\. ### 如何安装 @data-slot/resizable？ 在项目目录运行 npm install @data-slot/resizable，或使用 pnpm add / yarn add / bun add。 ### @data-slot/resizable 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @data-slot/resizable 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @data-slot/resizable 可以商用吗？ @data-slot/resizable 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @data-slot/resizable 的下载量有多少？ 根据 npm 官方下载统计，@data-slot/resizable 在 2026/10/12 – 2026/11/10 这 30 天内被下载 6,925 次，日均约 231 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @data-slot/resizable 还在维护吗？ 最新版本 1\.1\.3 发布于 2026/11/05（6 天前）；至今共发布 7 个版本，其中过去 12 个月发布了 7 个；首次发布于 2026/09/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。