WSplitter 组件
分隔面板组件,基于 WinDesignNext Splitter 封装,将区域分割为可拖拽调整大小的多个面板,适用于主从布局、上下分栏等场景。
子组件:
WSplitterPanel为面板项,需在WSplitter.children中引用。
基础用法
WSplitter API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
component | string | WSplitter | 组件类型(必填) |
layout | string | horizontal | horizontal / vertical |
lazy | boolean | false | 拖拽懒更新 |
children | string[] | — | WSplitterPanel 子组件 ID 列表 |
action | Action | — | 拖拽/折叠事件 |
WSplitterPanel API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
component | string | WSplitterPanel | 组件类型(必填) |
size | DataBindingValue | — | 初始尺寸(如 30%、200px) |
min / max | DataBindingValue | — | 最小/最大尺寸 |
title | DataBindingValue | — | 面板标题 |
resizable | boolean | true | 是否可拖拽 |
collapsible | boolean | false | 是否可折叠 |
children | string[] | — | 面板内容子组件 |
path 支持说明
| 组件 | 支持 path 的属性 |
|---|---|
WSplitterPanel | size, min, max, title |
典型结构
json
{
"id": "splitter_main",
"component": "WSplitter",
"layout": "horizontal",
"style": { "height": "400px" },
"children": ["panel_left", "panel_right"]
}json
{
"id": "panel_left",
"component": "WSplitterPanel",
"size": { "literalString": "30%" },
"collapsible": true,
"children": ["left_card"]
}注意事项
- 需为
WSplitter或其外层容器设置 高度(如style: { height: '400px' }),否则垂直布局无法正常展示 WSplitterPanel必须作为WSplitter的直接子组件(通过children引用)