syncfusion-angular-timeline

实现 Syncfusion Angular Timeline

Timeline 组件按时间顺序显示一系列事件或里程碑，支持垂直和水平布局，并提供丰富的自定义选项。

何时使用此技能

• 产品路线图： 展示产品演进和发布里程碑
• 项目时间线： 展示项目阶段和交付成果
• 活动动态： 按时间倒序显示近期活动
• 职业/教育： 展示职业发展历程或教育成就
• 业务事件： 可视化公司历史、重要里程碑或流程
• 旅行行程： 展示计划中的活动和事件
• 新闻时间线： 按时间顺序展示新闻条目或公告

组件概览

Timeline 组件提供：

• 灵活的方向（垂直/水平）
• 多种内容对齐方式（Before、After、Alternate、AlternateReverse）
• 通过 oppositeContent 实现双侧内容
• 生命周期和渲染事件处理程序
• 丰富的圆点和连接线自定义选项
• 支持模板以全面控制布局
• 项目级自定义（禁用、样式、内容）

文档与导航指南

快速入门

📄 阅读： references/getting-started.md

• 安装和软件包设置
• 创建基本的 Timeline
• Angular 21 独立架构设置
• 导入 TimelineModule 和 TimelineAllModule
• 使用项目创建第一个可运行示例

项目和内容

📄 阅读： references/items-and-content.md

• 字符串内容和相对内容配置
• 基于模板的内容呈现
• 用于项目样式的 CSS 类
• 禁用状态和圆点项目属性
• 绑定数组数据
• 内容属性的使用

对齐方式

📄 阅读： references/alignment.md

• 使用 align 属性设置内容位置
• Before 对齐（水平和垂直行为）
• After 对齐
• Alternate 对齐（锯齿模式）
• AlternateReverse 对齐
• 结合对齐方式与方向

方向和反转

📄 阅读： references/orientations-and-reverse.md

• 垂直方向（默认，从上到下）
• 水平方向（从左到右）
• 使用 reverse 属性反转顺序
• 最新内容优先的时间线
• 反转与不同对齐方式的组合
• 活动动态和新闻的使用场景

自定义

📄 阅读： references/customization.md

• 连接线样式（通用连接线和单个项目连接线）
• 圆点外观：大小、颜色、轮廓、阴影、变体
• 使用 dotCss 属性设置圆点图标（Material Icons、FontAwesome）
• 项目间距和边框
• 基于 CSS 类的自定义
• 单项目与全局连接线样式
• 高级视觉样式示例

事件

📄 阅读： references/events.md

• Created 事件（组件初始化）
• BeforeItemRender 事件（渲染前自定义）
• 事件处理程序设置和绑定
• 通过事件动态修改项目
• 渲染时的条件样式
• 事件参数和属性

模板

📄 阅读： references/templates.md

• 使用 Template 属性进行全面自定义
• 模板上下文（item、itemIndex）
• 自定义圆点指示器设计
• 重新组织内容区域布局
• 通过模板自定义连接线
• 高级布局示例

API 参考

📄 阅读： references/api-reference.md

• 完整的属性文档及示例
• 所有组件属性说明（包括高级属性：enablePersistence、enableRtl、locale）
• 所有项目属性说明
• 事件绑定和处理
• 枚举值（TimelineAlign、TimelineOrientation）
• 每个属性和事件的可运行代码示例

快速入门示例

import { Component } from '@angular/core';
import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";
import { CommonModule } from '@angular/common';

@Component({
  imports: [CommonModule, TimelineModule, TimelineAllModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="container">
      <ejs-timeline orientation="Vertical" align="Before">
        <e-items>
          <e-item *ngFor="let item of milestones" [content]="item.content" [oppositeContent]="item.oppositeContent"></e-item>
        </e-items>
      </ejs-timeline>
    </div>
  `,
  styles: [`.container { padding: 20px; }`]
})
export class AppComponent {
  public milestones: TimelineItemModel[] = [
    { content: 'Q1 2024', oppositeContent: 'Planning phase' },
    { content: 'Q2 2024', oppositeContent: 'Development' },
    { content: 'Q3 2024', oppositeContent: 'Testing' },
    { content: 'Q4 2024', oppositeContent: 'Launch' }
  ];
}

常见模式

模式 1：活动动态（按时间倒序）

<ejs-timeline [reverse]="true" align="Before">
  <e-items>
    <e-item *ngFor="let activity of recentActivities" [content]="activity.time" [oppositeContent]="activity.description"></e-item>
  </e-items>
</ejs-timeline>

适用场景： 优先显示最新活动、新闻动态、日志条目。

模式 2：交替时间线（均衡布局）

<ejs-timeline align="Alternate" orientation="Horizontal">
  <e-items>
    <e-item *ngFor="let event of events" [content]="event.title" [oppositeContent]="event.description"></e-item>
  </e-items>
</ejs-timeline>

适用场景： 视觉均衡、内容左右交替、公司历史。

模式 3：自定义样式时间线

<ejs-timeline align="Before" [cssClass]="'custom-timeline'">
  <e-items>
    <e-item *ngFor="let item of items" [content]="item.content" [cssClass]="item.cssClass" [disabled]="item.disabled"></e-item>
  </e-items>
</ejs-timeline>

适用场景： 品牌化样式、区分条目状态、自定义主题。

主要属性

属性	类型	默认值	用途
布局与显示
orientation	Vertical | Horizontal	Vertical	时间线布局方向
align	Before | After | Alternate | AlternateReverse	After	内容对齐方式
reverse	boolean	false	反转条目顺序（最新条目优先）
items	TimelineItemModel[]	[]	时间线条目数组
条目内容
content	string | object	-	条目主要文本/内容
oppositeContent	string | object	-	对侧内容
dotCss	string	-	圆点图标的 CSS 类
cssClass	string	-	条目样式的 CSS 类
disabled	boolean	false	禁用单个条目
自定义
template	string | object	-	自定义条目模板
cssClass (component)	string	-	组件 CSS 类
高级设置
enablePersistence	boolean	false	将状态持久化到 localStorage
enableRtl	boolean	false	支持从右向左布局
locale	string	en-US	本地化设置
事件
created	Event	-	组件渲染后触发
beforeItemRender	Event	-	条目渲染前触发

完整详情、示例和高级配置请参阅 references/api-reference.md。

常见用例

1. 产品路线图： 使用水平时间线展示里程碑和功能
2. 项目状态： 使用交替时间线展示阶段和进度
3. 职业时间线： 使用垂直时间线展示职位和日期
4. 公司历史： 使用倒序时间线展示公司的发展历程
5. 旅行行程： 使用垂直时间线展示地点和活动信息
6. 用户活动日志： 使用倒序时间线展示时间戳和操作
7. 新闻动态： 使用水平倒序时间线展示标题
8. 教育经历： 使用垂直交替时间线展示学位和课程