TrackItem
Одна строка ленты событий. Используйте напрямую, если нужна кастомная раскладка — например, встраивание событий в таблицу или сетку с собственной логикой группировки. Для типового сценария «массив → вертикальная лента» возьмите Timeline.
Когда использовать
- Своя раскладка, где
Timelineне подходит (встраивание в таблицу, grid, виртуализированный список). - Нужен контроль над отдельным элементом: состояние маркера, положение контента, пропуск соединительной линии.
Анатомия
Position
Положение элемента в ленте — от него зависит, какие соединительные линии рисуются:
start— первый элемент, линия только снизу.center— промежуточный, линии сверху и снизу.end— последний, линия только сверху.
Timeline проставляет его сам; задавать вручную нужно только при ручной сборке из TrackItem.
Content position (default right)
Сторона, с которой рендерится контент относительно трека:
left— слева.right— справа.
Используется в двухколоночных таймлайнах.
Установка
pnpm add @cloud-ru/ds-timelineimport { TrackItem } from '@cloud-ru/ds-timeline'Примеры использования
Смотрите примеры в Timeline — TrackItem используется как внутренний строительный блок.
Props
Types
Props
TrackItemProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
alternateMode | boolean | — | no | Перемешать положение контента |
content | ReactNode | — | yes | Контент |
contentPosition | "left" | "right" | right | no | Положение контента |
data-test-id | string | — | no | Стабильный идентификатор для e2e/tests |
dotAppearance | "blue" | "green" | "neutral" | "orange" | "pink" | "primary" | "red" | "violet" | "yellow" | — | no | Семантический цвет маркера |
dotVariant | "default" | "subEvent" | — | no | Вид маркера |
key | string | — | no | Уникальный ключ |
lineStyle | "dashed" | "solid" | — | no | Стиль нижней линии |
opposite | ReactNode | — | no | Контент в противоположной колонке |
position | "center" | "end" | "start" | — | yes | Положение элемента в ленте: первый, промежуточный или последний |
showLines | boolean | — | no | Показывать вертикальные сегменты |