TTimeline / 时间轴

Timeline displays a sequence of events or steps in chronological order. Supports simple style, reverse order, pending loading indicator, and configurable items with icons and colors. / 时间轴按时间顺序展示事件或步骤序列，支持简洁样式、倒序、加载中指示和可配置的图标与颜色。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
items	TimelineItemData[]	[]	Timeline items / 时间轴项
simple	boolean	false	Simple style variant
reverse	boolean	false	Reverse order
pending	boolean | string	false	Show loading node at end
emptyText	string	'暂无数据'	Empty state text

TimelineItemData 接口

interface TimelineItemData {
  title: string       // 标题
  text?: string       // 副标题/描述
  icon?: Icon         // 自定义图标
  color?: TablerColor // 图标颜色
  active?: boolean    // 激活状态
}

Slots / 插槽

Slot	Description / 说明
default	Custom timeline items (TTimelineItem) / 自定义项
empty	Custom empty state / 自定义空状态

Basic Usage / 基础用法

<script setup lang="ts">
import { TTimeline } from '@gulcc/tabler-vue'

const items = [
  { title: 'Event 1 / 事件一', text: 'Description / 描述' },
  { title: 'Event 2 / 事件二', text: 'Description / 描述', active: true },
  { title: 'Event 3 / 事件三', text: 'Description / 描述' },
]
</script>

<template>
  <TTimeline :items="items" />
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TTimeline, TTimelineItem } from '@gulcc/tabler-vue'
import { IconStar, IconCheck } from '@tabler/icons-vue'
</script>

<template>
  <!-- Simple style / 简洁样式 -->
  <TTimeline :items="items" simple />

  <!-- Reverse order / 倒序 -->
  <TTimeline :items="items" reverse />

  <!-- With pending loading / 加载中 -->
  <TTimeline :items="items" pending="Loading... / 加载中..." />

  <!-- Custom via slots / 自定义插槽 -->
  <TTimeline>
    <TTimelineItem title="Step 1" :icon="IconStar" color="primary">
      Content / 内容
    </TTimelineItem>
    <TTimelineItem title="Step 2" active>
      Content / 内容
    </TTimelineItem>
  </TTimeline>
</template>

Tips / 避坑指南

• Items can be provided via the items prop (config-driven) or as TTimelineItem children (slot-driven)
• active: true highlights the item visually
• pending adds a loading node at the end — pass a string for custom loading text
• reverse uses CSS flex-direction: column-reverse for reverse chronological display