The v-bottom-navigation is an alternative to the sidebar. It is primarily used on mobile and comes in two variants, icons and text, and shift.
Bien que v-bottom-nav est censé être utilisé avec vue-router, vous pouvez aussi changer l'état des boutons en utilisant le prop active.sync. Vous pouvez changer la valeur d'un bouton en utilisant son attribut value.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Applique position: absolute au composant.
La classe appliquée à un v-btn quand activé.
Indique le composant comme partie de la mise en page de l'application. Utilisé pour ajuster dynamiquement la taille du contenu. Les composants utilisant cette prop devraient résider en extérieur du composant v-main pour fonctionner correctement. Vous pouvez obtenir plus d'informations sur les mises en page sur la application page. Note: cette prop applique automatiquement position: fixed à l'élément de mise en page. Vous pouvez écraser cette fonctionnalité en utilisant la prop absolute
Modifie la couleur de fond du composant.
Applique la couleur spécifiée à la commande - cela peut être le nom de la couleur matérielle (par exemple success ou purple) ou la couleur css (#033 ou rgba(255, 0, 0, 0.5)). Vous pouvez trouver la liste des classes construites dans la page couleurs.
Applique la variante du thème foncé au composant. Vous pouvez trouver plus d'informations sur la documentation Material Design pour thèmes sombres.
Applique position: fixed au composant.
Définit la hauteur du composant.
Passera la navigation hors écran lors du défilement vers le haut.
Contrôle si le composant est visible ou caché. Supporte le modificateur .sync .
Applique la variante claire du thème au composant.
Mixins.BaseItemGroup.props.obligatoire
Définit la hauteur maximale du composant.
Définit la largeur maximale du composant.
Définit la hauteur minimale du composant.
Définit la largeur minimale du composant.
Indique l'élément à la cible pour défiler les événements. Utilise window par défaut.
La distance de défilement vers le bas avant cacher-sur-scroll active.
Maintent la valeur de l'actif actuel v-btn. Si le bouton n'a pas de valeur fournie, son index sera utilisé à la place..
Définit la largeur du composant.
L'emplacement par défaut de vue.
La valeur du bouton actuellement sélectionné. Si aucune valeur n'est assignée, sera l'index actuel du bouton.
anyL'événement utilisé pour input-value.sync.
string | numbermap-deep-get($headings, 'caption', 'size') !default;168px !default;80px !default;calc(100% - 22px) !default;calc(100% - 12px) !default;Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
La propcolor applique une couleur au fond de la navigation en bas. Il est recommandé d'utiliser les props light et dark pour contraster correctement la couleur du texte.
Si la propriété v-bottom-navigation a grow, les boutons dans ce fichier se développent pour remplir l'espace disponible.
Le prophorizontal place le texte nav à côté de l'icône comme appose à la dessous.
Le prop shift masquera le texte du bouton jusqu'à ce qu'il soit actif. Pour cela, le texte v-btn doit être emballé dans un tag <span>.
L'état d'affichage de v-bottom-navigation peut être activé en utilisant le propinput-value. Vous pouvez également contrôler le bouton actuellement actif en utilisant v-model.
Masquer le défilement cache v-bottom-navigation lorsque l'élément cible est défilé.
La propriété 'scroll-seuil' vous permet de personnaliser le seuil que vous pouvez faire défiler avant que v-bottom-navigation disparaisse.
Prêt pour plus ? Continuez la lecture avec :