syncfusion-javascript-timeline

用途

Syncfusion TypeScript Timeline 控件用于按时间顺序或序列布局展示内容项。该技能适用于以下场景：按时间顺序或序列展示项目；可视化时间线、里程碑或事件进展；展示工作流步骤或流程；创建状态跟踪显示（如订单跟踪、项目里程碑、职业路径）；以 Before、After、Alternate 或 Reverse 对齐方式排列内容；通过圆点、连接线和样式定制时间线外观；处理生命周期和渲染回调等时间线事件；使用水平或垂直方向布局时间线。

主要能力

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

核心概念

关键属性

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：布尔值，禁用特定项目

使用方式

基本时间线创建

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

// 创建时间线项目
let timeline: Timeline = new Timeline({
  items: [{}, {}, {}, {}]
});

// 渲染到 DOM 元素
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");

状态跟踪时间线

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>

文档导航

入门与设置：包安装与依赖、开发环境设置、CSS 样式导入与主题、基本时间线创建与初始化、首个可运行示例
项目、内容与对侧内容：添加字符串内容、使用模板选择器、配置 oppositeContent、禁用特定项目、自定义 CSS 类、使用 dotCss 定制圆点
对齐与方向模式：Before、After、Alternate、AlternateReverse 对齐、垂直与水平方向、布局组合与用例
定制与样式：通用连接线样式、单个连接线样式、圆点颜色定制、通过 CSS 变量调整圆点大小、圆点边框与轮廓样式、CSS 选择器模式、高级样式技术
模板与自定义渲染：template 属性与选择器、模板上下文（item、itemIndex）、高级 HTML 模板、模板内圆点定制、进度线样式、模板最佳实践
事件与生命周期钩子：Created 事件、beforeItemRender 事件、TimelineRenderingEventArgs、事件回调模式
反向布局模式：reverse 属性、反向显示用例、反向与不同对齐组合、反向与方向组合
完整 API 参考：全部 9 个 Timeline 属性及类型和默认值、全部 7 个 Timeline 方法、事件与参数、全部 5 个 TimelineItemModel 属性、TimelineAlign 和 TimelineOrientation 枚举值、快速设置示例

适用场景

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

限制

资料中未提供关于收费、价格、平台兼容性、性能效果或具体使用步骤的额外信息。