The v-btn component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color.
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
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.
Configurez la classe CSS active appliquée lorsque le lien est actif. Vous pouvez trouver plus d'informations sur le prop active-class sur la documentation du routeur de vue.
Paramètre append prop ajoute toujours le chemin relatif au chemin actuel. Vous pouvez trouver plus d'informations sur append prop sur la documentation du routeur de vue.
Explique le bouton à 100% de l'espace disponible.
Aligne le composant vers le bas.
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.
Supprime l'ombre de la boîte de boutons.
Supprime la capacité de cliquer ou de cibler un composant.
Il désigne une altitude appliquée à la composante entre 0 et 24. Vous pouvez trouver plus d'informations sur la page d'altitude.
Correspond exactement au lien. Sans cela, '/' correspondra à chaque itinéraire. Vous pouvez trouver plus d'informations sur le exact prop sur la documentation du routeur de vue.
Configurez la classe CSS active appliquée lorsque le lien est actif avec la correspondance exacte. Vous pouvez trouver plus d'informations sur le prop exact-active-class en cours sur la documentation du routeur de vue.
Indique le bouton comme un bouton action flottant - round.
Applique position: fixed au composant.
Définit la hauteur du composant.
Définit le composant comme ancré et applique l'attribut href .
Indique le bouton comme icône - round et flat
Contrôle l'état actif du bouton.
Rend le composant grand.
Aligne le composant vers la gauche. Cela doit être utilisé avec les éléments absolus ou fixes.
Applique la variante claire du thème au composant.
Indique que le composant est un lien. Ceci est automatique lorsque vous utilisez la prop href ou to.
Ajoute un chargement d'animation de l’icône
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.
Spécifie le lien est de type nuxt-link.Pour l'utilisation du nuxt framework.
Rends le fond transparent et applique une bordure mince.
Le paramètre replace prop appellera router.replace() au lieu de router.push() lorsqu'on clique dessus, de sorte que la navigation ne laisse pas d'historique. Vous trouverez plus d'informations sur lereplace prop sur la documentation vue-router.
Ne pas flouter en cliquant.
Aligne le composant vers la droite. Cela doit être utilisé avec les props absolute ou fixed .
Applique un large rayon de bordure sur le bouton.
Applies a large border radius on the top left and bottom right of the card.
Rend le composant petit.
Spécifiez un tag personnalisé utilisé sur l'élément racine.
Désigne l'attribut cible. Ceci ne doit être appliqué qu'en cas d'utilisation de l'accessoire href**.
Rend l'arrière-plan transparent.
Removes the component's border-radius.
Indique l'itinéraire cible du lien. Vous trouverez plus d'informations sur leto prop sur la documentation vue-router.
Aligner le contenu vers le haut.
Définir l'attribut type du bouton
La valeur utilisée lorsque le composant est sélectionné dans un groupe. Si non fourni, l'index sera utilisé.
Définit la largeur du composant.
Rend le composant plus grand.
Rend le composant plus petit.
L'emplacement par défaut de vue.
Chargeur personnalisé
Événement qui est émis lorsque le composant est cliqué
Event0.18 !default;$border-radius-root !default;0.24 !default;map-deep-merge(
(
'x-small': .625rem,
'small': .75rem,
'default': .875rem,
'large': .875rem,
'x-large': 1rem
),
$btn-font-sizes
);500 !default;0.08 !default;18px !default;12px !default;.0892857143em !default;thin !default;28px !default;map-deep-merge(
(
'x-small': 20,
'small': 28,
'default': 36,
'large': 44,
'x-large': 52
),
$btn-sizes
);uppercase !default;opacity 0.2s map-get($transition, 'ease-in-out') !default;0.28s !default;map-get($transition, 'fast-out-slow-in') !default;map-deep-merge(
(
'x-small': 18,
'small': 24,
'default': 24,
'large': 28,
'x-large': 32
),
$fab-icon-sizes
);map-deep-merge(
(
'x-small': 32,
'small': 40,
'default': 56,
'large': 64,
'x-large': 72
),
$fab-sizes
);v-btn est le seul composant qui se comporte différemment lorsque vous utilisez le prop dark normalement, les composants utilisent le prop dark pour indiquer qu'ils ont un fond de couleur foncé et ont besoin de leur texte pour être blanc. Bien que cela fonctionne pour v-btn, il est conseillé d'utiliser le prop uniquement lorsque le bouton IS ON un fond coloré en raison de l'état désactivé se mélangeant avec des fonds blancs. Si vous avez besoin de texte blanc, ajoutez simplement la classe white--text .
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Text buttons have no box shadow and no background. Only on hover is the container for the button shown.
Les boutons soulevés ont une ombre portée qui augmente lorsque vous cliquez dessus. C'est le style par défaut.
Les boutons diminués maintiennent toujours leur couleur d'arrière-plan, mais n'ont pas d'ombre portée.
Les boutons de menus déroulants sont régulièrement sélectionné avec un style supplémentaire.
Les icônes peuvent être utilisées pour le contenu primaire d'un bouton.
Les boutons flottants sont arrondis et contiennent généralement une icône.
Les boutons peuvent être dotés de différentes options de tailles pour s'adapter à une multitude de scénarios.
Les boutons hors-ligne héritent de leurs frontières de la couleur actuelle appliquée.
Les boutons arrondis se comportent comme des boutons réguliers mais ont des bords arrondis.
Les boutons de boutons se comportent comme des boutons réguliers mais n'ont pas de rayon de bordure.
Les blocs de boutons s'étendent sur la largeur totale disponible.
En utilisant la proprité de chargement, vous pouvez notifier à un utilisateur qu'il y a un traitement en cours. Le comportement par défaut est d'utiliser un composant v-progress-circular, mais cela peut être personnalisé.
Prêt pour plus ? Continuez la lecture avec :