Timeline 时间线

可视化地呈现时间流信息。

基础用法

Timeline 可拆分成多个按照时间戳排列的活动, 时间戳是其区分于其他控件的重要特征, 使用时注意与 Steps 步骤条等区分。

  • Event start
    2018-04-15
  • Approved
    2018-04-13
  • Success
    2018-04-11

⾃定义节点样式

可根据实际场景⾃定义节点尺⼨、颜⾊,或直接使⽤图标。

  • Custom icon
    2018-04-12 20:46
  • Custom color
    2018-04-03 20:46
  • Custom size
    2018-04-03 20:46
  • Custom hollow
    2018-04-03 20:46
  • Default node
    2018-04-03 20:46

⾃定义时间戳

当内容在垂直⽅向上过⾼时,可将时间戳置于内容之上。

  • 2018/4/12

    Update Github template

    Tom committed 2018/4/12 20:46

  • 2018/4/3

    Update Github template

    Tom committed 2018/4/3 20:46

  • 2018/4/2

    Update Github template

    Tom committed 2018/4/2 20:46

垂直居中

垂直居中样式的 Timeline-Item

  • 2018/4/12

    Update Github template

    Tom committed 2018/4/12 20:46

  • 2018/4/3

    Update Github template

    Tom committed 2018/4/3 20:46

  • 2018/4/2
    Event start
  • 2018/4/2
    Event end

Timeline API

Timeline Slots

插槽名说明子标签
defaulttimeline 组件的自定义默认内容Timeline-Item

Timeline-Item API

Timeline-Item Attributes

属性名说明类型默认值
timestamp时间戳string''
hide-timestamp是否隐藏时间戳booleanfalse
center是否垂直居中booleanfalse
placement时间戳位置enumbottom
type节点类型enum''
color节点颜色enum''
size节点尺寸enumnormal
icon自定义图标string / Component
hollow是否空心点booleanfalse

Timeline-Item Slots

插槽名说明
defaultcustomize default content for timeline item
dotcustomize defined node for timeline item

源代码

组件样式文档

贡献者