时间轴 (Timeline)

用于显示时间节点内容。

概述

支持状态节点和自定义模板

代码演示

1.默认示例

第一标题第一节点内容
第二标题第二节点内容
第三标题第三节点内容

namespace WebSite.Docus.View.Timelines;

class Timeline1 : BaseComponent
{
    private readonly List<TimelineItem> items = new()
    {
        new TimelineItem { Title = "第一标题", Description = "第一节点内容" },
        new TimelineItem { Title = "第二标题", Description = "第二节点内容" },
        new TimelineItem { Title = "第三标题", Description = "第三节点内容" }
    };

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Timeline>().Set(c => c.Items, items).Build();
    }
}

2.状态示例

审核中
发布成功
审核失败

namespace WebSite.Docus.View.Timelines;

class Timeline2 : BaseComponent
{
    private readonly List<TimelineItem> items = new()
    {
        new TimelineItem { Title = "审核中", Type = StyleType.Info },
        new TimelineItem { Title = "发布成功", Type = StyleType.Success },
        new TimelineItem { Title = "审核失败", Type = StyleType.Danger }
    };

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Timeline>().Set(c => c.Items, items).Build();
    }
}

3.自定义模板示例

第一标题第一节点内容
自定义节点2025-11-04 11:13:56自定义模板内容
第三标题第三节点内容

namespace WebSite.Docus.View.Timelines;

class Timeline3 : BaseComponent
{
    private readonly List<TimelineItem> items = new()
    {
        new TimelineItem { Title = "第一标题", Description = "第一节点内容"},
        new TimelineItem { Template = BuildTimelineItem},
        new TimelineItem { Title = "第三标题", Description = "第三节点内容"}
    };

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Timeline>().Set(c => c.Items, items).Build();
    }

    private static void BuildTimelineItem(RenderTreeBuilder builder)
    {
        builder.Span("name", "自定义节点");
        builder.Span("time", $"{DateTime.Now:yyyy-MM-dd HH:mm:ss}");
        builder.Span("text", "自定义模板内容");
    }
}