Le composant v-app-bar est essentiel pour dans toutes les interfaces utilisateurs graphiques (GUI), en tant que source principal de navigation sur le site. Le composant app-bar fonctionne très bien conjugué au v-navigation-drawer pour proposer une navigation claire dans votre application.
Le composant `v-app-bar' est utilisé pour les actions et informations à travers toute l'application.
When <v-btn>s with the icon prop are used inside of v-toolbar and v-app-bar they will automatically have their size increased and negative margin applied to ensure proper spacing according to the Material Design Specification. If you choose to wrap your buttons in any container, such as a <div>, you will need to apply negative margin to that container in order to properly align them.
v-app-bar-nav-icon: Un composant bouton icon stylisé créé specifiquement pour être utilisé avec v-toolbar etv-app-bar. Principalement vu sur le côté gauche de la bar d'outil en tant que menu hamburger, il est parfois utilisé pour controler l'était d'un tiroir de navigation. L'emplacementdefaultpeut être utilisé pour changer l'icon et la fonction de ce composant.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Vous pouvez rendre app-bar dense. Une barre d'application dense a une hauteur inférieure à celle d'une barre d'application normale
Un v-app-bar avec la propprominent peut voir sa hauteur rétrécire lorsque l'utilisateur fait défiler l'écran vers le bas. Cela permet une transition harmonieuse pour utiliser moins d'espace visuel lorsque l'utilisateur défile à travers le contenu. La hauteur de rétrécissement a 2 options possibles, dense (48px) et short (56px).
v-app-bar peut contenir des images de fond. Vous pouvez définir la source via la propsrc. Si vous avez besoin de personnaliser les propriétés v-img, la barre d'application vous fournit un emplacement img .
v-app-bar peut être masqué lors du défilement. Pour cela, utilisez la propriété hide-on-scroll.
Avec les props collapse et collapse-on-scroll vous pouvez facilement contrôler l'état de la barre d'outils avec laquelle l'utilisateur interagit.
Lorsque vous utilisez le prop elevate-on-scroll , v-app-bar restera à une hauteur de 0dp jusqu'à ce que l'utilisateur commence à défiler vers le bas. Une fois défilé, la barre monte à 4dp.
Lorsque vous utilisez la propriété inverted-scroll la barre se cache jusqu'à ce que l'utilisateur défile au-delà du seuil désigné. Une fois le seuil dépassé, v-app-bar continuera d'être affiché jusqu'à ce que les utilisateurs défilent au-delà du seuil. Si aucune valeur scroll-threshold n'est fournie une valeur par défaut de 0 sera utilisée.
v-app-bar peut avoir un seuil de défilement. Il commencera à réagir au défillement seulement après avoir définit via la propriété scroll-threshold le nombre de pixels.
L'image d'arrière-plan d'une barre v-app peut s'effacer au défilement. Utilisez la propriété fade-img-on-scroll pour avoir cet effet.
Prêt pour plus ? Continuez la lecture avec :