syncfusion-javascript-timeline

实现 Syncfusion TypeScript Timeline

何时使用此技能

在以下情况下使用此技能：

• 按时间顺序或顺序显示项目
• 可视化时间线、里程碑或事件进程
• 展示工作流步骤或流程
• 创建状态跟踪视图（订单跟踪、项目里程碑、职业发展路径）
• 按 Before、After、Alternate 或 Reverse 对齐方式排列内容
• 使用圆点、连接线和样式自定义时间线外观
• 处理时间线事件，例如生命周期和渲染回调
• 使用水平或垂直方向布局时间线

Timeline 控件概述

Syncfusion TypeScript Timeline 控件以顺序或时间顺序的布局显示内容项目。它支持：

• 多种对齐方式： Before、After、Alternate、AlternateReverse
• 方向： 水平和垂直布局
• 丰富的内容： 字符串内容、模板内容或对侧内容
• 自定义： 圆点样式、连接线自定义、CSS 类
• 事件： Created、beforeItemRender 生命周期事件
• 反向模式： 按相反顺序显示项目
• 高级模板： 全面控制项目外观

快速入门指南

创建基本时间线

import { Timeline } from '@syncfusion/ej2-layouts';

// Create timeline items
let timeline: Timeline = new Timeline({
  items: [{}, {}, {}, {}]
});

// Render to DOM element
timeline.appendTo("#timeline");

创建带内容的时间线

import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

const items: TimelineItemModel[] = [
  { content: 'Item 1' },
  { content: 'Item 2' },
  { content: 'Item 3' }
];

let timeline: Timeline = new Timeline({
  items: items,
  orientation: 'Vertical'
});

timeline.appendTo("#timeline");

核心概念

关键属性

• items - 定义时间线项目的 TimelineItemModel 对象数组
• orientation - 显示方向：Vertical（默认）或 Horizontal
• align - 内容对齐方式：Before、After、Alternate、AlternateReverse
• reverse - 布尔值，用于按相反顺序显示项目
• template - 用于自定义项目渲染的 HTML 模板选择器
• cssClass - 用于设置时间线容器样式的自定义 CSS 类
• created - 时间线渲染完成时触发的事件
• beforeItemRender - 每个项目渲染前触发的事件

TimelineItemModel 属性

• content - 主要内容（字符串或模板选择器）
• oppositeContent - 对侧内容（字符串或模板选择器）
• dotCss - 用于自定义圆点的 CSS 类
• cssClass - 用于设置单个项目样式的 CSS 类
• disabled - 布尔值，用于禁用特定项目

文档与导航指南

入门与设置

📄 阅读： references/getting-started.md

• 软件包安装和依赖项
• 开发环境设置
• CSS 样式导入和主题设置
• 创建和初始化基本时间线
• 第一个可运行示例

项目、内容与对侧内容

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

• 为项目添加字符串内容
• 使用选择器配置模板内容
• 配置 oppositeContent 属性
• 禁用特定时间线项目
• 为项目设置自定义 CSS 类
• 使用 dotCss 属性自定义圆点

对齐与方向模式

📄 阅读： references/alignment-and-orientation.md

• Before 对齐（内容定位）
• After 对齐（反向内容定位）
• Alternate 对齐（交替排列）
• AlternateReverse 对齐（反向交替排列）
• 垂直方向（默认，垂直堆叠）
• 水平方向（并排布局）
• 布局组合和使用场景

自定义与样式

📄 阅读： references/customization-styling.md

• 常见连接线样式（所有连接线）
• 单条连接线样式（按项目设置样式）
• 圆点颜色自定义
• 使用 CSS 变量调整圆点大小
• 圆点边框和轮廓样式
• 用于自定义的 CSS 选择器模式
• 高级样式技巧

模板与自定义渲染

📄 阅读： references/templating.md

• 模板属性和模板选择器
• 模板上下文（item、itemIndex）
• 高级 HTML 模板用法
• 在模板中自定义圆点
• 进度线样式
• 模板最佳实践与模式

事件与生命周期钩子

📄 阅读： references/events-and-lifecycle.md

• Created 事件（渲染完成时触发）
• beforeItemRender 事件（每个项目渲染前触发）
• 用于事件处理的 TimelineRenderingEventArgs
• 使用事件进行初始化和自定义
• 事件回调模式

反向布局模式

📄 阅读： references/reverse-layout.md

• 使用 reverse 属性反转项目顺序
• 反向显示的适用场景
• 反向布局与不同对齐方式
• 将反向布局与方向设置结合使用

完整 API 参考

📄 阅读： references/api-reference.md

• 属性与默认值 - 全部 9 个 Timeline 属性及其类型和默认值
• 方法 - 全部 7 个 Timeline 方法（addEventListener、appendTo、dataBind 等）
• 事件与参数 - beforeItemRender 和 created 事件及 TimelineRenderingEventArgs
• 项目配置 - 全部 5 个 TimelineItemModel 属性
• 枚举 - TimelineAlign 和 TimelineOrientation 的取值
• 快速设置示例 - 完整可运行的配置

常见模式

状态跟踪时间线

使用自定义样式显示连续的状态更新：

const status = [
  { content: 'Ordered', cssClass: 'state-completed' },
  { content: 'Shipped', cssClass: 'state-progress' },
  { content: 'Delivered' }
];

let timeline: Timeline = new Timeline({
  items: status,
  cssClass: 'status-timeline'
});

双内容时间线

显示主要内容及相反方向的上下文信息：

const events = [
  { content: 'Day 1, 4:00 PM', oppositeContent: 'Check-in' },
  { content: 'Day 1, 7:00 PM', oppositeContent: 'Dinner' }
];

let timeline: Timeline = new Timeline({
  items: events,
  align: 'Alternate',
  orientation: 'Vertical'
});

水平里程碑时间线

水平显示项目里程碑：

let timeline: Timeline = new Timeline({
  items: milestones,
  orientation: 'Horizontal',
  align: 'Before'
});

设置要求

依赖项

@syncfusion/ej2-layouts
  └── @syncfusion/ej2-base

CSS 导入

@import "@syncfusion/ej2-base/styles/fluent2.css";
@import "@syncfusion/ej2-layouts/styles/fluent2.css";

HTML 元素

<div id="timeline"></div>

---

准备好开始实现了吗？ 根据当前任务选择上方的参考指南，或从入门指南开始查看设置说明。