STimeline

Вертикальная черта с точками-пунктами.

В чем отличие от аналогов?

В отличие от популярных библиотек компонентов для Vue3:

1. Упрощено до минимально необходимого функционала, что обеспечивает одинаковое написание кода и взаимозаменяемость компонентов дальше.

Базовый пример

2 д. 6 ч назад Иванов остановил переходы

4 д. 2 ч назад Петров остановил переходы

22 д. 1 ч назад Сидоров остановил переходы

<STimeline :items="items">
    <template #item="{ item }">
        <strong>{{ item.last_visit_diff }} назад</strong> {{ item.username }} остановил переходы
    </template>
</STimeline>

<template>
    <STimeline :items="items">
        <template #item="{ item }">
            <strong>{{ item.last_visit_diff }} назад</strong> {{ item.username }} остановил переходы
        </template>
    </STimeline>
</template>
<script setup>
const items = [
    { id: 1, last_visit_diff: '2 д. 6 ч', username: 'Иванов' },
    { id: 2, last_visit_diff: '4 д. 2 ч', username: 'Петров' },
    { id: 3, last_visit_diff: '22 д. 1 ч', username: 'Сидоров' }
]
</script>

Интерфейс компонента

Свойства (Props)

Название	Тип	По умолчанию	Описание
items	Array	undefined	Обязательный массив объектов данных для итерации по таймлайну.

Слоты (Slots)

Название	Привязки	Описание
item	{ item: Object, index: number }	Слот для отображения содержимого рядом с маркером таймлайна для каждого элемента.