SusTimeline

Вертикальный event log — dots / lines / titles из Items.

Пакет

SusKit · Молекулы (коммерческий)

Открыть в песочнице

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" чередует body слева/справа по индексу; Side элемента переопределяет.