V1.0.0
Skip to content

WSplitter 组件

分隔面板组件,基于 WinDesignNext Splitter 封装,将区域分割为可拖拽调整大小的多个面板,适用于主从布局、上下分栏等场景。

子组件WSplitterPanel 为面板项,需在 WSplitter.children 中引用。

基础用法

WSplitter API

属性类型默认值说明
componentstringWSplitter组件类型(必填)
layoutstringhorizontalhorizontal / vertical
lazybooleanfalse拖拽懒更新
childrenstring[]WSplitterPanel 子组件 ID 列表
actionAction拖拽/折叠事件

WSplitterPanel API

属性类型默认值说明
componentstringWSplitterPanel组件类型(必填)
sizeDataBindingValue初始尺寸(如 30%200px
min / maxDataBindingValue最小/最大尺寸
titleDataBindingValue面板标题
resizablebooleantrue是否可拖拽
collapsiblebooleanfalse是否可折叠
childrenstring[]面板内容子组件

path 支持说明

组件支持 path 的属性
WSplitterPanelsize, 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 引用)