The v-btn-toggle
component is a simple wrapper for v-item-group
built specifically to work with v-btn
.
Basculer les boutons vous permet de créer un groupe de boutons stylés qui peuvent être sélectionnés ou bascules sous un seul v-model
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
La active-class appliquée aux enfants lorsqu'ils sont activés.
Modifie la couleur de fond du composant.
Supprime la frontière du groupe.
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.
Réduit la taille et le pliage des boutons.
Applique la variante claire du thème au composant.
Mixins.BaseItemGroup.props.obligatoire
Définit un nombre maximum de sélections qui peuvent être faites.
Autoriser plusieurs sélections. La prop value doit être un array.
Boutons de bord rond
Applique un grand rayon de bordure en haut à gauche et en bas à droite de la carte.
Supprime le rayon de la frontière du composant.
La valeur du modèle désignée pour le composant.
L'emplacement par défaut de vue.
Émis lorsque l'entrée est modifiée par l'interaction utilisateur
any[] | any
$border-radius-root !default;
48px !default;
0.8 !default;
0 12px !default;
48px !default;
0 8px !default;
4px !default;
24px !default;
24px !default;
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Vous pouvez faire arrondir VBtnToggle
en utilisant la proparrondie
.
obligatoire
VBtnToggle
a toujours une valeur.
multiple
VBtnToggle
permet à l'utilisateur de sélectionner plusieurs variantes et de retourner la valeur en tant que tableau.
Intégration facilement des boutons personnalisées avec v-toolbar
Groupez des actions similaires et concevez votre propre composant WYSIWYG.
Prêt pour plus ? Continuez la lecture avec :