Компонент Timeline используется для отображения хронологических списков, историй изменений, шагов процесса и других последовательностей событий. Работает как контейнер для дочерних элементов TimelineItem.
- Основное назначение: вертикальный список событий с единой временной линией.
- Ключевые возможности:
- Настройка размера точки (
pointSize). - Настройка толщины линии (
lineWidth). - Дополнительный отступ между линией и контентом (
lineSpace). - Два варианта оформления точек:
filled и outlined. - Передача настроек дочерним элементам через
provide/inject. - Проброс всех атрибутов.
| Проп | Тип | По умолчанию | Описание |
|---|
variant | String | 'filled' | Вариант оформления точек на линии. Возможные значения: 'filled', 'outlined'. |
pointSize | String | '0.75rem' | Размер точки на временной линии. Принимает любое валидное CSS-значение размера. |
lineWidth | String | '1px' | Толщина линии. Принимает любое валидное CSS-значение. |
lineSpace | String | | Отступ между линией и контентом. Принимает любое валидное CSS-значение. Если не указан, используется значение по умолчанию. |
style | Object | {} | Дополнительные CSS-стили, применяемые к корневому элементу. |
className | String | | Дополнительные CSS-классы. |
| Имя слота | Описание |
|---|
default | Содержимое временной линии. Ожидается использование компонентов TimelineItem. |
Компонент устанавливает следующие CSS-переменные, которые можно использовать для кастомизации:
| Переменная | Описание |
|---|
--timeline-point-size | Размер точки. |
--timeline-line-width | Толщина линии. |
--timeline-line-space | Отступ между линией и контентом (только если передан lineSpace). |
