Resizable 可调整面板
允许用户通过拖拽调整容器大小的组件，支持 2D 调整、比例锁定以及面板分割。
基础用法
支持在水平或垂直方向上调整大小，也可以在多个方向上同时调整。
Basic Resizable
300px x 200px
Example
锁定比例
通过设置 lock-aspect-ratio 属性可以锁定调整时的宽高比。
16:9 (300 x 169)
Example
面板分割
结合 BrResizableSplit 和 BrResizableSplitPane 可以创建多面板分割布局。
Example
与表格组件集成
Resizable 组件可以轻松与表格组件集成，实现自适应宽度和高度的数据网格。
Resizable Table Card
ID | Name | Role |
|---|---|---|
| 1 | John Doe | Developer |
| 2 | Jane Smith | Designer |
| 3 | Mike Johnson | Manager |
Example
与卡片组件集成
将卡片放入可调整大小的容器中，并利用卡片内部的滚动区域来展示更多内容。
Resizable Card
Drag the handle to resize this card component.
This is a card component nested inside a resizable container. Notice how the card header stays fixed while the content area scrolls if it overflows.
You can integrate the Resizable component with almost any other UI element to create dynamic layouts.
Example
API
Resizable Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| as | 渲染的 HTML 标签 | string | 'div' |
| width / v-model:width | 容器宽度 | number | string | - |
| height / v-model:height | 容器高度 | number | string | - |
| minWidth | 最小宽度 | number | 0 |
| maxWidth | 最大宽度 | number | Infinity |
| minHeight | 最小高度 | number | 0 |
| maxHeight | 最大高度 | number | Infinity |
| directions | 允许调整的方向 | ('top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right')[] | ['right', 'bottom', 'bottom-right'] |
| lockAspectRatio | 锁定宽高比，可传布尔值（锁定初始比例）或具体数字比例 | boolean | number | false |
| grid | 对齐网格大小，可传单数字或 [x, y] 数组 | number | [number, number] | 1 |
| step | 键盘调整时的步长 | number | 10 |
| disabled | 是否禁用 | boolean | false |
Resizable Emits
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:width | 宽度改变时触发 | (width: number) => void |
| update:height | 高度改变时触发 | (height: number) => void |
| resizeStart | 开始调整时触发 | (event: { width: number; height: number; direction: string }) => void |
| resize | 调整过程中触发 | (event: { width: number; height: number; direction: string }) => void |
| resizeEnd | 结束调整时触发 | (event: { width: number; height: number; direction: string }) => void |
ResizableHandle Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| direction | 手柄控制的方向（非 Split 模式使用） | string | - |
| split | 是否作为 Split 模式的手柄 | boolean | false |
| withHandle | Split 模式下是否显示内置图标 | boolean | false |
ResizableSplit Props
基于 radix-vue 的 SplitterGroup，透传其所有属性。
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| direction | 分割方向 | 'horizontal' | 'vertical' | - |
ResizableSplitPane Props
基于 radix-vue 的 SplitterPanel，透传其所有属性。
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| defaultSize | 默认尺寸百分比 | number | - |
| minSize | 最小尺寸百分比 | number | 0 |
| maxSize | 最大尺寸百分比 | number | 100 |