跳到主要内容

页面交互组件

页面导航组件用于实现多页面之间的切换和导航。


导航栏

横向或纵向排列的页签式导航栏,与子页面容器配合实现多页面切换。

典型场景: 底部 Tab 导航、侧边菜单栏、多工艺段切换导航。

用法:

  • 配置多个导航项,每项对应一个目标子页面容器和目标页面
  • 点击导航项后,关联的子页面容器切换到对应页面
  • 当前激活页面的导航项自动高亮(独立的背景色、文字颜色、边框)
  • 支持水平和垂直排列方向
  • 导航项溢出时支持拖拽滚动浏览
  • 每个导航项可设置操作权限等级,无权限的项自动隐藏

导航栏


导航按钮

独立的导航触发按钮,点击后跳转到指定子页面容器中的目标页面。

典型场景: 流程图节点跳转、"查看详情"按钮、页面内局部区域切换。

用法:

  • 配置目标子页面容器和目标页面
  • 支持多种矢量面形状(矩形、圆角矩形、圆形、三角形、四边形、带箭头矩形)
  • 按钮有激活态和默认态两种外观(独立的背景色、文字颜色、阴影)
  • 支持图标+文字组合显示,可选仅图标、仅文字、或图标+文字
  • 支持水平/垂直布局
  • 未配置目标时按钮自动禁用

导航按钮


窗口按钮

点击后以弹窗形式打开指定页面,不下发数据,纯导航用途。

典型场景: 打开设备详情弹窗、参数配置弹窗。

用法:

  • 配置目标页面,点击后以模态弹窗/抽屉形式打开
  • 弹窗中渲染目标页面的全部画布内容
  • 支持图标+文字组合显示,可选仅图标、仅文字、或图标+文字
  • 可设置文字大小、颜色和图标大小
  • 支持操作权限等级控制
  • 未配置目标页面时按钮自动禁用

窗口按钮


子页面容器

在主页面中嵌入其他页面画布内容的容器组件,是多页面导航的核心载体。

典型场景: 底部 Tab 对应的内容区域、左侧导航对应的右侧内容区、仪表盘中嵌入子模块。

用法:

  • 配置目标页面,容器内渲染该页面的全部元素和编组
  • 与导航栏或导航按钮配合,实现点击导航项切换容器内显示的页面
  • 支持绑定分页器,由分页器控制当前显示的页面
  • 支持拖拽滚动浏览容器内容
  • 支持多级嵌套(最大深度 8 层)
  • 容器可设置背景色、边框和圆角

子页面容器


翻页器

为子页面容器、状态表、数据点组件及中继器编组提供翻页控制。

典型场景: 子页面容器的多页切换、数据点卡片的翻页浏览、表格翻页。

用法:

  • 关联目标子页面容器或中继器编组
  • 显示首页/上一页/下一页/末页按钮
  • 可显示页码按钮,点击直接跳转到指定页
  • 可显示当前页码标签和跳转输入框
  • 子页面容器模式下自动切换为循环翻页模式(上一页/下一页循环)
  • 可配置最大可见页码按钮数量,超出部分用省略号表示

翻页器