Resizable

Resizable component - layout component supporting drag-to-resize panels

案例展示

可调整大小面板在实际场景中的使用示例

代码编辑器布局

Explorer

📁 src

📄 index.ts

📄 app.tsx

📁 public

📄 package.json

// Code editor area

仪表盘面板

Header / Stats

Chart A

Chart B

分割方向

不同的分割方向

Horizontal (水平分割)

Panel A

Panel B

Vertical (垂直分割)

Panel A

Panel B

手柄样式

有无手柄的分隔条

Without Handle (无手柄)

Left

Right

With Handle (有手柄)

Left

Right

自定义手柄样式

通过自定义组件实现不同的手柄样式

圆点手柄 (Dots)

Panel A

Panel B

线条手柄 (Lines)

Panel A

Panel B

方块手柄 (Square)

Panel A

Panel B

宽手柄区域 (Wide Handle)

Panel A

Panel B

垂直分割的自定义手柄

Top Panel

Bottom Panel

多面板布局

三个或更多面板的布局示例

三面板水平布局

Sidebar

Main Content

Details

复杂嵌套布局

Navigator

📁 Components

📁 Pages

📁 Utils

Editor

$ npm run dev

Ready on port 3000

Properties

Width100%

Heightauto