Компонент Breadcrumbs для Angular | ng-hub-ui-breadcrumbs
Компонент breadcrumbs для Angular с интеграцией с Router, пользовательскими шаблонами, поддержкой RTL и гибкими токенами стилизации.
Справочник API
Вот полный контракт breadcrumbs: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.
Входные свойства
Настройте breadcrumbs с помощью 3 входных свойств. Привязывайте их, как любой @Input в Angular.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
breadcrumbs$ | Observable<BreadcrumbItem[]> | — | Поток Observable элементов хлебных крошек, автоматически генерируемый из данных маршрута. |
variant | string | — | Семантический акцент для ссылок хлебных крошек (например, primary, success) или любое пользовательское имя токена. |
truncateItems | boolean | false | Если true, обрезает каждую подпись до --hub-breadcrumb-max-item-width многоточием и показывает подсказку при усечении. |
События
События пока не задокументированы.
Шаблоны
Сделайте его своим — 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> |