Timeline

TuiTimeline is used to display an event flow in chronological order. It supports both Vertical and Horizontal layouts and can be generated quickly through configuration arrays or highly customized via slots.

Basic Usage

Data-Driven Rendering (Options)

The simplest way is to pass an array of events through the options property. Array items should include timestamp and content.

<script setup>
import { ref } from 'vue';

const activities = ref([
  { timestamp: '2024-01-20', content: 'Project Created', type: 'primary', hollow: true },
  { timestamp: '2024-01-21', content: 'Approved', color: '#0bbd87' },
  { timestamp: '2024-01-22', content: 'Event Started on Schedule', size: 'large' },
  { timestamp: '2024-01-23', content: 'Default Style Node' }
]);
</script>

<template>
  <TuiTimeline :options="activities" />
</template>

Slot Customization (Slot)

Use the <TuiTimelineItem> sub-component to flexibly control the content of each node.

<template>
  <TuiTimeline>
    <TuiTimelineItem timestamp="2024-04-01" type="primary">
      <h3>Created Successfully</h3>
      <p>User admin created the repository</p>
    </TuiTimelineItem>
    <TuiTimelineItem timestamp="2024-04-03" icon="tui-icon ti-upload" color="green">
      <p>Uploaded new version</p>
    </TuiTimelineItem>
  </TuiTimeline>
</template>

Layout Direction

Horizontal Timeline (Horizontal)

Set direction="horizontal" to switch to a horizontal layout.

• timestampPlacement: Controls the position of the timestamp. The default is 'bottom', and 'top' is also available.

<template>
  <TuiTimeline direction="horizontal" :options="activities" />

  <TuiTimeline 
    direction="horizontal" 
    timestampPlacement="top" 
    :options="activities" 
  />
</template>

Node Style Customization

TuiTimeline provides a variety of properties to decorate nodes:

• type: Semantic colors (primary, success, warning, danger, info).
• color: Custom color value (hexadecimal).
• icon: Custom icon class name.
• hollow: Whether to display as a hollow dot.
• size: Node dimensions (large, default, small).

<script setup>
const customItems = [
  { 
    content: 'Hollow Node', 
    timestamp: '2024-01-01', 
    hollow: true, 
    type: 'primary' 
  },
  { 
    content: 'Custom Icon', 
    timestamp: '2024-01-02', 
    icon: 'tui-icon ti-star', 
    size: 'large', 
    type: 'warning' 
  },
  { 
    content: 'Dangerous Operation', 
    timestamp: '2024-01-03', 
    type: 'danger', 
    size: 'small' 
  }
];
</script>

<template>
  <TuiTimeline :options="customItems" />
</template>

API Reference

TuiTimeline Props

Property	Type	Default	Description
options	Array	[]	Data source; array items contain timestamp and content.
direction	String	'vertical'	Timeline direction. Options: vertical, horizontal.
timestampPlacement	String	'bottom'	Timestamp position. Options: top, bottom.
lines	Number	2	Maximum display lines for content text; truncated if exceeded.
maxWidth	Number	-	Maximum width of the content area (px).
maxLine	Number	-	(Same functionality as lines) Maximum line count limit.

TuiTimelineItem Props

Property	Type	Default	Description
timestamp	String	-	Timestamp text.
hideTimestamp	Boolean	false	Whether to hide the timestamp.
type	String	-	Node type. Options: primary, success, warning, danger, info.
color	String	-	Node color.
icon	String	-	Custom icon class name.
size	String	'default'	Node size. Options: large, default, small.
hollow	Boolean	false	Whether it is a hollow node.

TuiTimelineItem Slots

Slot Name	Description
default	Custom node content.
dot	Custom node dot content.