Хронология

Вещи расположены одна под другой, каждая на маркере, соединенные линией: шаги процедуры, события истории, этапы выполнения. Каждая из них может содержать что угодно — строку текста, таблицу, форму — и линия проходит по всему этому, к следующему маркеру.

Шаги по порядку

Нумерованные, с тремя состояниями, которые знает шагомер: предыдущие шаги отображаются сплошной линией, текущий выделен, а будущие ждут.

Получить источники
Клонируйте репозиторий и установите его зависимости.
Настроить
Скопируйте пример окружения и заполните адрес базы данных.
Создать базу данных
Запустите миграции; это шаг в процессе.
Развернуть
Соберите активы и опубликуйте релиз.

Что угодно под заголовком

Каждый элемент содержит всё, что ему нужно — свойства, сообщение, кнопки. Иконка заменяет точку, а тон окрашивает маркер так же, как он окрашивает маркер или блок.

Заказ размещён
14 марта, 09:41

Ссылка

ORD-2026-0142

Сумма

€ 184.00

Способ оплаты

Карта, заканчивающаяся на 4242
Платёж получен
14 марта, 09:42
Отправлено
15 марта, 16:05

Задержка

Перевозчик сообщает о задержке на один день.
Доставка

История

Нет порядка следования, только события: точки, дата под каждым заголовком и цвет категории, который что-то говорит.

Выпущена версия 2.0
2 сентября
Проверено командой
28 августа
Первый черновик
12 августа

Шаги ещё не определены

Как в шагомере: шаг, который зависит от ответа, который еще не дан, не имеет номера и не сдвигает другие.

Получить источники
Выберите план
Зависит от плана
Развернуть

Написано от руки

Компонент — это всего лишь способ записать форму из списка. Те же классы, написанные на странице, создают ту же хронологию, с чем угодно внутри.

Простая точка
Иконка вместо точки

Любая разметка, написанная на странице.

В vue

Та же хронология в дереве vue. То, что ветка принимает как разметку, является областью слота, так что компонент может находиться под заголовком элемента.