Timeline 时间轴

垂直或水平展示时间流信息。

基础用法

最基础的时间轴用法。

创建项目

2024-01-15 09:00

完成需求分析

2024-01-16 14:30

开发完成

2024-01-18 16:45

测试通过

2024-01-20 10:00

vue

<template>
  <ExTimeline>
    <ExTimelineItem timestamp="2024-01-15 09:00">
      创建项目
    </ExTimelineItem>
    <ExTimelineItem timestamp="2024-01-16 14:30">
      完成需求分析
    </ExTimelineItem>
    <ExTimelineItem timestamp="2024-01-18 16:45">
      开发完成
    </ExTimelineItem>
    <ExTimelineItem timestamp="2024-01-20 10:00">
      测试通过
    </ExTimelineItem>
  </ExTimeline>
</template>

不同类型

通过 type 属性可以设置不同的节点类型。

项目启动

2024-01-15

开发完成

2024-01-18

发现问题

2024-01-19

紧急修复

2024-01-20

版本发布

2024-01-21

vue

<template>
  <ExTimeline>
    <ExTimelineItem type="primary" timestamp="2024-01-15">
      项目启动
    </ExTimelineItem>
    <ExTimelineItem type="success" timestamp="2024-01-18">
      开发完成
    </ExTimelineItem>
    <ExTimelineItem type="warning" timestamp="2024-01-19">
      发现问题
    </ExTimelineItem>
    <ExTimelineItem type="danger" timestamp="2024-01-20">
      紧急修复
    </ExTimelineItem>
    <ExTimelineItem type="info" timestamp="2024-01-21">
      版本发布
    </ExTimelineItem>
  </ExTimeline>
</template>

不同尺寸

通过 size 属性可以设置不同的节点尺寸。

小尺寸节点

2024-01-15

中等尺寸节点（默认）

2024-01-16

大尺寸节点

2024-01-17

vue

<template>
  <ExTimeline>
    <ExTimelineItem size="small" timestamp="2024-01-15">
      小尺寸节点
    </ExTimelineItem>
    <ExTimelineItem size="medium" timestamp="2024-01-16">
      中等尺寸节点（默认）
    </ExTimelineItem>
    <ExTimelineItem size="large" timestamp="2024-01-17">
      大尺寸节点
    </ExTimelineItem>
  </ExTimeline>
</template>

空心节点

通过 hollow 属性可以设置空心节点。

空心主要节点

2024-01-15

空心成功节点

2024-01-16

空心警告节点

2024-01-17

vue

<template>
  <ExTimeline>
    <ExTimelineItem type="primary" hollow timestamp="2024-01-15">
      空心主要节点
    </ExTimelineItem>
    <ExTimelineItem type="success" hollow timestamp="2024-01-16">
      空心成功节点
    </ExTimelineItem>
    <ExTimelineItem type="warning" hollow timestamp="2024-01-17">
      空心警告节点
    </ExTimelineItem>
  </ExTimeline>
</template>

自定义颜色

通过 color 属性可以自定义节点颜色。

自定义粉色节点

2024-01-15

自定义青色节点

2024-01-16

自定义紫色节点

2024-01-17

vue

<template>
  <ExTimeline>
    <ExTimelineItem color="#ff3bd1" timestamp="2024-01-15">
      自定义粉色节点
    </ExTimelineItem>
    <ExTimelineItem color="#00f0ff" timestamp="2024-01-16">
      自定义青色节点
    </ExTimelineItem>
    <ExTimelineItem color="#a86bff" timestamp="2024-01-17">
      自定义紫色节点
    </ExTimelineItem>
  </ExTimeline>
</template>

交替模式

通过 mode="alternate" 可以设置交替展示模式。

项目启动

召开项目启动会议，确定项目目标和时间表。

2024-01-15 09:00

需求完成

完成所有需求文档的编写和评审。

2024-01-18 14:30

设计评审

进行UI/UX设计评审，收集反馈意见。

2024-01-20 16:00

开发完成

所有功能开发完成，进入测试阶段。

2024-01-25 10:00

vue

<template>
  <ExTimeline mode="alternate">
    <ExTimelineItem type="primary" timestamp="2024-01-15 09:00">
      <h4>项目启动</h4>
      <p>召开项目启动会议，确定项目目标和时间表。</p>
    </ExTimelineItem>
    <ExTimelineItem type="success" timestamp="2024-01-18 14:30">
      <h4>需求完成</h4>
      <p>完成所有需求文档的编写和评审。</p>
    </ExTimelineItem>
    <ExTimelineItem type="warning" timestamp="2024-01-20 16:00">
      <h4>设计评审</h4>
      <p>进行UI/UX设计评审，收集反馈意见。</p>
    </ExTimelineItem>
    <ExTimelineItem type="info" timestamp="2024-01-25 10:00">
      <h4>开发完成</h4>
      <p>所有功能开发完成，进入测试阶段。</p>
    </ExTimelineItem>
  </ExTimeline>
</template>

右侧模式

通过 mode="right" 可以设置右侧展示模式。

项目启动

2024-01-15

开发完成

2024-01-18

测试通过

2024-01-20

vue

<template>
  <ExTimeline mode="right">
    <ExTimelineItem type="primary" timestamp="2024-01-15">
      项目启动
    </ExTimelineItem>
    <ExTimelineItem type="success" timestamp="2024-01-18">
      开发完成
    </ExTimelineItem>
    <ExTimelineItem type="info" timestamp="2024-01-20">
      测试通过
    </ExTimelineItem>
  </ExTimeline>
</template>

水平时间轴

通过 direction="horizontal" 可以设置水平时间轴。

Q1 2024

第一季度

项目启动与规划

Q2 2024

第二季度

核心功能开发

Q3 2024

第三季度

测试与优化

Q4 2024

第四季度

正式发布

vue

<template>
  <ExTimeline direction="horizontal">
    <ExTimelineItem type="primary" timestamp="Q1 2024">
      <div>
        <h4>第一季度</h4>
        <p>项目启动与规划</p>
      </div>
    </ExTimelineItem>
    <ExTimelineItem type="success" timestamp="Q2 2024">
      <div>
        <h4>第二季度</h4>
        <p>核心功能开发</p>
      </div>
    </ExTimelineItem>
  </ExTimeline>
</template>

自定义节点

通过 dot 插槽可以自定义节点内容。

项目启动

2024-01-15

开发完成

2024-01-18

测试阶段

2024-01-20

项目完成

2024-01-25

vue

<template>
  <ExTimeline>
    <ExTimelineItem type="primary" timestamp="2024-01-15">
      <template #dot>
        <img src="https://api.iconify.design/ri/rocket-line.svg" 
             alt="启动" width="16" height="16" />
      </template>
      项目启动
    </ExTimelineItem>
    <ExTimelineItem type="success" timestamp="2024-01-18">
      <template #dot>
        <img src="https://api.iconify.design/ri/code-line.svg" 
             alt="开发" width="16" height="16" />
      </template>
      开发完成
    </ExTimelineItem>
  </ExTimeline>
</template>

时间戳位置

通过 timestamp-position 属性可以设置时间戳的位置。

2024-01-15 09:00

时间戳在顶部

时间戳在底部（默认）

2024-01-16 14:30

vue

<template>
  <ExTimeline>
    <ExTimelineItem type="primary" timestamp="2024-01-15 09:00" timestamp-position="top">
      时间戳在顶部
    </ExTimelineItem>
    <ExTimelineItem type="success" timestamp="2024-01-16 14:30" timestamp-position="bottom">
      时间戳在底部（默认）
    </ExTimelineItem>
  </ExTimeline>
</template>

可变高度内容

时间轴支持内容高度可变，自动适应不同高度的内容。

短内容

这是一段简短的内容。

2024-01-15

中等长度内容

这是一段中等长度的内容，包含更多的描述信息。可以看到时间轴会自动适应不同的内容高度。

2024-01-18

较长内容

这是一段较长的内容，包含了大量的详细描述信息。时间轴组件能够很好地处理不同高度的内容，确保布局的美观和可读性。

支持任意高度的内容
自动调整连接线长度
保持视觉平衡

2024-01-20

超长内容示例

这是一个包含大量信息的时间轴项。在实际应用中，你可能需要展示详细的项目进展、会议记录、或者其他复杂的内容。

关键指标：

完成度：95%
质量评分：A+
团队满意度：98%

时间轴组件会自动处理这些不同高度的内容，确保整体布局的协调性。

2024-01-25

vue

<template>
  <ExTimeline mode="alternate">
    <ExTimelineItem type="primary" timestamp="2024-01-15">
      <h4>短内容</h4>
      <p>这是一段简短的内容。</p>
    </ExTimelineItem>
    <ExTimelineItem type="success" timestamp="2024-01-18">
      <h4>中等长度内容</h4>
      <p>这是一段中等长度的内容，包含更多的描述信息。</p>
    </ExTimelineItem>
    <ExTimelineItem type="warning" timestamp="2024-01-20">
      <h4>较长内容</h4>
      <p>包含大量详细信息...</p>
      <ul>
        <li>支持任意高度的内容</li>
        <li>自动调整连接线长度</li>
      </ul>
    </ExTimelineItem>
  </ExTimeline>
</template>

反转顺序

通过 reverse 属性可以反转时间轴的顺序。

第一项（显示在底部）

2024-01-15

第二项

2024-01-18

第三项（显示在顶部）

2024-01-20

vue

<template>
  <ExTimeline reverse>
    <ExTimelineItem type="primary" timestamp="2024-01-15">
      第一项（显示在底部）
    </ExTimelineItem>
    <ExTimelineItem type="success" timestamp="2024-01-18">
      第二项
    </ExTimelineItem>
    <ExTimelineItem type="info" timestamp="2024-01-20">
      第三项（显示在顶部）
    </ExTimelineItem>
  </ExTimeline>
</template>

隐藏连接线

通过 hide-line 属性可以隐藏单个项的连接线。

有连接线

2024-01-15

无连接线

2024-01-18

有连接线

2024-01-20

vue

<template>
  <ExTimeline>
    <ExTimelineItem type="primary" timestamp="2024-01-15">
      有连接线
    </ExTimelineItem>
    <ExTimelineItem type="success" timestamp="2024-01-18" hide-line>
      无连接线
    </ExTimelineItem>
    <ExTimelineItem type="info" timestamp="2024-01-20">
      有连接线
    </ExTimelineItem>
  </ExTimeline>
</template>

API

Timeline Props

属性	说明	类型	默认值
`direction`	时间轴方向	`'vertical' \| 'horizontal'`	`'vertical'`
`mode`	时间轴模式（仅垂直方向有效）	`'left' \| 'right' \| 'alternate'`	`'left'`
`show-line`	是否显示连接线	`boolean`	`true`
`reverse`	是否反转顺序	`boolean`	`false`

Timeline Methods

方法名	说明	类型
`getElement`	获取时间轴DOM元素	`() => HTMLDivElement \| null`

TimelineItem Props

属性	说明	类型	默认值
`timestamp`	时间戳或时间文本	`string`	`undefined`
`timestamp-position`	时间戳位置（仅垂直方向有效）	`'top' \| 'bottom'`	`'bottom'`
`type`	节点类型	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`
`size`	节点尺寸	`'small' \| 'medium' \| 'large'`	`'medium'`
`color`	节点颜色（自定义颜色）	`string`	`undefined`
`hollow`	是否为空心节点	`boolean`	`false`
`hide-line`	是否隐藏连接线	`boolean`	`false`

TimelineItem Events

事件名	说明	类型
`click`	点击时触发	`(event: MouseEvent) => void`

TimelineItem Slots

插槽名	说明
`default`	时间轴项内容
`dot`	自定义节点内容
`timestamp`	自定义时间戳内容

TimelineItem Methods

方法名	说明	类型
`getElement`	获取时间轴项DOM元素	`() => HTMLDivElement \| null`

无障碍支持

使用语义化的 HTML 标签
完整的 ARIA 属性支持
支持屏幕阅读器
支持键盘导航

主题定制

可以通过 CSS 变量自定义时间轴样式：

css

:root {
  --ex-timeline-node-size: 24px;
  --ex-timeline-line-width: 2px;
  --ex-timeline-line-color: var(--ex-color-border-primary);
}

Timeline 时间轴 ​

基础用法 ​

不同类型 ​

不同尺寸 ​

空心节点 ​

自定义颜色 ​

交替模式 ​

项目启动

需求完成

设计评审

开发完成

右侧模式 ​

水平时间轴 ​

第一季度

第二季度

第三季度

第四季度

自定义节点 ​

时间戳位置 ​

可变高度内容 ​

短内容

中等长度内容

较长内容

超长内容示例

反转顺序 ​

隐藏连接线 ​

API ​

Timeline Props ​

Timeline Methods ​

TimelineItem Props ​

TimelineItem Events ​

TimelineItem Slots ​

TimelineItem Methods ​

无障碍支持 ​

主题定制 ​

Timeline 时间轴

基础用法

不同类型

不同尺寸

空心节点

自定义颜色

交替模式

右侧模式

水平时间轴

自定义节点

时间戳位置

可变高度内容

反转顺序

隐藏连接线

API

Timeline Props

Timeline Methods

TimelineItem Props

TimelineItem Events

TimelineItem Slots

TimelineItem Methods

无障碍支持

主题定制