WCol 组件

A2UI Protocol JSON Schema

列布局容器组件，基于 WinDesignNext WCol 封装，配合 WRow 使用实现栅格布局。

基础用法

Props API

属性名	类型	默认值	说明
id	string	-	组件唯一标识（必填）
component	string	WCol	组件类型（必填）
span	number	12	栅格占据的列数（总共 24 列）
tag	string	div	自定义元素标签
children	string[]	-	子组件 ID 列表

path 支持说明

该组件属性均为静态配置，不支持 path 绑定。动态变更请使用 updateDataModel 或 updateProp。

详见 path 数据绑定速查。

使用示例

基础用法

{
  "id": "col_001",
  "component": "WCol",
  "span": 6,
  "children": ["button_001"]
}

配合 WRow 实现三栏布局

[
  {
    "id": "row_main",
    "component": "WRow",
    "gutter": 20,
    "children": ["col_left", "col_center", "col_right"]
  },
  {
    "id": "col_left",
    "component": "WCol",
    "span": 6,
    "children": ["text_left"]
  },
  {
    "id": "col_center",
    "component": "WCol",
    "span": 12,
    "children": ["text_center"]
  },
  {
    "id": "col_right",
    "component": "WCol",
    "span": 6,
    "children": ["text_right"]
  }
]

---

与 WRow 配合

WCol 必须作为 WRow 的子组件使用：

WRow (gutter: 20)
  ├── WCol (span: 6)  → 25% 宽度
  ├── WCol (span: 8)  → 33% 宽度
  └── WCol (span: 10) → 42% 宽度