时间线 Timeline

按时间顺序展示一系列事件。

组件特性

↕️ 双方向布局：支持 vertical 垂直和 horizontal 水平两种方向。
📐 居中交替：支持 position 属性使内容在轴线两侧交替展示。
🎨 自定义样式：支持 variant 和 color 属性自定义圆点和连接线样式。
🖼️ 图标圆点：支持 icon 变体使用自定义图标作为圆点。
🔗 连接线样式：支持 solid、dashed、dotted、none 四种连接线样式。
⏱️ 时间戳：支持 BrTimelineTime 组件显示时间戳或标签。

基础用法

<script setup lang="ts">
import {
  BrTimeline,
  BrTimelineItem,
  BrTimelineDot,
  BrTimelineConnector,
  BrTimelineContent,
  BrTimelineTime,
} from '@breezeui/vue'
</script>

<template>
  <BrTimeline>
    <BrTimelineItem>
      <BrTimelineTime>2024-01-01</BrTimelineTime>
      <BrTimelineDot color="primary" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Project Started</div>
        <div class="text-sm text-muted-foreground mt-1">Initial commit and setup.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>2024-02-15</BrTimelineTime>
      <BrTimelineDot color="success" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Beta Release</div>
        <div class="text-sm text-muted-foreground mt-1">Released first beta version.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem :last="true">
      <BrTimelineTime>2024-03-10</BrTimelineTime>
      <BrTimelineDot color="warning" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Feedback Collection</div>
        <div class="text-sm text-muted-foreground mt-1">Gathering user feedback.</div>
      </BrTimelineContent>
    </BrTimelineItem>
  </BrTimeline>
</template>

水平方向

使用 direction="horizontal" 属性使时间线水平展示。

<script setup lang="ts">
import {
  BrTimeline,
  BrTimelineItem,
  BrTimelineDot,
  BrTimelineConnector,
  BrTimelineContent,
  BrTimelineTime,
} from '@breezeui/vue'
</script>

<template>
  <BrTimeline direction="horizontal">
    <BrTimelineItem>
      <BrTimelineTime>Step 1</BrTimelineTime>
      <BrTimelineDot color="primary" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Order Placed</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>Step 2</BrTimelineTime>
      <BrTimelineDot color="success" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Processing</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>Step 3</BrTimelineTime>
      <BrTimelineDot color="warning" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Shipped</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem :last="true">
      <BrTimelineTime>Step 4</BrTimelineTime>
      <BrTimelineDot color="muted" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Delivered</div>
      </BrTimelineContent>
    </BrTimelineItem>
  </BrTimeline>
</template>

自定义样式与变体

你可以使用 variant 和 color 属性来自定义圆点和连接线。你也可以使用自定义图标作为圆点。

<script setup lang="ts">
import {
  BrTimeline,
  BrTimelineItem,
  BrTimelineDot,
  BrTimelineConnector,
  BrTimelineContent,
  BrTimelineTime,
} from '@breezeui/vue'
import { Check, Clock, AlertTriangle, X } from 'lucide-vue-next'
</script>

<template>
  <BrTimeline>
    <BrTimelineItem>
      <BrTimelineTime>Done</BrTimelineTime>
      <BrTimelineDot color="success" variant="icon">
        <Check class="w-4 h-4" />
      </BrTimelineDot>
      <BrTimelineConnector variant="solid" color="success" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Completed Step</div>
        <div class="text-sm text-muted-foreground mt-1">This step is fully complete.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>In Progress</BrTimelineTime>
      <BrTimelineDot color="primary" variant="circle" />
      <BrTimelineConnector variant="dashed" color="primary" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Current Step</div>
        <div class="text-sm text-muted-foreground mt-1">Working on this right now.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>Pending</BrTimelineTime>
      <BrTimelineDot color="muted" variant="dot" />
      <BrTimelineConnector variant="dotted" color="muted" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Upcoming Step</div>
        <div class="text-sm text-muted-foreground mt-1">Waiting for previous steps.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem :last="true">
      <BrTimelineTime>Failed</BrTimelineTime>
      <BrTimelineDot color="error" variant="square" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Failed Step</div>
        <div class="text-sm text-muted-foreground mt-1">Something went wrong here.</div>
      </BrTimelineContent>
    </BrTimelineItem>
  </BrTimeline>
</template>

居中交替展示

使用 position="center" 属性使时间线内容在轴线两侧交替展示。

<script setup lang="ts">
import {
  BrTimeline,
  BrTimelineItem,
  BrTimelineDot,
  BrTimelineConnector,
  BrTimelineContent,
  BrTimelineTime,
} from '@breezeui/vue'
</script>

<template>
  <BrTimeline position="center">
    <BrTimelineItem>
      <BrTimelineTime>2023</BrTimelineTime>
      <BrTimelineDot color="primary" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Company Founded</div>
        <div class="text-sm text-muted-foreground mt-1">Started with a small team of 3 people.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>2024</BrTimelineTime>
      <BrTimelineDot color="success" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Series A Funding</div>
        <div class="text-sm text-muted-foreground mt-1">Secured $5M in Series A funding.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>2025</BrTimelineTime>
      <BrTimelineDot color="warning" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Global Expansion</div>
        <div class="text-sm text-muted-foreground mt-1">Opened offices in Europe and Asia.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem :last="true">
      <BrTimelineTime>2026</BrTimelineTime>
      <BrTimelineDot color="info" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">IPO</div>
        <div class="text-sm text-muted-foreground mt-1">Successfully went public.</div>
      </BrTimelineContent>
    </BrTimelineItem>
  </BrTimeline>
</template>

API

BrTimeline

Props

属性名	类型	默认值	说明
direction	`'vertical' \| 'horizontal'`	`'vertical'`	时间线的方向
position	`'left' \| 'right' \| 'center'`	`'right'`	内容相对轴线的位置
color	`string`	`'default'`	时间线所有圆点和连接线的默认颜色

BrTimelineItem

Props

属性名	类型	默认值	说明
last	`boolean`	`false`	设置为 `true` 表示这是最后一项，会隐藏其连接线

BrTimelineDot

Props

属性名	类型	默认值	说明
variant	`'dot' \| 'circle' \| 'square' \| 'icon'`	`'circle'`	圆点的视觉风格变体
color	`string`	`'default'`	圆点的颜色

BrTimelineConnector

Props

属性名	类型	默认值	说明
variant	`'solid' \| 'dashed' \| 'dotted' \| 'none'`	`'solid'`	连接线的样式（实线、虚线、点线或无）
color	`string`	-	连接线的自定义颜色

BrTimelineContent

时间线节点主要内容的容器组件。

BrTimelineTime

时间线节点的时间戳或标签的容器组件。

#时间线 Timeline

#组件特性

#基础用法

#水平方向

#自定义样式与变体

#居中交替展示

#API

#BrTimeline

#Props

#BrTimelineItem

#Props

#BrTimelineDot

#Props

#BrTimelineConnector

#Props

#BrTimelineContent

#BrTimelineTime

时间线 Timeline

组件特性

基础用法

水平方向

自定义样式与变体

居中交替展示

API

BrTimeline

Props

BrTimelineItem

Props

BrTimelineDot

Props

BrTimelineConnector

Props

BrTimelineContent

BrTimelineTime