HeaderBar
Le pattern HeaderBar est utilisé pour afficher l’en-tête d’une page ainsi qu’une barre de navigation.
Ce composant est disponible sur la version Bridge.
Utilisation
Exemples
Titre et sous-titre
Vous pouvez afficher un titre et un sous-titre en utilisant les props service-title et service-sub-title.
Accessibilité
Vous pouvez personnaliser la propriété aria-label du lien de retour à l’accueil en utilisant la prop home-arialabel.
Menu de navigation
Vous pouvez afficher un menu de navigation en utilisant la prop navigation-items.
Marque partenaire
Vous pouvez afficher une marque partenaire en utilisant le slot secondary-logo.
Slot par défaut
Vous pouvez ajouter du contenu dans la partie droite du header en utilisant le slot par défaut.
Contenu supplémentaire dans la barre de navigation
Vous pouvez ajouter du contenu avant ou après le contenu principal de la barre de navigation en utilisant les slots navigation-bar-prepend et navigation-bar-secondary-content.
Contenu supplémentaire dans le menu mobile
Vous pouvez ajouter du contenu avant ou après le contenu principal du menu sur mobile en utilisant les slots navigation-drawer-prepend et navigation-drawer-append.
Thème
Vous pouvez utiliser un thème différent en utilisant la prop theme.
API
Les propriétés non définies dans la section API seront reportées directement sur le composant VAppBar.
Personnalisation
Largeur interne
Vous pouvez définir une largeur interne en utilisant la prop inner-width.
Bouton menu dans la barre de navigation
Vous pouvez afficher le bouton pour activer le menu dans la barre de navigation sur les écrans mobiles en utilisant la prop show-nav-bar-menu-btn.
Marque personnalisée
Vous pouvez personnaliser le contenu de la marque (titre, sous-titre…) en utilisant le slot brand-content.
Composants Vuetify
Vous pouvez personnaliser les composants Vuetify contenus dans le pattern Header en utilisant la prop vuetify-options.
Slots
Vous pouvez remplacer le contenu de la barre de navigation ainsi que du menu sur les écrans mobiles en utilisant les slots navigation-bar-content et navigation-drawer-content.