Timeline
Высокоуровневая обёртка над TrackItem. Принимает массив items, автоматически проставляет положение первому/последнему (start / end) и промежуточным (center), рендерит соединительные линии и опциональный opposite-контент.
Демо
Заявка создана
Обработка
Выполнено
Prop
Type
Value
alternateboolean
contentPositionleft | right
data-test-idtext
fullWidthboolean
Code
<Timeline contentPosition="right" items=[{"content":"Заявка создана"},{"content":"Обработка"},{"content":"Выполнено","dotAppearance":"green"}] alternate={false} fullWidth={false} />Когда использовать
- История заявки / запроса: события + timestamp.
- Этапы процесса (онбординг, оформление заказа).
- Changelog на странице документа.
Когда не нужен: горизонтальный stepper с нумерацией — берите Stepper. Список без хронологии — обычный <ul> или компонент-список.
Анатомия
Width
auto — ширина по содержимому, full — растягивается по контейнеру (для дашбордов и полноэкранных лент).
Установка
pnpm add @cloud-ru/ds-timelineimport { Timeline } from '@cloud-ru/ds-timeline'Примеры использования
Базовый таймлайн
Заявка создана
Передана в работу
В обработке
Выполнено
tsx
import { Timeline } from '@cloud-ru/ds-timeline';
const items = [
{ content: 'Заявка создана' },
{ content: 'Передана в работу' },
{ content: 'В обработке' },
{ content: 'Выполнено' },
];
export function Basic() {
return <Timeline items={items} />;
}С opposite-колонкой
10:00
Заявка создана
10:15
Обработка
10:40
Выполнено
tsx
import { Timeline } from '@cloud-ru/ds-timeline';
const items = [
{ content: 'Заявка создана', opposite: '10:00' },
{ content: 'Обработка', opposite: '10:15' },
{ content: 'Выполнено', opposite: '10:40', dotAppearance: 'green' as const },
];
export function WithOpposite() {
return <Timeline items={items} />;
}Alternate
10:00
Создано
Назначено
10:10
10:30
Завершено
tsx
import { Timeline } from '@cloud-ru/ds-timeline';
const items = [
{ content: 'Создано', opposite: '10:00' },
{ content: 'Назначено', opposite: '10:10' },
{ content: 'Завершено', opposite: '10:30', dotAppearance: 'green' as const },
];
export function Alternate() {
return <Timeline items={items} alternate fullWidth />;
}Props
Types
Props
TimelineProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
alternate | boolean | — | no | Перемешать положение контента |
className | string | — | no | CSS-класс для элемента с контентом |
contentPosition | "left" | "right" | right | no | Положение контента |
data-test-id | string | — | no | |
fullWidth | boolean | — | no | Сделать таймлайн во всю ширину |
items | TimelineItem[] | — | yes | Пункты таймлайна |