Отображение данных
Лента событий
Хронология: что произошло и когда. Точки соединены линией, поэтому лента читается как последовательность, а не как список.
Прогон завершён
14:36
4 файла изменено
Индексация
14:32
terrain/
Разметка
<div class="inst-timeline">
<div class="inst-timeline-item">
<span class="inst-timeline-dot" data-tone="ok"></span>
<div class="inst-timeline-body">
Прогон завершён
<div class="inst-timeline-sub">4 файла изменено</div>
</div>
<span class="inst-timeline-time">14:36</span>
</div>
<div class="inst-timeline-item">
<span class="inst-timeline-dot" data-tone="running"></span>
<div class="inst-timeline-body">
Индексация
<div class="inst-timeline-sub">terrain/</div>
</div>
<span class="inst-timeline-time">14:32</span>
</div>
</div>
Контракт
| Что | Обязательно | Почему |
|---|---|---|
<ol> и <li> |
да | Порядок здесь несёт смысл, и скринридер должен объявить «список из N» |
<time datetime> |
да | «14:36» без даты неоднозначно вне контекста дня |
| Тон дублируется словом в описании | да | Точка сама по себе ничего не сообщает тому, кто не различает тон |
data-tone |
нет | Без атрибута точка нейтральна |
Линия рисуется псевдоэлементом и в озвучивание не попадает — она декоративна.
Доступность
| Это список | Оберните в <ol>, а событие — в <li>: порядок здесь несёт смысл, и скринридер должен объявить «список из N» |
| Время | <time datetime="…"> с машинным значением. «14:36» без даты неоднозначно вне контекста дня |
| Не только цвет | Тон точки дублируется словом в описании события. Точка сама по себе ничего не сообщает тому, кто не различает тон |
| Линия | Рисуется псевдоэлементом и в озвучивание не попадает — это правильно, она декоративна |
| Уменьшенное движение | Пульсация точки running замедляется, а не гаснет |
Варианты
Точка берёт тот же data-tone, что и вся библиотека.
Рядовое событие
Происходит сейчас
Успешно завершено
С замечаниями
Отказ
Разметка
<div class="inst-timeline">
<div class="inst-timeline-item">
<span class="inst-timeline-dot"></span>
<div class="inst-timeline-body">Рядовое событие</div>
</div>
<div class="inst-timeline-item">
<span class="inst-timeline-dot" data-tone="running"></span>
<div class="inst-timeline-body">Происходит сейчас</div>
</div>
<div class="inst-timeline-item">
<span class="inst-timeline-dot" data-tone="ok"></span>
<div class="inst-timeline-body">Успешно завершено</div>
</div>
<div class="inst-timeline-item">
<span class="inst-timeline-dot" data-tone="warn"></span>
<div class="inst-timeline-body">С замечаниями</div>
</div>
<div class="inst-timeline-item">
<span class="inst-timeline-dot" data-tone="error"></span>
<div class="inst-timeline-body">Отказ</div>
</div>
</div>
| Тон | Когда |
|---|---|
| без атрибута | Рядовое событие |
data-tone="running" |
Происходит сейчас. Точка пульсирует |
data-tone="ok" |
Успешное завершение |
data-tone="warn" |
С замечаниями |
data-tone="error" |
Отказ |
API
| Имя | Что делает |
|---|---|
| класс | |
inst-timeline | Контейнер |
inst-timeline-item | Одно событие |
inst-timeline-dot | Точка на линии |
inst-timeline-body | Описание события |
inst-timeline-sub | Подробность под описанием |
inst-timeline-time | Отметка времени, прижата к концу |
| Имя | Значение | Что делает |
|---|---|---|
| атрибут | ||
data-tone | — | neutral running ok warn error |
| Имя | Значение | Откуда |
|---|---|---|
| токен | ||
--size-gutter | 14px | база +14: плотность · масштаб |
--gap-inline | var(--space-4) | база +14: плотность · масштаб |
--row-pad-y | var(--space-3) | база +14: плотность · масштаб |
--size-dot | 6px | база +4: масштаб |
--size-marker | 2px | база +4: масштаб |
--border | light-dark(oklch(0 0 0 / 0.12), oklch(1 0 0 / 0.11)) | одно на все ячейки |
--text-sm | 0.875rem | база +4: масштаб |
--text-xs | 0.78125rem | база +4: масштаб |
--text-muted | light-dark(var(--n-8), var(--n-6)) | одно на все ячейки |
--tone-mark | var(--text-secondary) | база +4: |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument