SusTimeline

垂直事件日志 —— 由 Items 驱动的圆点 / 连线 / 标题。

包

SusKit · 分子（商业）

在 Playground 中打开

SusKit · Molecules

属性

名称	类型	默认值
Density	Prop<string>	"default"	v-model
Side	Prop<string>	"start"	v-model

插槽

没有插槽。

事件

没有公开事件。

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• sus-timeline
• sus-timeline__body
• sus-timeline__divider
• sus-timeline__dot
• sus-timeline__dot--danger
• sus-timeline__dot--info
• sus-timeline__dot--primary
• sus-timeline__dot--secondary
• sus-timeline__dot--success
• sus-timeline__dot--warning
• sus-timeline__icon
• sus-timeline__item
• sus-timeline__item--end
• sus-timeline__line
• sus-timeline__list
• sus-timeline__opposite
• sus-timeline__subtitle
• sus-timeline__title
• sus-timeline--density-comfortable
• sus-timeline--density-compact
• sus-timeline--side-alternate
• sus-timeline--side-end

用法

Items 在代码中设置（List<TimelineItem>）。

var timeline = new SusTimeline();
timeline.Items.Value = new List<SusTimeline.TimelineItem>
{
    new() { Title = "Match start", Subtitle = "00:00", Color = "primary", Icon = "play" },
    new() { Title = "Objective taken", Subtitle = "02:14", Color = "info" },
    new() { Title = "Boss down", Subtitle = "08:40", Color = "success", Icon = "check" },
};
timeline.Density.Value = "default";
timeline.Side.Value = "start";

<template>
  <sus:SusTimeline :Density="Density.Value"
                   :Side="Side.Value" />
</template>

<script>
public Prop<string> Density = new("default");
public Prop<string> Side = new("start");
// Populate Items in code.
</script>

Prop	Role
Items	List<TimelineItem> —— 各行
Density	default · compact · comfortable
Side	start · end · alternate

备注

• 项字段：Title、Subtitle、Icon、Color，以及可选的逐项 Side（start / end）。
• 圆点颜色：primary · secondary · success · danger · warning · info。
• Side="alternate" 会按索引在左右两侧交替翻转正文；逐项 Side 可覆盖此行为。