Skip to main content

Tab 容器

Tab 容器以页签方式组织多个内容区，每个页签对应一个布局列，用户点击页签切换显示对应内容。

概述​

将「Tab 容器」拖入画布后，默认生成两个页签（Tab1、Tab2）。在属性抽屉中可以：

  • 新增、删除页签，并通过拖拽排序调整页签顺序。
  • 直接编辑页签标题。
  • 通过星标设置默认激活的页签。
  • 绑定数据源接口，由接口动态决定展示哪些页签、其顺序与标题。

每个页签内部是一个布局列，可以将任意组件拖入页签内容区。

只渲染激活页签

页面运行时会仅渲染当前激活的页签内容，失活页签不会发起数据请求，可有效减少接口调用。

配置项​

配置项说明
配置页签以列表方式管理页签：拖拽排序、编辑标题、设为默认、删除、新增
数据源接口选择一个「组件数据源」类型的平台接口；配置后，页签的展示与排序、标题由接口返回值决定

数据源接口​

「数据源接口」用于动态控制页签。配置后：

  1. 接口返回的页签顺序与集合决定实际渲染的页签。
  2. 接口返回的标题会覆盖用户配置的页签标题。
  3. 默认激活页签的优先级为：URL 参数 / 本地缓存 > 接口返回 > 用户配置的默认页签。

如果不需要动态控制，保持该配置为空，页签即完全按布局器中的静态配置渲染。

使用建议​

  1. 页签适合承载「基本信息 / 明细 / 附件」这类同层信息的分组展示。
  2. 页签数量较多时，建议结合数据源接口按数据状态动态显隐，避免出现空页签。

下一步​

属性明细​

以下内容面向技术实现与 AI 检索，说明 Tab 容器的属性、子节点结构与存储格式。

属性表​

属性名类型含义取值/存储值
DefaultActiveTabstring(GUID)默认激活页签子节点（页签，即列节点）的 id；未配置时取第一个子节点
DefaultActiveCmpstring(GUID)运行态默认激活组件子节点 id，参与运行态默认激活优先级计算
MetaInterfaceIdstring(GUID)组件数据源接口 ID平台接口（标签为组件数据源）ID

Tab 节点固定信息：uid = "f8c226b6-7b98-45a8-8c71-abeb21e2941a"，widgetType = "Tab"，widgetTypeName = "布局Tab页"，dragType / originalType 均为 Widget。

子节点属性表​

Tab 的子节点固定为布局列（widgetType = "Column"，固定 uid = "7b9a905e-83d4-452b-83c8-694a3e0935e3"），其 meta 中：

属性名类型含义取值/存储值
Titlestring页签标题展示文本；缺省时编辑器按 Tab{序号} 兜底
meta.Title 之外-列自身的 LayoutType / Align / ItemSpace同 基础容器 的列属性表

Tab 节点存储示例​

{
  "id": "6c2a2b1a-1000-4a01-8f10-000000000010",
  "uid": "f8c226b6-7b98-45a8-8c71-abeb21e2941a",
  "dragType": "Widget",
  "originalType": "Widget",
  "widgetType": "Tab",
  "widgetTypeName": "布局Tab页",
  "meta": {
    "DefaultActiveTab": "6c2a2b1a-1000-4a01-8f10-000000000011"
  },
  "children": [
    {
      "id": "6c2a2b1a-1000-4a01-8f10-000000000011",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "Title": "基本信息",
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": []
    },
    {
      "id": "6c2a2b1a-1000-4a01-8f10-000000000012",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "Title": "明细",
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": []
    }
  ]
}

在页面布局中的位置​

Tab 的 dragType 为 Widget，因此可放在页面顶层，也可放入任意布局列中：

{
  "Layout": [
    { "widgetType": "Row", "children": [ { "widgetType": "Column", "children": [ { "widgetType": "Tab", "children": [] } ] } ] },
    { "widgetType": "Tab", "children": [] }
  ]
}

数据源接口返回结构​

配置 MetaInterfaceId 后，接口应返回 TabWidget 结构：

{
  "DefaultActiveTabCmpId": "c1a2b3c4-0002-4a2b-8c3d-1234567890ab",
  "Items": [
    { "CmpId": "c1a2b3c4-0002-4a2b-8c3d-1234567890ab", "Title": "基本信息" },
    { "CmpId": "c1a2b3c4-0003-4a2b-8c3d-1234567890ab", "Title": "明细" }
  ]
}

其中 CmpId 必须与布局中页签子节点（列节点）的 id 对应，否则该页签不会被渲染；接口返回的 Title 会覆盖列 meta.Title。

相关接口​

接口说明
POST /api/MetaPage/SaveLayout保存页面布局