Skip to main content

时间轴

1 说明

当有一系列信息按时间排列,可用时间轴组件达到视觉上的串联。

2 配置

2.1 数据源

时间轴属于数据容器,数据源和其他数据容器(例如 宫格)一致。

2.2 通用

2.2.1 时间轴方向

默认为纵向,支持:

  • 纵向
  • 横向 - 暂未支持,二期支持

选中纵向:

2.2.2 节点间最小间隔

两个节点之间的间隔距离,单位为 px,默认 100px。

将间隔设置为 200px:

2.2.3 插槽 1 比例

左右两个插槽占时间轴总宽度的比例,默认为 50%,也就是轴两侧插槽宽度一致。

横向时间轴,插槽指上下两个,宽度变为高度。

将比例设置为 30%:

2.2.4 节点样式

默认为圆点,支持:

  • 无 - 无
  • 圆点
  • 自定义(插槽内可拖入图片用来展示头像)一般用作流程审批

将节点设置为无:

节点设置为圆点,可设置进度状态的颜色:

节点样式自定义的时候可以添加当前审批进度的状态 icon,进度状态开关用来控制状态 icon 的展示

状态 icon 可以根据当前状态配置不同的 icon

目前提供了 4 种 icon 图标

用户可以根据需求添加其他自定义图标

箭头所示即为运行时状态的展示

注意:

自定义拖入图片需要参考以下配置

图片宽高都选择像素,且大小是 56

2.3 检索配置

默认为无,支持:

  • 无检索
  • 外部元件检索 - 参考通用配置

2.4 可见性设置

可参考通用配置可见性配置

2.5 设计

可参考通用配置设计

3 效果展示

例子:按照公司各个部门建立时间展示公司发展。

配置数据源为获取部门列表,并设置节点间最小间隔为 200px。左右插槽展示部门信息:

预览效果:

自定义 demo

编辑态

运行时