The v-btn component can be used as a floating action button. This provides an application with a main point of action. Combined with the v-speed-dial component, you can create a diverse set of functions available for your users.
Les boutons d'action flottant peuvent être attachés au matériel pour indiquer une action promue dans votre application. La taille par défaut sera utilisée dans la plupart des cas, tandis que la variante small peut être utilisée pour maintenir la continuité avec des éléments de taille similaires.
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.
Aligne le composant vers le bas.
Direction dans laquelle le contenu du cadran rapide s'affichera. Les valeurs possibles sont top, bottom, left, right.
Applique position: fixed au composant.
Aligne le composant vers la gauche.
Définit le mode de transition (ne s'applique pas au groupe de transition). Vous pouvez trouver plus d'informations sur la documentation Vue pour les modes de transition.
Ouvre speed-dial au survol
Définit l'origine de la transition sur l'élément. Vous pouvez trouver plus d'informations sur la documentation MDN pour l'origine de la transition.
Aligne le composant vers la droite.
Aligner le contenu vers le haut.
Définit la transition du composant. Peut être l'une des construites en transitions ou l'autre de vos propres.
Contrôle si le composant est visible ou caché.
Lorsqu'il est utilisé, activera le composant lorsque vous cliquez dessus (ou passez la souris sur certains composants). Cela arrête manuellement la propagation de l'événement. Sans ce slot, si vous ouvrez le composant via son modèle, vous devrez arrêter manuellement la propagation de l'événement
L'emplacement par défaut de vue.
6px !default;16px !default;1 !default;Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Pour un meilleur attrait visuel, nous utilisons un petit bouton pour correspondre à nos avatars de liste.
Lors de son premier affichage, un bouton d'action flottant devrait s'animer sur l'écran. Ici nous utilisonsv-fab-transition avec v-show. Vous pouvez également utiliser toute transition personnalisée fournie par Vuetify ou votre propre.
Le composant speed-dial a une api très robuste pour personnaliser votre expérience FAB exactement comme vous le souhaitez.
Lors du changement d'action par défaut de votre bouton, il est recommandé d'afficher une transition pour signaler un changement. Nous le faisons en liant la prop key à un morceau de données qui peut correctement signaler un changement d'action au système de transition Vue. Bien que vous puissiez utiliser une transition personnalisée pour cela, assurez-vous que vous définissez la prop mode à out-in.
Prêt pour plus ? Continuez la lecture avec :