Angular Breadcrumbs-Komponente | ng-hub-ui-breadcrumbs
Angular Breadcrumbs-Komponente mit Router-Integration, individuellen Templates, RTL-Unterstützung und flexiblen Styling-Tokens.
API-Referenz
Hier ist der vollständige Vertrag für breadcrumbs: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.
Inputs
Stelle breadcrumbs mit 1 Inputs ein. Binde sie wie jeden Angular-@Input.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
breadcrumbs$ | Observable<BreadcrumbItem[]> | — | Observable-Stream von Breadcrumb-Elementen, die automatisch aus den Routendaten generiert werden. |
Outputs
Noch keine Outputs dokumentiert.
Templates
Mach es zu deinem — 1 Template-Slots lassen dich eigenes Markup projizieren.
| Name | Beschreibung | Beispiel |
|---|---|---|
hubBreadcrumbItem | Benutzerdefiniertes Template zum Rendern einzelner Breadcrumb-Elemente | <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-Variablen
Gestalte jedes Pixel mit 17 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.
Trennzeichen & Layout
Steuert das Erscheinungsbild des Trennzeichens und die gesamte Layout-Struktur
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-breadcrumb-divider | '/' | string | Zeichen oder Symbol, das als Trenner zwischen breadcrumbs-Elementen verwendet wird '>''→''•''|' |
--hub-breadcrumb-divider-color | #6c757d | color | Farbe des Trennzeichens #666666var(--bs-secondary)rgba(0,0,0,0.5) |
--hub-breadcrumb-padding-x | 0 | length | Horizontaler Innenabstand um die gesamte breadcrumbs-Komponente 0.5rem1rem0.75rem |
--hub-breadcrumb-padding-y | 0 | length | Vertikaler Innenabstand um die gesamte breadcrumbs-Komponente 0.25rem0.5rem0.75rem |
Farben & Hintergrund
Passt die Farben und das Hintergrund-Erscheinungsbild der breadcrumbs-Elemente an
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-breadcrumb-bg | transparent | color | Hintergrundfarbe des breadcrumbs-Containers #f8f9fa#ffffffvar(--bs-light) |
--hub-breadcrumb-item-color | #6c757d | color | Schriftfarbe für nicht aktive breadcrumbs-Elemente (Links) #495057var(--bs-secondary)#666666 |
--hub-breadcrumb-item-active-color | #212529 | color | Schriftfarbe für das aktive (aktuelle) breadcrumbs-Element #000000var(--bs-dark)#333333 |
--hub-breadcrumb-item-hover-color | #0d6efd | color | Schriftfarbe beim Überfahren von breadcrumbs-Links #0056b3var(--bs-primary)#007bff |
Abstände & Typografie
Steuert den Abstand zwischen Elementen und die Typografie-Einstellungen
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-breadcrumb-item-padding-x | 0.5rem | length | Horizontaler Innenabstand um einzelne breadcrumbs-Elemente 0.25rem0.75rem1rem |
--hub-breadcrumb-item-padding-y | 0 | length | Vertikaler Innenabstand um einzelne breadcrumbs-Elemente 0.25rem0.5rem0.75rem |
--hub-breadcrumb-font-size | 1rem | length | Schriftgröße für breadcrumbs-Text 0.875rem1.125rem1.25rem |
--hub-breadcrumb-font-weight | 400 | string | Schriftstärke für breadcrumbs-Text 500600bold |
Rahmen & visuelle Effekte
Konfiguriert Rahmen, Radius und visuelle Verbesserungen
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-breadcrumb-border-radius | 0 | length | Rahmenradius für den breadcrumbs-Container 0.25rem0.375rem0.5rem |
--hub-breadcrumb-border | none | border | Rahmen um den breadcrumbs-Container 1px solid #dee2e62px solid #e9ecefnone |
--hub-breadcrumb-margin-bottom | 1rem | length | Unterer Außenabstand für die breadcrumbs-Komponente 0.5rem1.5rem2rem |
RTL-Unterstützung
Variablen für die RTL-Layout-Unterstützung
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-breadcrumb-rtl-divider | '' | string | Trennzeichen, das in RTL-Layouts verwendet wird (umgekehrte Richtung) '<''←''' |
--hub-breadcrumb-direction | ltr | string | Textrichtung für das breadcrumbs-Layout rtlltr |
Styling und Theming
CSS-Variablen & Theming
Vollständige Theming-Kontrolle über CSS Custom Properties für Trennzeichen, Farben, Abstände und visuelles Erscheinungsbild.
Beispiele:
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: