V1.0.0
Skip to content

WTimeline 组件

时间线组件,基于 WinDesignNext Timeline 封装,用于垂直展示时间流信息(如就诊记录、操作日志、审批流程等)。

子组件结构WTimeline 容器 + WTimelineItem 节点,用法类似 WCollapse + WCollapseItem

基础用法

Props API

WTimeline

属性类型默认值说明
componentstringWTimeline组件类型(必填)
reversebooleanfalse是否倒序排列
modestringstart布局模式:start / alternate / alternate-reverse / end
childrenstring[]WTimelineItem 子组件 ID 列表

WTimelineItem

属性类型默认值说明
componentstringWTimelineItem组件类型(必填)
timestampstring | DataBindingValue时间戳文字
hideTimestampbooleanfalse是否隐藏时间戳
typestring | DataBindingValue节点类型:primary/success/warning/danger/info/error
colorstring | DataBindingValue自定义节点颜色
sizestringnormal节点尺寸:normal / large
placementstringbottom时间戳位置:top / bottom / header
hollowbooleanfalse空心节点
childrenstring[]节点内容子组件 ID 列表

path 支持说明

组件支持 path 的属性说明
WTimeline纯容器,属性均为静态配置
WTimelineItemtimestamp, type, color动态时间、状态类型与颜色

动态时间戳与状态

json
{
  "component": "WTimelineItem",
  "timestamp": { "path": "/dischargeTime" },
  "type": { "path": "/dischargeType" },
  "children": ["text_discharge"]
}

使用场景

场景推荐配置
就诊/操作记录多个 WTimelineItem + Text 内容
审批流程type: "success" / "warning" 区分状态
动态数据驱动timestamp/type 使用 path 绑定 dataModel
交替布局WTimeline mode: "alternate"

注意事项

  • WTimelineItem 必须作为 WTimeline 的 children 使用
  • 节点内容通过 children 引用 Text、WText 等子组件
  • A2UI JSON 不支持 icon 组件类型属性(需静态字符串图标名)