El Timeline

Timeline Component

Timeline component visually displays timeline activities with timestamps.

When to Use

• Activity history
• Chronological events
• Process logs
• Version history

Basic Usage

<template>
  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </el-timeline-item>
  </el-timeline>
</template>

<script setup>
const activities = [
  { content: 'Event 1', timestamp: '2024-01-01' },
  { content: 'Event 2', timestamp: '2024-01-02' },
  { content: 'Event 3', timestamp: '2024-01-03' }
]
</script>

Mode

<template>
  <el-timeline mode="alternate">
    <el-timeline-item timestamp="2024-01-01">Event 1</el-timeline-item>
    <el-timeline-item timestamp="2024-01-02">Event 2</el-timeline-item>
  </el-timeline>
</template>

Custom Node

<template>
  <el-timeline>
    <el-timeline-item
      timestamp="2024-01-01"
      color="#0bbd87"
      size="large"
    >
      Custom node
    </el-timeline-item>
    <el-timeline-item
      timestamp="2024-01-02"
      :icon="Check"
    >
      With icon
    </el-timeline-item>
  </el-timeline>
</template>

<script setup>
import { Check } from '@element-plus/icons-vue'
</script>

Custom Timestamp

<template>
  <el-timeline>
    <el-timeline-item timestamp="2024-01-01" placement="top">
      Timestamp on top
    </el-timeline-item>
  </el-timeline>
</template>

Reverse

<template>
  <el-timeline reverse>
    <el-timeline-item timestamp="2024-01-01">First</el-timeline-item>
    <el-timeline-item timestamp="2024-01-02">Second</el-timeline-item>
  </el-timeline>
</template>

API Reference

Timeline Attributes

TimelineItem Attributes

TimelineItem Slots

Best Practices

1. Use mode="alternate" for alternating layouts
2. Use reverse for newest-first ordering
3. Customize nodes with icons for visual distinction