Компонент TimelineItem представляет собой отдельный элемент внутри Timeline. Отображает точку на временной линии, заголовок, время и контент. Поддерживает кастомизацию цвета и стиля точки, анимацию пульсации и форматирование времени.
- Основное назначение: элемент хронологического списка с точкой, заголовком, временной меткой и содержимым.
- Ключевые возможности:
- Автоматическое наследование варианта оформления от родительского
Timeline. - Выбор цвета точки из палитры.
- Анимация пульсации (
isPing). - Форматирование времени с учётом локали.
- Кастомная точка через слот
point. - Гибкая настройка классов через
classNames. - Проброс всех атрибутов.
| Проп | Тип | По умолчанию | Описание |
|---|
title | String | '' | Заголовок элемента. |
time | String | Number | | Временная метка. Принимает строку или timestamp. Форматируется через dayjs().fromNow(). |
color | String | 'neutral' | Цвет точки. Возможные значения: 'neutral', 'primary', 'secondary', 'info', 'success', 'warning', 'error'. |
variant | String | | Вариант оформления точки. Возможные значения: 'filled', 'outlined'. Если не указан, наследуется от родительского Timeline. |
point | Boolean | false | Если true, скрывает стандартную точку, позволяя использовать кастомную через слот point. |
isPing | Boolean | false | Включает анимацию пульсации для точки. |
className | String | | Дополнительные CSS-классы для корневого элемента. |
classNames | Object | {} | Объект для кастомизации внутренних классов. Ключи: root, point, contentWrapper, title, time, content. |
| Имя слота | Описание |
|---|
default | Основное содержимое элемента (описание, изображения и т.д.). |
point | Кастомная точка. Отображается только если проп point установлен в true. |
