ui-time-line 时间轴组

版本：v2.3.11

时间轴组件用于展示时间线上的事件，支持自定义样式和方向

基本使用

<template>
  <div class="time-line-demo">
    <ui-time-line>
      <ui-time-line-item title="2023-01-01" content="事件1" />
      <ui-time-line-item title="2023-02-01" content="事件2" />
      <ui-time-line-item title="2023-03-01" content="事件3" />
    </ui-time-line>
  </div>
</template>

<style scoped>
.time-line-demo {
  padding: 20px;
}
</style>

Props

TimeLine

参数	类型	默认值	说明
direction	String	'vertical'	时间轴方向，可选值：vertical、horizontal
reverse	Boolean	false	是否倒序排列
color	String	'#1989fa'	时间轴颜

TimeLineItem

参数	类型	默认值	说明
title	String	-	事件标题
content	String	-	事件内容
time	String	-	事件时间
type	String	'default'	事件类型，可选值：default、primary、success、warning、danger
dot	Boolean	true	是否显示时间
line	Boolean	true	是否显示连接

Slots

TimeLineItem

名称	说明
default	自定义事件内
title	自定义事件标
dot	自定义时间点
time	自定义事件时

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/functional/time-line/time-line