Timeline 时间轴

按照时间顺序展示事件、操作记录、流程进度。

何时使用

  • 需要按时间顺序展示事件时。
  • 创建项目
    2026-07-14 10:35
  • 审核中
    2026-07-13 16:17
  • 发布成功
    2026-07-12 18:34

基础用法

<script setup lang="ts">
import { h } from "vue";
import { Timeline, TimelineItem } from "@reglow/reui";
import { AlertTriangle } from "lucide-vue-next";
</script>

<template>
  <Timeline>
    <TimelineItem time="2026-07-14 10:35">第一个节点内容</TimelineItem>
    <TimelineItem time="2026-07-13 16:17" type="ongoing">审核中</TimelineItem>
    <TimelineItem time="2026-07-12 18:34" type="success">发布成功</TimelineItem>
    <TimelineItem time="2026-07-11 09:00" type="warning" :dot="h(AlertTriangle)">警告信息</TimelineItem>
    <TimelineItem time="2026-07-10 12:20" type="error" color="pink">审核失败</TimelineItem>
  </Timeline>
</template>

导入

import { Timeline, TimelineItem } from "@reglow/reui";

Props(TimelineItem)

属性类型默认值说明
timestring-时间文本
type"default" | "ongoing" | "success" | "warning" | "error""default"节点类型
dotVNode-自定义节点图标
colorstring-自定义圆点色值