Timeline 时间线
以一条主线串联的流式信息展示组件，适用于构建企业发展里程碑、版本发布日志、以及任务审批进度流程。
预览
Preview
垂直时间线 — 所有 Dot 变体
默认 (default) 变体
默认白底黑字圆点样式。
主要 (primary) 变体
珊瑚红主色圆点样式。
次要 (secondary) 变体
薄荷青辅助色方形样式。
强调 (accent) 变体
黄色强调色菱形样式。
成功 (success) 变体
绿色成功色圆点样式。
危险 (danger) 变体
红色危险色圆点样式。
水平时间线
需求分析
2026-06-01
设计开发
2026-06-15
测试发布
2026-07-01
迭代优化
2026-07-15
垂直交替布局 — alternate
立项启动
确定产品方向与核心目标。
设计开发
完成视觉设计与首轮开发。
测试验收
回归测试与性能调优。
正式发布
面向全量用户开放。
安装
pnpm dlx brutx-vue@latest add timeline用法
vue
<script setup>
import {
Timeline,
TimelineItem,
TimelineSeparator,
TimelineDot,
TimelineConnector,
TimelineContent
} from 'brutx-ui-vue'
</script>
<template>
<Timeline orientation="vertical">
<!-- 节点 1 -->
<TimelineItem>
<TimelineSeparator>
<TimelineDot variant="primary" shape="circle">1</TimelineDot>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent class="pl-2">
<div class="font-black">第一阶段</div>
<p class="font-normal text-sm mt-1">这里是第一阶段的信息说明。</p>
</TimelineContent>
</TimelineItem>
<!-- 节点 2 -->
<TimelineItem>
<TimelineSeparator>
<TimelineDot variant="accent" shape="square">2</TimelineDot>
</TimelineSeparator>
<TimelineContent class="pl-2">
<div class="font-black">第二阶段</div>
<p class="font-normal text-sm mt-1">这里是第二阶段的信息说明。</p>
</TimelineContent>
</TimelineItem>
</Timeline>
</template>水平时间线
设置 orientation="horizontal" 可切换为水平布局。水平模式下建议在 TimelineContent 上添加 text-center 使文本与图标对齐：
vue
<template>
<Timeline orientation="horizontal">
<TimelineItem>
<TimelineSeparator>
<TimelineDot variant="primary" shape="circle">1</TimelineDot>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent class="text-center">
<div class="font-black text-sm">需求分析</div>
<div class="text-xs text-brutal-fg/60 mt-1">2026-06-01</div>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineSeparator>
<TimelineDot variant="accent" shape="square">2</TimelineDot>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent class="text-center">
<div class="font-black text-sm">设计开发</div>
<div class="text-xs text-brutal-fg/60 mt-1">2026-06-15</div>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineSeparator>
<TimelineDot variant="success" shape="circle">3</TimelineDot>
</TimelineSeparator>
<TimelineContent class="text-center">
<div class="font-black text-sm">测试发布</div>
<div class="text-xs text-brutal-fg/60 mt-1">2026-07-01</div>
</TimelineContent>
</TimelineItem>
</Timeline>
</template>交替布局
设置 alternate 属性为 true 后，垂直时间线的内容会沿分隔线左右交替排列：偶数项（第 0、2、4... 项）内容在左侧，奇数项（第 1、3、5... 项）内容在右侧，形成对称的交替节奏。该属性仅在 orientation="vertical" 时生效，水平模式下会被自动忽略。
vue
<template>
<Timeline orientation="vertical" alternate>
<TimelineItem>
<TimelineSeparator>
<TimelineDot variant="primary" shape="circle">1</TimelineDot>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent class="pl-2">
<div class="font-black text-base">立项启动</div>
<p class="text-sm text-brutal-fg/80 mt-1 font-normal">确定产品方向与核心目标。</p>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineSeparator>
<TimelineDot variant="accent" shape="square">2</TimelineDot>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent class="pl-2">
<div class="font-black text-base">设计开发</div>
<p class="text-sm text-brutal-fg/80 mt-1 font-normal">完成视觉设计与首轮开发。</p>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineSeparator>
<TimelineDot variant="success" shape="diamond">3</TimelineDot>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent class="pl-2">
<div class="font-black text-base">测试验收</div>
<p class="text-sm text-brutal-fg/80 mt-1 font-normal">回归测试与性能调优。</p>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineSeparator>
<TimelineDot variant="danger" shape="circle">4</TimelineDot>
</TimelineSeparator>
<TimelineContent class="pl-2">
<div class="font-black text-base">正式发布</div>
<p class="text-sm text-brutal-fg/80 mt-1 font-normal">面向全量用户开放。</p>
</TimelineContent>
</TimelineItem>
</Timeline>
</template>说明
交替布局的索引由 Timeline 自动按 TimelineItem 出现顺序从 0 开始注入，无需手动指定；alternate 与 horizontal 同时设置时，水平模式优先生效，alternate 不会产生任何效果。
变体
TimelineDot 支持多样化的新粗野主义几何设计与颜色主题，通过 shape 和 variant 进行自定义：
形状 (shape)
| 形状 | 说明 |
|---|---|
circle | 经典的圆形小徽章 |
square | 方正的硬朗线条卡片 |
diamond | 斜向 45 度旋转的菱形（文字插槽内容会被内部自动反向微调，以防排版发生倾斜） |
配色 (variant)
| 变体 | 说明 |
|---|---|
default | 默认配色 |
primary | 主色 |
secondary | 辅助色 |
accent | 强调色 |
success | 成功色 |
danger | 危险色 |
子组件
| 组件 | 说明 |
|---|---|
Timeline | 根容器，管理布局方向和交替排列 |
TimelineItem | 单个时间节点 |
TimelineSeparator | 节点分隔区域，包含 Dot 和 Connector |
TimelineDot | 节点徽标，支持形状和配色变体 |
TimelineConnector | 节点之间的连接线 |
TimelineContent | 节点内容区域 |
API 参考
Timeline
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
orientation | TimelineOrientation | undefined | "vertical" | 设置时间线为垂直或水平排列；水平布局可横向滚动。 |
详情声明类型TimelineOrientation | undefined 字面量
关联类型 TimelineOrientation 类型定义 — TimelineOrientationexport type TimelineOrientation = 'vertical' | 'horizontal' 默认值详情
来源packages/ui/src/components/timeline/Timeline.vue | |||
alternate | boolean | undefined | false | 垂直方向下将相邻节点内容交替排列在轴线两侧。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/timeline/Timeline.vue | |||
class | string | undefined | undefined | 追加到时间线外层列表容器的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/timeline/Timeline.vue | |||
TimelineConnector
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | undefined | undefined | 追加到时间线连接线元素的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/timeline/TimelineConnector.vue | |||
TimelineContent
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | undefined | undefined | 追加到时间线节点内容区域的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/timeline/TimelineContent.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 渲染当前时间线节点的主要内容。 |
详情声明类型{}来源packages/ui/src/components/timeline/TimelineContent.vue | ||
TimelineDot
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | "accent" | "danger" | "default" | "primary" | "secondary" | "success" | undefined | "accent" | 设置节点标记的配色变体。 |
详情声明类型NonNullable<"default" | "primary" | "secondary" | "success" | "danger" | "accent" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/timeline/TimelineDot.vue | |||
shape | "circle" | "diamond" | "square" | undefined | "circle" | 设置节点标记为圆形、方形或菱形。 |
详情声明类型NonNullable<"square" | "circle" | "diamond" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/timeline/TimelineDot.vue | |||
led | boolean | undefined | false | 启用装饰性 LED 脉冲光晕；动画遵循减少动态效果偏好。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/timeline/TimelineDot.vue | |||
class | string | undefined | undefined | 追加到节点标记元素的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/timeline/TimelineDot.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 在节点标记内部展示数字、图标等内容。 |
详情声明类型{}来源packages/ui/src/components/timeline/TimelineDot.vue | ||
TimelineItem
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
index | number | undefined | undefined | 时间线中的节点索引；作为 Timeline 直接子项时会自动按顺序注入，可显式传入覆盖。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/timeline/TimelineItem.vue | |||
class | string | undefined | undefined | 追加到单个时间线节点容器的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/timeline/TimelineItem.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 组合放置 TimelineSeparator 与 TimelineContent。 |
详情声明类型{}来源packages/ui/src/components/timeline/TimelineItem.vue | ||
TimelineSeparator
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | undefined | undefined | 追加到时间线轴线和标记所在分隔区域的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/timeline/TimelineSeparator.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 放置 TimelineDot 与 TimelineConnector。 |
详情声明类型{}来源packages/ui/src/components/timeline/TimelineSeparator.vue | ||
可访问性
- 语义化结构：时间线使用列表结构（
<ol>/<li>）组织节点，便于屏幕阅读器理解内容顺序 - ARIA 属性：根容器设置
role="list"，各节点设置role="listitem"，提供清晰的列表语义 - 布局方向：
orientation属性自动设置aria-orientation，告知辅助技术当前布局方向 - 内容层级：
TimelineDot中的内容（如数字、图标）应配合文本说明，确保信息完整传达