Preview Updated 2026-05-10

Timeline

Sequential event stream with dots, connectors, and timestamps. Common in changelogs, audit trails, and release notes.

Basic usage

Each entry in items is a node. color controls the dot color (primary / success / warning / danger / neutral).

背景

提交了 PR #128
2026-05-08 10:14
CI 通过
构建 / 测试 / 类型检查全部通过
2026-05-08 10:18
触发 staging 部署
2026-05-08 10:30
收到性能回归告警
/api/list P99 上升 220ms
2026-05-08 11:02
回滚到上一版本
2026-05-08 11:08

src/App.vue

<script setup lang="ts">
import { CfTimeline, type TimelineItem } from '@chufix-design/vue';

const items: TimelineItem[] = [
  { title: '提交了 PR #128', time: '2026-05-08 10:14', color: 'primary' },
  { title: 'CI 通过', content: '构建 / 测试 / 类型检查全部通过', time: '2026-05-08 10:18', color: 'success' },
  { title: '触发 staging 部署', time: '2026-05-08 10:30', color: 'primary' },
  { title: '收到性能回归告警', content: '/api/list P99 上升 220ms', time: '2026-05-08 11:02', color: 'warning' },
  { title: '回滚到上一版本', time: '2026-05-08 11:08', color: 'danger' },
];
</script>
<template>
  <div style="max-width: 28rem;">
    <CfTimeline :items="items" />
  </div>
</template>

<script setup>
import { CfTimeline } from '@chufix-design/vue';

const items= [
  { title: '提交了 PR #128', time: '2026-05-08 10:14', color: 'primary' },
  { title: 'CI 通过', content: '构建 / 测试 / 类型检查全部通过', time: '2026-05-08 10:18', color: 'success' },
  { title: '触发 staging 部署', time: '2026-05-08 10:30', color: 'primary' },
  { title: '收到性能回归告警', content: '/api/list P99 上升 220ms', time: '2026-05-08 11:02', color: 'warning' },
  { title: '回滚到上一版本', time: '2026-05-08 11:08', color: 'danger' },
];
</script>
<template>
  <div style="max-width: 28rem;">
    <CfTimeline :items="items" />
  </div>
</template>

import { CfTimeline } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfTimeline items={items} />
    </>
  );
}

API

Prop	Type	Default	Description
`items`	`TimelineItem[]`	`—`	Node list
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Node font size and dot size
`mode`	`'left' \| 'right' \| 'alternate'`	`'left'`	Content position relative to the connector
`reverse`	`boolean`	`false`	Reverse order (newest first)

TimelineItem

Field	Type	Description
`key`	`string \| number`	Unique key, used for v-for / map key
`title`	`string`	Main title
`content`	`string`	Detailed description
`time`	`string`	Timestamp text
`color`	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	Dot color