syncfusion-blazor-timeline

实现 Blazor Timeline 组件

Syncfusion Blazor Timeline 组件可按时间顺序显示一系列事件或里程碑。它适用于可视化项目进度、历史时间线、配送跟踪或流程工作流。

何时使用此技能

在需要以下功能时使用 Timeline 组件：

• 按时间顺序显示事件（项目阶段、物流跟踪、工作流步骤）
• 通过相对布局显示前后信息（将日期与描述配对）
• 创建垂直或水平时间线布局
• 自定义视觉外观（颜色、圆点、连接线）
• 使用模板呈现复杂内容
• 处理组件生命周期事件

组件概述

Timeline 组件会按顺序呈现一系列项，每项包含：

• Content：主要信息或描述
• OppositeContent：显示在内容对侧的辅助信息
• Dot：视觉指示器（可使用图标、图像或文本进行自定义）
• Connector：用于在视觉上连接各项的线条

主要功能：

• 多种对齐模式（Before、After、Alternate、AlternateReverse）
• 水平和垂直方向
• 自定义项样式和禁用状态
• 用于组件生命周期的事件回调
• 基于模板的呈现，支持高级布局
• 反向顺序呈现

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装 Syncfusion.Blazor.Layouts 和 Themes NuGet 包
• 配置导入并注册 Blazor 服务
• 添加样式表和脚本资源
• 创建第一个基础时间线
• 运行并测试应用程序

Timeline 对齐方式

📄 阅读： references/timeline-alignment.md

• 使用 Alignment 属性控制内容显示方式
• Before：内容置于前方／左侧，OppositeContent 置于后方／右侧
• After：内容置于后方／右侧，OppositeContent 置于前方／左侧
• Alternate：无论方向如何，各项均交替排列
• AlternateReverse：反向交替排列
• 在不同对齐方式下使用 OppositeContent

Timeline 项

📄 阅读： references/timeline-items.md

• 使用 Content 指令添加 TimelineItem 组件
• 字符串内容与模板内容方式
• 使用 OppositeContent 显示双重信息
• 使用 DotCss 自定义圆点（图标、图像、文本）
• 使用 Disabled 属性禁用项
• 使用 CssClass 应用自定义 CSS 类

Timeline 方向

📄 阅读： references/timeline-orientation.md

• 垂直方向：按从上到下的顺序显示各项（默认）
• 水平方向：并排显示各项
• 组合使用方向和对齐方式以创建不同布局
• 响应式设计注意事项

Timeline 事件

📄 阅读： references/timeline-events.md

• Created：组件完成呈现时触发
• ItemRendered：每项呈现后触发
• 访问事件参数和项信息
• 常见事件处理模式

样式与自定义

📄 阅读： references/timeline-styling-customization.md

• 连接线样式（通用和单项）
• 自定义圆点颜色、大小、阴影和变体
• 用于圆点外观的 CSS 变量（--dot-size、--dot-outer-space、--dot-border）
• 圆点轮廓模式（e-outline 类）
• 组件级 CSS 类

模板与高级模式

📄 阅读： references/timeline-templates.md

• 使用 Template 指令完全自定义项
• 从模板上下文访问 Item 和 ItemIndex
• 创建进度条、自定义连接线和指示器
• 高级布局模式

API 参考

📄 阅读： references/api-reference.md

• SfTimeline 组件的完整属性
• TimelineItem 属性和配置
• TimelineAlignment 枚举值
• TimelineOrientation 枚举值
• TimelineRenderedEventArgs 事件参数
• CSS 类和 CSS 变量
• 所有 API 的代码示例
• 常见实现模式

快速入门示例

@using Syncfusion.Blazor.Layouts

<div style="height: 350px;">
    <SfTimeline>
        <TimelineItems>
            <TimelineItem>
                <Content>Event 1</Content>
                <OppositeContent>2024-01-01</OppositeContent>
            </TimelineItem>
            <TimelineItem>
                <Content>Event 2</Content>
                <OppositeContent>2024-01-15</OppositeContent>
            </TimelineItem>
            <TimelineItem>
                <Content>Event 3</Content>
                <OppositeContent>2024-02-01</OppositeContent>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>

常见用例

1. 订单／配送时间线

使用带有相反内容的对齐方式，通过时间戳和地点显示订单状态。

2. 项目里程碑时间线

使用水平方向展示项目阶段、开始／结束日期和描述。

3. 历史时间线

使用 Alternate 对齐方式，在一侧显示日期、另一侧显示描述，以垂直方式呈现历史事件。

4. 进度跟踪

通过自定义圆点颜色和禁用状态，可视化工作流步骤，区分已完成和待处理项目。

关键属性

属性	类型	用途
Alignment	TimelineAlignment 枚举	定位内容（Before、After、Alternate、AlternateReverse）
Orientation	TimelineOrientation 枚举	布局方向（Vertical、Horizontal）
Reverse	bool	反转项目顺序
CssClass	string	用于设置样式的自定义 CSS 类
Created	event	组件完成渲染时触发
ItemRendered	event	每个项目渲染后触发

项目属性：

属性	类型	用途
Content	RenderFragment	主要信息
OppositeContent	RenderFragment	辅助信息
DotCss	string	用于设置圆点样式的 CSS 类（图标、图片）
Disabled	bool	禁用该项目
CssClass	string	用于设置项目样式的自定义 CSS 类

关键设置步骤

1. 安装 NuGet 包：Syncfusion.Blazor.Layouts、Syncfusion.Blazor.Themes
2. 添加导入：在 _Imports.razor 中添加 @using Syncfusion.Blazor.Layouts
3. 注册服务：在 Program.cs 中添加 builder.Services.AddSyncfusionBlazor()
4. 引入样式表：将 material3.css 添加到 index.html
5. 创建时间线：使用 <SfTimeline> 和 <TimelineItems> 集合