Composant Breadcrumbs Angular | ng-hub-ui-breadcrumbs
Composant breadcrumbs Angular avec intégration au Router, templates personnalisés, support RTL et tokens de style flexibles.
Référence API
Voici le contrat complet de breadcrumbs : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.
Inputs
Réglez breadcrumbs à votre goût avec 1 inputs. Liez-les comme n’importe quel @Input Angular.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
breadcrumbs$ | Observable<BreadcrumbItem[]> | — | Flux Observable d'éléments de fil d'Ariane générés automatiquement à partir des données de route. |
Outputs
Aucun output documenté pour le moment.
Templates
Faites-le vôtre — 1 emplacements de template vous permettent de projeter votre propre balisage.
| Nom | Description | Exemple |
|---|---|---|
hubBreadcrumbItem | Modèle personnalisé pour le rendu des éléments individuels du fil d'Ariane. | <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> |
Variables CSS
Personnalisez chaque pixel avec 17 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Séparateur et mise en page
Contrôlez l'apparence du séparateur et la structure globale de la mise en page.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-breadcrumb-divider | '/' | string | Caractère ou symbole utilisé comme séparateur entre les éléments du breadcrumb. '>''→''•''|' |
--hub-breadcrumb-divider-color | #6c757d | color | Couleur du séparateur. #666666var(--bs-secondary)rgba(0,0,0,0.5) |
--hub-breadcrumb-padding-x | 0 | length | Rembourrage horizontal autour de l'ensemble du composant breadcrumb. 0.5rem1rem0.75rem |
--hub-breadcrumb-padding-y | 0 | length | Rembourrage vertical autour de l'ensemble du composant breadcrumb. 0.25rem0.5rem0.75rem |
Couleurs et arrière-plan
Personnalisez les couleurs et l'apparence de l'arrière-plan des éléments du breadcrumb.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-breadcrumb-bg | transparent | color | Couleur d'arrière-plan du conteneur du breadcrumb. #f8f9fa#ffffffvar(--bs-light) |
--hub-breadcrumb-item-color | #6c757d | color | Couleur du texte des éléments non actifs du breadcrumb (liens). #495057var(--bs-secondary)#666666 |
--hub-breadcrumb-item-active-color | #212529 | color | Couleur du texte de l'élément actif (courant) du breadcrumb. #000000var(--bs-dark)#333333 |
--hub-breadcrumb-item-hover-color | #0d6efd | color | Couleur du texte au survol des liens du breadcrumb. #0056b3var(--bs-primary)#007bff |
Espacement et typographie
Contrôlez l'espacement entre les éléments et les réglages de typographie.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-breadcrumb-item-padding-x | 0.5rem | length | Rembourrage horizontal autour des éléments individuels du breadcrumb. 0.25rem0.75rem1rem |
--hub-breadcrumb-item-padding-y | 0 | length | Rembourrage vertical autour des éléments individuels du breadcrumb. 0.25rem0.5rem0.75rem |
--hub-breadcrumb-font-size | 1rem | length | Taille de police du texte du breadcrumb. 0.875rem1.125rem1.25rem |
--hub-breadcrumb-font-weight | 400 | string | Graisse de police du texte du breadcrumb. 500600bold |
Bordure et effets visuels
Configurez les bordures, le rayon et les améliorations visuelles.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-breadcrumb-border-radius | 0 | length | Rayon de bordure du conteneur du breadcrumb. 0.25rem0.375rem0.5rem |
--hub-breadcrumb-border | none | border | Bordure autour du conteneur du breadcrumb. 1px solid #dee2e62px solid #e9ecefnone |
--hub-breadcrumb-margin-bottom | 1rem | length | Marge inférieure du composant breadcrumb. 0.5rem1.5rem2rem |
Prise en charge RTL
Variables pour la prise en charge de la mise en page de droite à gauche.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-breadcrumb-rtl-divider | '' | string | Caractère séparateur utilisé dans les mises en page RTL (direction inversée). '<''←''' |
--hub-breadcrumb-direction | ltr | string | Direction du texte pour la mise en page du breadcrumb. rtlltr |
Styles et theming
Variables CSS et thématisation
Contrôle complet de la thématisation via les propriétés personnalisées CSS pour les séparateurs, les couleurs, l'espacement et l'apparence visuelle.
Exemples:
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
Code
Code
Import:
Template:
Component: