Composant Menu de Navigation Angular | ng-hub-ui-nav
Composant de navigation Angular avec dropdowns, panneaux drill-down, repli responsive, intégration au Router et theming via variables CSS.
Référence API
Voici le contrat complet de nav : 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 nav à votre goût avec 4 inputs. Liez-les comme n’importe quel @Input Angular.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
itemsObligatoire | HubNavItem[] | — | Tableau d'éléments de navigation à rendre. Chaque élément définit son type (link, dropdown, header, separator, custom), label, route, icône, badge, enfants, et plus encore. |
config | Partial<HubNavConfig> | {} | Remplacements de configuration partiels fusionnés avec les valeurs globales par défaut. Contrôle l'orientation, le déclencheur du dropdown, le mode collapse, le breakpoint, la position, et plus encore. |
navClass | string | '' | Classe CSS supplémentaire appliquée à l'élément conteneur du nav. |
itemTemplate | TemplateRef<HubNavItemTemplateContext> | null | null | Modèle personnalisé optionnel pour le rendu des éléments du nav via liaison d'entrée. La directive hubNavItemTemplate est prioritaire sur cet input. |
Outputs
Réagissez à ce que fait nav — 5 événements sur lesquels accrocher votre logique.
| Nom | Type | Description |
|---|---|---|
itemClick | OutputEmitterRef<HubNavItem> | Émis lorsqu'un élément link est cliqué. Fournit le HubNavItem cliqué. |
dropdownOpen | OutputEmitterRef<HubNavItem> | Émis lorsqu'un élément dropdown est ouvert. |
dropdownClose | OutputEmitterRef<HubNavItem> | Émis lorsqu'un élément dropdown est fermé. |
mobileToggle | OutputEmitterRef<boolean> | Émis lorsque le panneau mobile est basculé. Fournit true lorsqu'il est ouvert, false lorsqu'il est fermé. |
panelChange | OutputEmitterRef<HubNavPanelEvent> | Émis lorsqu'un panneau est ouvert, fermé, exploré en profondeur ou ramené en arrière. Fournit l'élément, l'index du panneau et le type d'action. |
Templates
Faites-le vôtre — 3 emplacements de template vous permettent de projeter votre propre balisage.
| Nom | Description | Exemple |
|---|---|---|
hubNavStart | Projette un contenu personnalisé dans le slot de début. Horizontal : début visuel (gauche en LTR, droite en RTL). Vertical : haut de la colonne principale. | <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 | Projette un contenu personnalisé dans le slot de fin. Horizontal : fin visuelle (droite en LTR, gauche en RTL). Vertical : bas de la colonne principale. | <hub-nav [items]="items">
<ng-template hubNavEnd>
<button type="button">Sign out</button>
</ng-template>
</hub-nav> |
hubNavItemTemplate | Remplace le rendu par défaut des éléments par un modèle personnalisé. Reçoit HubNavItemTemplateContext avec les propriétés $implicit (item), active, expanded et 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> |
Variables CSS
Personnalisez chaque pixel avec 42 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Mise en page
Contrôlez les dimensions globales, le rembourrage et l'espacement du nav.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-nav-height | 3.5rem | length | Hauteur de la barre de navigation. 3rem4remauto |
--hub-nav-padding-x | 1rem | length | Rembourrage horizontal du conteneur du nav. 0.5rem1.5rem2rem |
--hub-nav-padding-y | 0.5rem | length | Rembourrage vertical du conteneur du nav. 0.25rem0.75rem1rem |
--hub-nav-gap | 0.25rem | length | Espace entre les éléments du nav. 00.5rem1rem |
Couleurs et arrière-plan
Contrôlez le jeu de couleurs et les bordures du nav.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-nav-bg | #fff | color | Couleur d'arrière-plan de la barre de navigation. #f8f9fatransparentvar(--hub-sys-surface-page) |
--hub-nav-color | #212529 | color | Couleur de base du texte de la navigation. #333#fffvar(--hub-sys-text-primary) |
--hub-nav-border-color | #dee2e6 | color | Couleur de la bordure de la barre de navigation. transparent#cccvar(--hub-sys-border-color-default) |
Éléments
Style des éléments de navigation individuels dans tous leurs états.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-nav-item-padding-x | 1rem | length | Rembourrage horizontal à l'intérieur des éléments du nav. 0.5rem1.25rem1.5rem |
--hub-nav-item-padding-y | 0.5rem | length | Rembourrage vertical à l'intérieur des éléments du nav. 0.25rem0.75rem1rem |
--hub-nav-item-color | #212529 | color | Couleur du texte des éléments du nav. #495057#fffinherit |
--hub-nav-item-border-radius | 0.25rem | length | Rayon de bordure des éléments du nav. 00.375rem50rem |
--hub-nav-item-hover-bg | rgba(0, 0, 0, 0.04) | color | Couleur d'arrière-plan au survol. #e9ecefrgba(255, 255, 255, 0.1)transparent |
--hub-nav-item-hover-color | #0d6efd | color | Couleur du texte au survol. #0a58ca#fffvar(--hub-sys-color-primary) |
--hub-nav-item-active-bg | #0d6efd | color | Couleur d'arrière-plan lorsque l'élément est actif. #0a58catransparentvar(--hub-sys-color-primary) |
--hub-nav-item-active-color | #fff | color | Couleur du texte lorsque l'élément est actif. #0d6efd#212529var(--hub-sys-text-inverse) |
--hub-nav-item-disabled-color | #6c757d | color | Couleur du texte des éléments désactivés. #adb5bdvar(--hub-sys-text-muted) |
--hub-nav-item-disabled-opacity | 0.65 | number | Opacité des éléments désactivés. 0.50.41 |
Dropdown
Personnalisez l'apparence et le positionnement des panneaux dropdown.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-nav-dropdown-bg | #fff | color | Couleur d'arrière-plan des panneaux dropdown. #f8f9fa#343a40var(--hub-sys-surface-elevated) |
--hub-nav-dropdown-border-color | #dee2e6 | color | Couleur de la bordure des panneaux dropdown. transparent#ccc |
--hub-nav-dropdown-border-radius | 0.375rem | length | Rayon de bordure des panneaux dropdown. 00.25rem0.5rem |
--hub-nav-dropdown-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | Ombre portée des panneaux dropdown. 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 | Largeur minimale des panneaux dropdown. 10rem15rem200px |
Brand
Style de la zone du slot brand.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-nav-brand-font-size | 1.25rem | length | Taille de police du texte du brand. 1rem1.5rem2rem |
--hub-nav-brand-font-weight | 600 | number | Graisse de police du texte du brand. 400700800 |
--hub-nav-brand-color | #212529 | color | Couleur du texte du brand. #fff#0d6efdinherit |
Panneau mobile
Configuration du panneau de navigation mobile responsive.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-nav-mobile-bg | #fff | color | Couleur d'arrière-plan du panneau mobile. #f8f9fa#212529var(--hub-sys-surface-page) |
--hub-nav-mobile-width | 18rem | length | Largeur du panneau mobile offcanvas. 15rem20rem80vw |
--hub-nav-mobile-backdrop-bg | rgba(0, 0, 0, 0.5) | color | Couleur de l'arrière-plan derrière le panneau mobile. rgba(0, 0, 0, 0.3)rgba(0, 0, 0, 0.75)transparent |
--hub-nav-mobile-transition | 300ms ease | transition | Minutage de transition pour l'animation d'ouverture/fermeture du panneau mobile. 200ms ease-in-out400ms ease150ms linear |
Accordion et icônes
Indentation de l'accordion vertical et dimensionnement des icônes.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-nav-accordion-indent | 1rem | length | Indentation à gauche par niveau d'imbrication en mode accordion vertical. 0.5rem1.5rem2rem |
--hub-nav-icon-size | 1.25rem | length | Taille des icônes des éléments de navigation. 1rem1.5rem2rem |
--hub-nav-icon-gap | 0.5rem | length | Espace entre l'icône et le texte du libellé. 0.25rem0.75rem1rem |
Panneau
Style de la navigation en exploration par panneaux empilés.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-nav-panel-width | 16rem | length | Largeur par défaut de chaque panneau. 14rem18rem20rem |
--hub-nav-panel-zindex | 100 | number | Ordre d'empilement des panneaux (doit être inférieur au z-index du dropdown). 50100200 |
--hub-nav-panel-bg | var(--hub-sys-surface-page, #fff) | color | Couleur d'arrière-plan des panneaux. #f8f9fa#fffvar(--hub-sys-surface-elevated) |
--hub-nav-panel-color | var(--hub-sys-text-primary, #212529) | color | Couleur du texte à l'intérieur des panneaux. #333#fffinherit |
--hub-nav-panel-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Couleur de la bordure entre les panneaux. transparent#ccc |
--hub-nav-panel-shadow | inset 4px 0 8px -4px rgba(0, 0, 0, 0.1) | shadow | Ombre portée des panneaux. none2px 0 4px rgba(0,0,0,0.05) |
--hub-nav-panel-header-height | 3rem | length | Hauteur de l'en-tête du panneau. 2.5rem3.5rem4rem |
--hub-nav-panel-header-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Couleur d'arrière-plan de l'en-tête du panneau. #fff#e9eceftransparent |
--hub-nav-panel-back-color | var(--hub-sys-text-secondary, #6c757d) | color | Couleur du bouton de retour dans l'en-tête du panneau. #212529#0d6efdinherit |
--hub-nav-panel-back-hover-bg | rgba(0, 0, 0, 0.04) | color | Arrière-plan au survol des boutons de l'en-tête du panneau. #e9ecefrgba(0,0,0,0.08) |
Styles et theming
Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.