syncfusion-angular-timeline

用途

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

主要能力

• 布局方向：支持垂直（Vertical，默认，自上而下）和水平（Horizontal，自左向右）两种方向。
• 内容对齐：通过 align 属性支持 Before、After（默认）、Alternate（左右交替/锯齿形）、AlternateReverse 四种对齐方式。
• 双侧内容：通过 oppositeContent 在时间线两侧展示内容。
• 条目内容：支持字符串内容、对象内容、模板渲染、CSS 类样式、禁用状态（disabled）以及 dot-item 属性，并支持从数组进行数据绑定。
• 顺序反转：通过 reverse 属性反转条目顺序，可用于“最新优先”的时间线。
• 自定义：可对连接线（通用或单个条目）进行样式设置；可定制点的外观（大小、颜色、轮廓、阴影、变体）；通过 dotCss 属性为点添加图标（如 Material Icons、FontAwesome）；可设置条目间距与边框；支持基于 CSS 类的定制。
• 事件：提供 created（组件初始化后触发）和 beforeItemRender（条目渲染前触发）事件，可在事件中动态修改条目或进行条件样式设置。
• 模板：通过 template 属性实现完全自定义，模板上下文包含 item 和 itemIndex，可自定义点指示器、内容区布局以及连接线。
• 高级属性：enablePersistence（将状态持久化到 localStorage）、enableRtl（从右到左布局支持）、locale（本地化设置）。

使用方式

组件从 @syncfusion/ej2-angular-layouts 包导入 TimelineModule 和 TimelineAllModule，支持 Angular 21 独立架构（standalone）。基本用法如下：

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

常见模式包括：

• 活动流（逆序）：<ejs-timeline [reverse]="true" align="Before">，用于最新活动优先、新闻流、日志条目。
• 交替时间线（平衡布局）：<ejs-timeline align="Alternate" orientation="Horizontal">，用于视觉平衡、左右交替内容、公司历史。
• 自定义样式时间线：<ejs-timeline align="Before" [cssClass]="'custom-timeline'">，用于品牌化样式、条目状态视觉区分、自定义主题。

适用场景

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

限制

资料中未提供关于收费、价格、平台兼容性、性能限制或具体版本要求的信息，暂未提供。