Timeline и шаги прогресса для Angular | ng-hub-ui-milestones
Компонент timeline и шагов прогресса для Angular: вертикальный или горизонтальный, полностью настраиваемые узлы, контент внутри и рядом с каждым шагом, тематизация через CSS-переменные.
Справочник API
Вот полный контракт milestones: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.
Входные свойства
Настройте milestones с помощью 6 входных свойств. Привязывайте их, как любой @Input в Angular.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
orientation (hub-milestones) | 'vertical' | 'horizontal' | 'vertical' | Направление макета временной шкалы. |
state (hub-milestone) | 'complete' | 'active' | 'pending' | 'error' | 'pending' | Визуальное state узла; определяет цвета узла и соединителя. |
color (hub-milestone) | string | '' | Переопределение цвета для каждого узла (любой CSS-цвет). Имеет приоритет над цветом state. |
label (hub-milestone) | string | '' | Запасной текст, отображаемый внутри узла, когда шаблон `hubMilestoneNode` не предоставлен. |
pulse (hub-milestones) | boolean | false | При установке на `<hub-milestones>` активный узел излучает мягкую расходящуюся волну, привлекая внимание к текущему шагу. Опционально; учитывает `prefers-reduced-motion`. |
reveal (hub-milestones) | boolean | true | Когда таймлайн появляется в области просмотра, он анимирует заполнение акцентной линии до активного узла. Включено по умолчанию — настраивается глобально через `provideHubMilestones({ reveal: false })` или для экземпляра через `[reveal]`. Учитывает `prefers-reduced-motion`. |
События
События пока не задокументированы.
Шаблоны
Сделайте его своим — 2 слотов шаблона позволяют проецировать собственную разметку.
| Имя | Описание | Пример |
|---|---|---|
hubMilestoneNode | Помечает `<ng-template>`, содержимое которого отрисовывается ВНУТРИ круга вехи (число, иконка, эмодзи, аватар). Имеет приоритет над `label` и автонумерацией. | <hub-milestone>
<ng-template hubMilestoneNode>★</ng-template>
<h4>Shipped</h4>
</hub-milestone> |
hub-milestone body (ng-content) | Любое содержимое, спроецированное напрямую в `hub-milestone` (вне шаблона узла), отрисовывается как тело рядом с кругом. | <hub-milestone state="active">
<h4>Payment</h4>
<p>Enter your payment method.</p>
</hub-milestone> |
CSS-переменные
Тематизируйте каждый пиксель с помощью 20 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
Узел
Круглый узел: его размер, цвета и поверхности для каждого состояния.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-milestone-node-size | 2.75rem | length | Диаметр круга узла. |
--hub-milestone-node-font-size | 1.05rem | length | Размер шрифта содержимого узла (число / метка). |
--hub-milestone-node-color | var(--hub-sys-color-primary, #0d6efd) | color | Фон узла для завершённых / активных состояний. `color` отдельного узла переопределяет это. |
--hub-milestone-node-text | var(--hub-ref-color-white, #ffffff) | color | Цвет содержимого узла на цветных узлах. |
--hub-milestone-pending-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Фон ожидающего узла. |
--hub-milestone-pending-color | var(--hub-sys-text-muted, #6c757d) | color | Цвет содержимого ожидающего узла. |
--hub-milestone-pending-border | var(--hub-sys-border-color-default, #dee2e6) | color | Цвет границы ожидающего узла. |
--hub-milestone-error-bg | var(--hub-sys-color-danger, #dc3545) | color | Фон узла с ошибкой. |
Соединитель и компоновка
Линия, проведённая между узлами, и отступы временной шкалы.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-milestone-connector-thickness | 3px | length | Толщина соединительной линии. |
--hub-milestone-connector-bg | var(--hub-milestone-node-color) | string | Заливка соединителя между завершёнными / активными узлами. |
--hub-milestone-connector-pending-bg | var(--hub-sys-border-color-default, #dee2e6) | color | Заливка соединителя, ведущего к ожидающему узлу. |
--hub-milestone-gap | 1rem | length | Промежуток между линией узлов и содержимым тела. |
--hub-milestone-spacing | 1.75rem | length | Расстояние между последовательными шагами. |
Тело
Текстовое содержимое, размещённое рядом с каждым узлом.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-milestone-body-color | var(--hub-sys-text-primary, #212529) | color | Основной цвет текста тела. |
--hub-milestone-body-muted | var(--hub-sys-text-muted, #6c757d) | color | Приглушённый / вторичный цвет текста тела. |
Анимация
Настройка опциональной пульсации активного узла и линии раскрытия при появлении.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-milestone-pulse-color | var(--hub-milestone-node-color) | color | Цвет волны пульсации активного узла. По умолчанию — акцент узла, поэтому учитывает переопределение `color` для узла. |
--hub-milestone-pulse-duration | 1.6s | string | Длительность одного цикла пульсации. |
--hub-milestone-pulse-spread | 0.75rem | length | Насколько далеко волна пульсации расходится от узла. |
--hub-milestone-reveal-duration | 0.5s | string | Длительность заполнения каждого коннектора во время раскрытия. |
--hub-milestone-reveal-stagger | 0.14s | string | Задержка между заполнением соседних коннекторов, создающая каскадное раскрытие. |
Стилизация и тематизация
Примеры стилизации пока не задокументированы. В этом разделе будут рецепты кастомизации и примеры тематизации.