Angular Navigationsmenü-Komponente | ng-hub-ui-nav
Angular Navigationskomponente mit Dropdowns, Drill-down-Panels, responsivem Einklappen, Router-Integration und Theming über CSS-Variablen.
API-Referenz
Hier ist der vollständige Vertrag für nav: 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 nav mit 4 Inputs ein. Binde sie wie jeden Angular-@Input.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
itemsErforderlich | HubNavItem[] | — | Array von Navigationselementen, die gerendert werden. Jedes Element definiert seinen Typ (link, dropdown, header, separator, custom), label, route, icon, badge, children und mehr. |
config | Partial<HubNavConfig> | {} | Teilweise Konfigurationsüberschreibungen, die mit den globalen Standardwerten zusammengeführt werden. Steuert Ausrichtung, Dropdown-Trigger, Collapse-Modus, Breakpoint, Position und mehr. |
navClass | string | '' | Zusätzliche CSS-Klasse, die auf das nav-Container-Element angewendet wird. |
itemTemplate | TemplateRef<HubNavItemTemplateContext> | null | null | Optionales benutzerdefiniertes Template zum Rendern von Nav-Elementen über Input-Bindung. Die hubNavItemTemplate-Direktive hat Vorrang vor diesem Input. |
Outputs
Reagiere darauf, was nav tut — 5 Events, an die du deine Logik anknüpfen kannst.
| Name | Typ | Beschreibung |
|---|---|---|
itemClick | OutputEmitterRef<HubNavItem> | Wird ausgelöst, wenn auf ein Link-Element geklickt wird. Liefert den angeklickten HubNavItem. |
dropdownOpen | OutputEmitterRef<HubNavItem> | Wird ausgelöst, wenn ein Dropdown-Element geöffnet wird. |
dropdownClose | OutputEmitterRef<HubNavItem> | Wird ausgelöst, wenn ein Dropdown-Element geschlossen wird. |
mobileToggle | OutputEmitterRef<boolean> | Wird ausgelöst, wenn das mobile Panel umgeschaltet wird. Liefert true beim Öffnen, false beim Schließen. |
panelChange | OutputEmitterRef<HubNavPanelEvent> | Wird ausgelöst, wenn ein Panel geöffnet, geschlossen, hineingezoomt oder zurücknavigiert wird. Liefert das Element, den Panel-Index und den Aktionstyp. |
Templates
Mach es zu deinem — 3 Template-Slots lassen dich eigenes Markup projizieren.
| Name | Beschreibung | Beispiel |
|---|---|---|
hubNavStart | Projiziert benutzerdefinierten Inhalt in den start-Slot. Horizontal: visueller Anfang (links bei LTR, rechts bei RTL). Vertikal: oben in der primären Spalte. | <hub-nav [items]="items">
<ng-template hubNavStart let-collapsed="collapsed">
<img src="logo.svg" alt="Brand" />
@if (!collapsed) { <span>App Name</span> }
</ng-template>
</hub-nav> |
hubNavEnd | Projiziert benutzerdefinierten Inhalt in den end-Slot. Horizontal: visuelles Ende (rechts bei LTR, links bei RTL). Vertikal: unten in der primären Spalte. | <hub-nav [items]="items">
<ng-template hubNavEnd>
<button type="button">Sign out</button>
</ng-template>
</hub-nav> |
hubNavItemTemplate | Überschreibt das Standard-Rendern von Elementen durch ein benutzerdefiniertes Template. Erhält HubNavItemTemplateContext mit den Eigenschaften $implicit (item), active, expanded und depth. | <hub-nav [items]="items">
<ng-template hubNavItemTemplate let-item let-active="active">
<span [class.fw-bold]="active">{{ item.label }}</span>
@if (item.badge) { <span class="badge">{{ item.badge }}</span> }
</ng-template>
</hub-nav> |
CSS-Variablen
Gestalte jedes Pixel mit 42 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.
Layout
Steuert die gesamten nav-Abmessungen, den Innenabstand und die Abstände.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-nav-height | 3.5rem | length | Höhe der Navigationsleiste. 3rem4remauto |
--hub-nav-padding-x | 1rem | length | Horizontaler Innenabstand des nav-Containers. 0.5rem1.5rem2rem |
--hub-nav-padding-y | 0.5rem | length | Vertikaler Innenabstand des nav-Containers. 0.25rem0.75rem1rem |
--hub-nav-gap | 0.25rem | length | Abstand zwischen nav-Elementen. 00.5rem1rem |
Farben & Hintergrund
Steuert das nav-Farbschema und die Rahmen.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-nav-bg | #fff | color | Hintergrundfarbe der Navigationsleiste. #f8f9fatransparentvar(--hub-sys-surface-page) |
--hub-nav-color | #212529 | color | Basis-Schriftfarbe der Navigation. #333#fffvar(--hub-sys-text-primary) |
--hub-nav-border-color | #dee2e6 | color | Rahmenfarbe der Navigationsleiste. transparent#cccvar(--hub-sys-border-color-default) |
Elemente
Styling für einzelne nav-Elemente in allen Zuständen.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-nav-item-padding-x | 1rem | length | Horizontaler Innenabstand innerhalb der nav-Elemente. 0.5rem1.25rem1.5rem |
--hub-nav-item-padding-y | 0.5rem | length | Vertikaler Innenabstand innerhalb der nav-Elemente. 0.25rem0.75rem1rem |
--hub-nav-item-color | #212529 | color | Schriftfarbe der nav-Elemente. #495057#fffinherit |
--hub-nav-item-border-radius | 0.25rem | length | Rahmenradius der nav-Elemente. 00.375rem50rem |
--hub-nav-item-hover-bg | rgba(0, 0, 0, 0.04) | color | Hintergrundfarbe beim Überfahren. #e9ecefrgba(255, 255, 255, 0.1)transparent |
--hub-nav-item-hover-color | #0d6efd | color | Schriftfarbe beim Überfahren. #0a58ca#fffvar(--hub-sys-color-primary) |
--hub-nav-item-active-bg | #0d6efd | color | Hintergrundfarbe, wenn das Element aktiv ist. #0a58catransparentvar(--hub-sys-color-primary) |
--hub-nav-item-active-color | #fff | color | Schriftfarbe, wenn das Element aktiv ist. #0d6efd#212529var(--hub-sys-text-inverse) |
--hub-nav-item-disabled-color | #6c757d | color | Schriftfarbe für deaktivierte Elemente. #adb5bdvar(--hub-sys-text-muted) |
--hub-nav-item-disabled-opacity | 0.65 | number | Deckkraft für deaktivierte Elemente. 0.50.41 |
Dropdown
Passt das Erscheinungsbild und die Positionierung des Dropdown-Panels an.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-nav-dropdown-bg | #fff | color | Hintergrundfarbe der Dropdown-Panels. #f8f9fa#343a40var(--hub-sys-surface-elevated) |
--hub-nav-dropdown-border-color | #dee2e6 | color | Rahmenfarbe der Dropdown-Panels. transparent#ccc |
--hub-nav-dropdown-border-radius | 0.375rem | length | Rahmenradius der Dropdown-Panels. 00.25rem0.5rem |
--hub-nav-dropdown-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | Schlagschatten der Dropdown-Panels. none0 4px 8px rgba(0,0,0,0.1)0 1rem 3rem rgba(0,0,0,0.175) |
--hub-nav-dropdown-min-width | 12rem | length | Mindestbreite der Dropdown-Panels. 10rem15rem200px |
Brand
Styling für den Brand-Slot-Bereich.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-nav-brand-font-size | 1.25rem | length | Schriftgröße des Brand-Texts. 1rem1.5rem2rem |
--hub-nav-brand-font-weight | 600 | number | Schriftstärke des Brand-Texts. 400700800 |
--hub-nav-brand-color | #212529 | color | Schriftfarbe des Brand. #fff#0d6efdinherit |
Mobiles Panel
Konfiguration für das responsive mobile Navigations-Panel.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-nav-mobile-bg | #fff | color | Hintergrundfarbe des mobilen Panels. #f8f9fa#212529var(--hub-sys-surface-page) |
--hub-nav-mobile-width | 18rem | length | Breite des mobilen Offcanvas-Panels. 15rem20rem80vw |
--hub-nav-mobile-backdrop-bg | rgba(0, 0, 0, 0.5) | color | Hintergrundfarbe des Backdrops hinter dem mobilen Panel. rgba(0, 0, 0, 0.3)rgba(0, 0, 0, 0.75)transparent |
--hub-nav-mobile-transition | 300ms ease | transition | Timing des Übergangs für die Öffnen-/Schließen-Animation des mobilen Panels. 200ms ease-in-out400ms ease150ms linear |
Accordion & Symbole
Einrückung des vertikalen accordion und Symbolgröße.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-nav-accordion-indent | 1rem | length | Linke Einrückung pro Verschachtelungsebene im vertikalen accordion-Modus. 0.5rem1.5rem2rem |
--hub-nav-icon-size | 1.25rem | length | Größe der Navigationselement-Symbole. 1rem1.5rem2rem |
--hub-nav-icon-gap | 0.5rem | length | Abstand zwischen Symbol und Label-Text. 0.25rem0.75rem1rem |
Panel
Styling für die gestapelte Panel-Drilldown-Navigation.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-nav-panel-width | 16rem | length | Standardbreite jedes Panels. 14rem18rem20rem |
--hub-nav-panel-zindex | 100 | number | Stapelreihenfolge der Panels (sollte niedriger als der z-index des Dropdowns sein). 50100200 |
--hub-nav-panel-bg | var(--hub-sys-surface-page, #fff) | color | Hintergrundfarbe der Panels. #f8f9fa#fffvar(--hub-sys-surface-elevated) |
--hub-nav-panel-color | var(--hub-sys-text-primary, #212529) | color | Schriftfarbe innerhalb der Panels. #333#fffinherit |
--hub-nav-panel-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Rahmenfarbe zwischen den Panels. transparent#ccc |
--hub-nav-panel-shadow | inset 4px 0 8px -4px rgba(0, 0, 0, 0.1) | shadow | Schlagschatten der Panels. none2px 0 4px rgba(0,0,0,0.05) |
--hub-nav-panel-header-height | 3rem | length | Höhe des Panel-Headers. 2.5rem3.5rem4rem |
--hub-nav-panel-header-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Hintergrundfarbe des Panel-Headers. #fff#e9eceftransparent |
--hub-nav-panel-back-color | var(--hub-sys-text-secondary, #6c757d) | color | Farbe des Zurück-Buttons im Panel-Header. #212529#0d6efdinherit |
--hub-nav-panel-back-hover-bg | rgba(0, 0, 0, 0.04) | color | Hintergrund der Panel-Header-Buttons beim Überfahren. #e9ecefrgba(0,0,0,0.08) |
Styling und Theming
Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.