syncfusion-blazor-timeline

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Blazor Timeline Component

实现Blazor Timeline组件

The Syncfusion Blazor Timeline component enables you to display a series of events or milestones in a chronological sequence. It's ideal for visualizing project progress, historical timelines, delivery tracking, or process workflows.

Syncfusion Blazor Timeline组件可让你按时间顺序展示一系列事件或里程碑。它非常适合可视化项目进度、历史时间线、配送追踪或流程工作流。

When to Use This Skill

何时使用本技能

Use the Timeline component when you need to:

Display events in chronological order (project phases, shipping tracking, workflow steps)
Show before/after information with opposite content (dates paired with descriptions)
Create vertical or horizontal timeline layouts
Customize visual appearance (colors, dots, connectors)
Render complex content with templates
Handle component lifecycle events

在以下场景中可以使用Timeline组件：

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

Component Overview

组件概述

The Timeline component renders a series of items sequentially, with each item containing:

Content: Main information or description
OppositeContent: Secondary information displayed opposite to content
Dot: Visual indicator (customizable with icons, images, or text)
Connector: Line connecting items visually

Key capabilities:

Multiple alignment modes (Before, After, Alternate, AlternateReverse)
Horizontal and vertical orientations
Custom item styling and disabled states
Event callbacks for component lifecycle
Template-based rendering for advanced layouts
Reverse order rendering

Timeline组件按顺序渲染一系列项，每个项包含：

Content：主要信息或描述
OppositeContent：显示在Content对面的次要信息
Dot：视觉指示器（可自定义为图标、图片或文本）
Connector：用于视觉连接各项的线条

核心功能：

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

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Install Syncfusion.Blazor.Layouts and Themes NuGet packages
Configure imports and register Blazor service
Add stylesheet and script resources
Create your first basic timeline
Run and test the application

📄 阅读： references/getting-started.md

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

Timeline Alignment

时间线对齐

📄 Read: references/timeline-alignment.md

Control content display with Alignment property
Before: Content placed before/left, OppositeContent after/right
After: Content placed after/right, OppositeContent before/left
Alternate: Items arranged alternately regardless of orientation
AlternateReverse: Reverse alternate arrangement
Using OppositeContent with alignments

📄 阅读： references/timeline-alignment.md

使用Alignment属性控制内容显示
Before：Content位于左侧/上方，OppositeContent位于右侧/下方
After：Content位于右侧/下方，OppositeContent位于左侧/上方
Alternate：无论方向如何，各项交替排列
AlternateReverse：反向交替排列
在对齐方式中使用OppositeContent

Timeline Items

时间线项

📄 Read: references/timeline-items.md

Add TimelineItem components with Content directive
String content vs template content approaches
OppositeContent for dual information display
Customize dots with DotCss (icons, images, text)
Disable items with Disabled property
Apply custom CSS classes with CssClass

📄 阅读： references/timeline-items.md

添加带有Content指令的TimelineItem组件
字符串内容与模板内容的实现方式
使用OppositeContent展示双重信息
通过DotCss自定义节点（图标、图片、文本）
使用Disabled属性禁用项
通过CssClass应用自定义CSS类

Timeline Orientation

时间线方向

📄 Read: references/timeline-orientation.md

Vertical orientation: Display items sequentially top-to-bottom (default)
Horizontal orientation: Display items side-by-side
Combine orientation with alignment for different layouts
Responsive considerations

📄 阅读： references/timeline-orientation.md

垂直方向：按从上到下的顺序展示项（默认）
水平方向：并排展示项
结合方向与对齐方式实现不同布局
响应式设计考量

Timeline Events

时间线事件

📄 Read: references/timeline-events.md

Created: Fires when component rendering is completed
ItemRendered: Fires after each item is rendered
Access event arguments and item information
Common event handling patterns

📄 阅读： references/timeline-events.md

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

Styling & Customization

样式与自定义

📄 Read: references/timeline-styling-customization.md

Connector styling (common and individual)
Dot color, size, shadow, and variant customization
CSS variables for dot appearance (--dot-size, --dot-outer-space, --dot-border)
Dot outline mode (e-outline class)
Component-level CSS classes

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

连接线样式（通用与单独设置）
节点颜色、尺寸、阴影和变体自定义
用于节点外观的CSS变量（--dot-size、--dot-outer-space、--dot-border）
节点轮廓模式（e-outline类）
组件级CSS类

Template & Advanced Patterns

模板与高级模式

📄 Read: references/timeline-templates.md

Template directive for complete item customization
Access Item and ItemIndex from template context
Create progress bars, custom connectors, and indicators
Advanced layout patterns

📄 阅读： references/timeline-templates.md

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

API Reference

API参考

📄 Read: references/api-reference.md

Complete SfTimeline component properties
TimelineItem properties and configuration
TimelineAlignment enumeration values
TimelineOrientation enumeration values
TimelineRenderedEventArgs event arguments
CSS classes and CSS variables
Code examples for all APIs
Common implementation patterns

📄 阅读： references/api-reference.md

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

Quick Start Example

快速入门示例

razor

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

razor

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

Common Use Cases

常见使用场景

1. Order/Shipping Timeline

1. 订单/配送时间线

Display order status with timestamps and locations using alignment with opposite content.

使用带对立内容的对齐方式，展示包含时间戳和位置的订单状态。

2. Project Milestone Timeline

2. 项目里程碑时间线

Show project phases with start/end dates and descriptions using horizontal orientation.

使用水平方向展示包含起止日期和描述的项目阶段。

3. Historical Timeline

3. 历史时间线

Present historical events vertically with dates on one side and descriptions on the other using Alternate alignment.

使用Alternate对齐方式，垂直展示一侧为日期、另一侧为描述的历史事件。

4. Progress Tracking

4. 进度追踪

Visualize workflow steps with custom dot colors and disabled states for completed vs. pending items.

使用自定义节点颜色和禁用状态，可视化已完成与待处理的工作流步骤。

Key Properties

核心属性

Property	Type	Purpose
`Alignment`	TimelineAlignment enum	Positions content (Before, After, Alternate, AlternateReverse)
`Orientation`	TimelineOrientation enum	Layout direction (Vertical, Horizontal)
`Reverse`	bool	Reverses item order
`CssClass`	string	Custom CSS class for styling
`Created`	event	Fires when component rendering completes
`ItemRendered`	event	Fires after each item renders

Item Properties:

Property	Type	Purpose
`Content`	RenderFragment	Primary information
`OppositeContent`	RenderFragment	Secondary information
`DotCss`	string	CSS class for dot styling (icons, images)
`Disabled`	bool	Disables the item
`CssClass`	string	Custom CSS class for item styling

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

项属性：

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

Key Setup Steps

核心设置步骤

Install NuGet packages: Syncfusion.Blazor.Layouts, Syncfusion.Blazor.Themes
Add imports:
```
@using Syncfusion.Blazor.Layouts
```
in _Imports.razor
Register service:
```
builder.Services.AddSyncfusionBlazor()
```
in Program.cs
Include stylesheet: Add material3.css to index.html
Create timeline: Use
```
<SfTimeline>
```
with
```
<TimelineItems>
```
collection

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