syncfusion-angular-timeline

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Timeline

实现Syncfusion Angular Timeline

The Timeline component displays a sequence of events or milestones in chronological order, supporting both vertical and horizontal layouts with rich customization options.

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

When to Use This Skill

何时使用该组件

Product Roadmaps: Display product evolution and release milestones
Project Timelines: Show project phases and deliverables
Activity Feeds: Display recent activities in reverse chronological order
Career/Education: Show career progression or educational achievements
Business Events: Visualize company history, important milestones, or processes
Trip Itineraries: Display scheduled activities and events
News Timelines: Show chronological news items or announcements

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

Component Overview

组件概述

The Timeline component provides:

Flexible orientation (vertical/horizontal)
Multiple content alignments (Before, After, Alternate, AlternateReverse)
Dual-sided content with
```
oppositeContent
```
Event handlers for lifecycle and rendering
Extensive dot and connector customization
Template support for complete layout control
Item-level customization (disabled, styling, content)

Timeline组件提供以下功能：

灵活的布局方向（垂直/水平）
多种内容对齐方式（Before、After、Alternate、AlternateReverse）
支持通过
```
oppositeContent
```
实现双侧内容展示
生命周期和渲染相关的事件处理程序
丰富的节点和连接器自定义选项
模板支持，可完全控制布局
项级自定义（禁用状态、样式、内容）

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and package setup
Creating a basic Timeline
Angular 21 standalone architecture setup
Importing TimelineModule and TimelineAllModule
First working example with items

📄 阅读： references/getting-started.md

安装与包配置
创建基础时间线
Angular 21独立架构配置
导入TimelineModule和TimelineAllModule
包含项的首个可用示例

Items and Content

项与内容

📄 Read: references/items-and-content.md

String content and opposite content configuration
Template-based content rendering
CSS classes for item styling
Disabled state and dot-item property
Data binding from arrays
Content property usage

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

字符串内容与对立侧内容配置
基于模板的内容渲染
用于项样式的CSS类
禁用状态与dot-item属性
从数组进行数据绑定
content属性的使用

Alignment

对齐方式

📄 Read: references/alignment.md

Content positioning with align property
Before alignment (horizontal & vertical behavior)
After alignment
Alternate alignment (zigzag pattern)
AlternateReverse alignment
Combining alignment with orientation

📄 阅读： references/alignment.md

通过align属性定位内容
Before对齐方式（水平与垂直布局下的表现）
After对齐方式
Alternate对齐方式（之字形布局）
AlternateReverse对齐方式
对齐方式与布局方向的组合使用

Orientations and Reverse

布局方向与逆序

📄 Read: references/orientations-and-reverse.md

Vertical orientation (default, top-to-bottom)
Horizontal orientation (left-to-right)
Reverse property for reversed sequence
Recent-first timelines
Reverse with different alignments
Use cases for activity feeds and news

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

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

Customization

自定义配置

📄 Read: references/customization.md

Connector styling (common and individual item connectors)
Dot appearance: size, color, outline, shadow, variant
Dot icons with dotCss property (Material Icons, FontAwesome)
Item spacing and borders
CSS class-based customization
Per-item vs global connector styling
Advanced visual styling examples

📄 阅读： references/customization.md

连接器样式（通用与单个项的连接器）
节点外观：尺寸、颜色、轮廓、阴影、变体
通过dotCss属性设置节点图标（Material Icons、FontAwesome）
项间距与边框
基于CSS类的自定义
单项样式与全局连接器样式对比
高级视觉样式示例

Events

事件

📄 Read: references/events.md

Created event (component initialization)
BeforeItemRender event (pre-render customization)
Event handler setup and binding
Dynamic item modification via events
Conditional styling during render
Event arguments and properties

📄 阅读： references/events.md

Created事件（组件初始化完成后触发）
BeforeItemRender事件（项渲染前触发，用于自定义）
事件处理程序的配置与绑定
通过事件动态修改项
渲染期间的条件样式设置
事件参数与属性

Templates

模板

📄 Read: references/templates.md

Template property for complete customization
Template context (item, itemIndex)
Custom dot indicator design
Content area layout restructuring
Custom connectors via templates
Advanced layout examples

📄 阅读： references/templates.md

用于完全自定义的template属性
模板上下文（item、itemIndex）
自定义节点指示器设计
内容区域布局重构
通过模板实现自定义连接器
高级布局示例

API Reference

API参考

📄 Read: references/api-reference.md

Complete property documentation with examples
All component properties explained (including advanced: enablePersistence, enableRtl, locale)
All item properties documented
Event binding and handling
Enumeration values (TimelineAlign, TimelineOrientation)
Working code examples for every property and event

📄 阅读： references/api-reference.md

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

Quick Start Example

快速入门示例

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' }
  ];
}

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' }
  ];
}

Common Patterns

常见模式

Pattern 1: Activity Feed (Reverse Chronological)

模式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>

When to use: Display latest activities first, news feeds, log entries.

<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>

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

Pattern 2: Alternate Timeline (Balanced Layout)

模式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>

When to use: Visual balance, alternating left/right content, company history.

<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>

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

Pattern 3: Custom Styled 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>

When to use: Branded styling, visual differentiation of item states, custom themes.

<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>

适用场景： 品牌化样式、项状态的视觉区分、自定义主题。

Key Properties

关键属性

Property	Type	Default	Purpose
Layout & Display
`orientation`	`Vertical` \| `Horizontal`	`Vertical`	Timeline layout direction
`align`	`Before` \| `After` \| `Alternate` \| `AlternateReverse`	`After`	Content alignment
`reverse`	boolean	`false`	Reverse item order (newest first)
`items`	`TimelineItemModel[]`	`[]`	Timeline items array
Item Content
`content`	string \| object	-	Main item text/content
`oppositeContent`	string \| object	-	Opposite-side content
`dotCss`	string	-	CSS class for dot icons
`cssClass`	string	-	CSS class for item styling
`disabled`	boolean	`false`	Disable individual item
Customization
`template`	string \| object	-	Custom item template
`cssClass` (component)	string	-	Component CSS class
Advanced
`enablePersistence`	boolean	`false`	Persist state to localStorage
`enableRtl`	boolean	`false`	Right-to-left layout support
`locale`	string	`en-US`	Localization settings
Events
`created`	Event	-	Triggered after component renders
`beforeItemRender`	Event	-	Triggered before item renders

See references/api-reference.md for complete details, examples, and advanced configurations.

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

详细信息、示例及高级配置请查看 references/api-reference.md。

Common Use Cases

常见使用场景

Product Roadmap: Horizontal timeline with milestones and features
Project Status: Alternate timeline showing phases and progress
Career Timeline: Vertical timeline with job positions and dates
Company History: Reverse timeline showing company evolution
Trip Itinerary: Vertical timeline with location and activity information
User Activity Log: Reverse timeline with timestamps and actions
News Feed: Horizontal reverse timeline with headlines
Educational Path: Vertical alternate timeline showing degrees and courses

产品路线图： 带里程碑和功能的水平时间线
项目状态： 展示阶段与进度的交替时间线
职业时间线： 带职位和日期的垂直时间线
公司历史： 展示公司演进的逆序时间线
行程安排： 带地点和活动信息的垂直时间线
用户活动日志： 带时间戳和操作的逆序时间线
新闻动态： 带标题的水平逆序时间线
教育路径： 带学位和课程的垂直交替时间线