Компонент Breadcrumbs для Angular | ng-hub-ui-breadcrumbs
Компонент breadcrumbs для Angular с интеграцией с Router, пользовательскими шаблонами, поддержкой RTL и гибкими токенами стилизации.
Справочник API
Вот полный контракт breadcrumbs: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.
Входные свойства
Настройте breadcrumbs с помощью 1 входных свойств. Привязывайте их, как любой @Input в Angular.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
breadcrumbs$ | Observable<BreadcrumbItem[]> | — | Поток Observable элементов хлебных крошек, автоматически генерируемый из данных маршрута. |
События
События пока не задокументированы.
Шаблоны
Сделайте его своим — 1 слотов шаблона позволяют проецировать собственную разметку.
| Имя | Описание | Пример |
|---|---|---|
hubBreadcrumbItem | Пользовательский шаблон для отрисовки отдельных элементов хлебных крошек | <ng-template hubBreadcrumbItem let-item let-isLast="isLast">
@if (!isLast) {
<a [routerLink]="item.url" class="breadcrumb-link">{{ item.label }}</a>
} @else {
<span class="breadcrumb-current">{{ item.label }}</span>
}
</ng-template> |
CSS-переменные
Тематизируйте каждый пиксель с помощью 17 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
Разделитель и компоновка
Управление видом разделителя и общей структурой компоновки
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-breadcrumb-divider | '/' | string | Символ, используемый как разделитель между элементами breadcrumbs '>''→''•''|' |
--hub-breadcrumb-divider-color | #6c757d | color | Цвет разделителя #666666var(--bs-secondary)rgba(0,0,0,0.5) |
--hub-breadcrumb-padding-x | 0 | length | Горизонтальный отступ вокруг всего компонента breadcrumbs 0.5rem1rem0.75rem |
--hub-breadcrumb-padding-y | 0 | length | Вертикальный отступ вокруг всего компонента breadcrumbs 0.25rem0.5rem0.75rem |
Цвета и фон
Настройка цветов и вида фона элементов breadcrumbs
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-breadcrumb-bg | transparent | color | Цвет фона контейнера breadcrumbs #f8f9fa#ffffffvar(--bs-light) |
--hub-breadcrumb-item-color | #6c757d | color | Цвет текста неактивных элементов breadcrumbs (ссылок) #495057var(--bs-secondary)#666666 |
--hub-breadcrumb-item-active-color | #212529 | color | Цвет текста активного (текущего) элемента breadcrumbs #000000var(--bs-dark)#333333 |
--hub-breadcrumb-item-hover-color | #0d6efd | color | Цвет текста при наведении на ссылки breadcrumbs #0056b3var(--bs-primary)#007bff |
Отступы и типографика
Управление расстоянием между элементами и настройками типографики
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-breadcrumb-item-padding-x | 0.5rem | length | Горизонтальный отступ вокруг отдельных элементов breadcrumbs 0.25rem0.75rem1rem |
--hub-breadcrumb-item-padding-y | 0 | length | Вертикальный отступ вокруг отдельных элементов breadcrumbs 0.25rem0.5rem0.75rem |
--hub-breadcrumb-font-size | 1rem | length | Размер шрифта текста breadcrumbs 0.875rem1.125rem1.25rem |
--hub-breadcrumb-font-weight | 400 | string | Насыщенность шрифта текста breadcrumbs 500600bold |
Границы и визуальные эффекты
Настройка границ, радиуса и визуальных улучшений
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-breadcrumb-border-radius | 0 | length | Радиус скругления контейнера breadcrumbs 0.25rem0.375rem0.5rem |
--hub-breadcrumb-border | none | border | Граница вокруг контейнера breadcrumbs 1px solid #dee2e62px solid #e9ecefnone |
--hub-breadcrumb-margin-bottom | 1rem | length | Нижний внешний отступ компонента breadcrumbs 0.5rem1.5rem2rem |
Поддержка RTL
Переменные для поддержки компоновки справа налево
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-breadcrumb-rtl-divider | '' | string | Символ разделителя, используемый в RTL-компоновках (обратное направление) '<''←''' |
--hub-breadcrumb-direction | ltr | string | Направление текста для компоновки breadcrumbs rtlltr |
Стилизация и тематизация
CSS-переменные и темизация
Полный контроль темизации через пользовательские CSS-свойства для разделителей, цветов, отступов и визуального вида.
Примеры:
CSS Variables Customization
Customize breadcrumbs appearance using CSS custom properties for complete theming
Breadcrumbs - CSS Variables Styling
Customization of dividers, colors, and spacing through CSS variables
Custom Divider
Custom Colors (via CSS class)
Spacing & Radius
Код
Код
Import:
Template:
Component: