SusTimeline

Vertical event log — dots / lines / titles driven by Items.

Package

SusKit · Molecules (commercial)

SusKit · Molecules

Props

Name	Type	Default
`Density`	`Prop<string>`	`"default"`	v-model
`Side`	`Prop<string>`	`"start"`	v-model

Slots

No slots.

Events

No public events.

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

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

Usage

Items are set in code (List<TimelineItem>).

csharp

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";

xml

<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>` — rows
`Density`	`default` · `compact` · `comfortable`
`Side`	`start` · `end` · `alternate`

Notes

Item fields: Title, Subtitle, Icon, Color, optional per-item Side (start / end).
Dot colors: primary · secondary · success · danger · warning · info.
Side="alternate" flips body left/right by index; item Side overrides.

SusTimeline ​