跳到主要内容

Step 容器

Step 容器以步骤条引导用户按顺序查看或填写多个步骤，每个步骤对应一个布局列，点击步骤条切换显示对应内容。

概述​

将「Step 容器」拖入画布后，默认生成三个步骤（Step1、Step2、Step3）。在属性抽屉中可以：

  • 设置步骤条的展示形态、标题位置、尺寸与方向。
  • 新增、删除步骤并拖拽排序。
  • 为每个步骤配置图标与标题，并可进一步设置副标题与描述。

每个步骤内部是一个布局列，可将任意组件拖入步骤内容区。页面运行时点击步骤条即切换内容，且只渲染当前激活步骤。

配置项​

配置项说明
展示形态步骤条形态：默认 / 导航 / 内联 / 面板 / 点状
标题位置标题相对图标的位置：水平 / 垂直
尺寸步骤条尺寸：默认 / 小
方向步骤条排列方向：水平 / 垂直
配置步骤以列表方式管理步骤：拖拽排序、编辑标题、选择图标、设置详情、删除、新增

步骤详情​

点击步骤行右侧的设置按钮，可配置该步骤的副标题（SubTitle）与描述（Description），二者展示在步骤条标题下方。

使用建议​

  1. 步骤条适合「提交申请 → 审核 → 完成」这类有序流程的展示。
  2. 方向设为垂直时更适配步骤标题较长的场景，可避免横向拥挤。

下一步​

属性明细​

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

属性表​

属性名类型含义取值/存储值
DisplayTypestring步骤条形态default（默认） / navigation / inline / panel / dot
LabelPlacementstring标题位置horizontal（默认） / vertical
Sizestring尺寸default（默认） / small
Orientationstring排列方向horizontal（默认） / vertical

Step 节点固定信息：uid = "f91eb396-5503-44da-9dda-5e3315addf18"，widgetType = "Step"，widgetTypeName = "布局步骤页"，dragType / originalType 均为 Widget。Step 无默认激活步骤键，运行时以内部索引（默认 0，即第一个步骤）为当前步骤。

子节点（步骤）属性表​

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

属性名类型含义取值/存储值
Iconstring步骤图标图标标识，空串表示无图标
Titlestring步骤标题展示文本，缺省时按 Step{序号} 兜底
SubTitlestring步骤副标题展示文本
Descriptionstring步骤描述展示文本

Step 节点存储示例​

{
  "id": "6c2a2b1a-2000-4a01-8f10-000000000020",
  "uid": "f91eb396-5503-44da-9dda-5e3315addf18",
  "dragType": "Widget",
  "originalType": "Widget",
  "widgetType": "Step",
  "widgetTypeName": "布局步骤页",
  "meta": {
    "DisplayType": "default",
    "LabelPlacement": "horizontal",
    "Size": "default",
    "Orientation": "horizontal"
  },
  "children": [
    {
      "id": "6c2a2b1a-2000-4a01-8f10-000000000021",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "Icon": "",
        "Title": "Step1",
        "SubTitle": "填写信息",
        "Description": ""
      },
      "children": []
    },
    {
      "id": "6c2a2b1a-2000-4a01-8f10-000000000022",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "Icon": "",
        "Title": "Step2",
        "SubTitle": "",
        "Description": ""
      },
      "children": []
    }
  ]
}

在页面布局中的位置​

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

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

相关接口​

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