The v-banner component is used as middle-interruptive message to user with 1-2 actions. It comes in 2 variations, single-line and multi-line (implicit). These can have icons which you can use with your message and actions.
Les bannières peuvent avoir 1-2 lignes de texte, d'actions et d'icône.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
When used inside of v-main, will calculate top based upon application v-toolbar and v-system-bar.
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.
Il désigne une altitude appliquée à la composante entre 0 et 24. Vous pouvez trouver plus d'informations sur la page d'altitude.
Définit la hauteur du composant.
Désigne une icône spécifique.
Indique une couleur d'icône spécifique.
Applique la variante claire du thème au composant.
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.
Removes elevation (box-shadow) and adds a thin border.
Designates the border-radius applied to the component. You can find more information on the Border Radius page.
Applies a large border radius on the top left and bottom right of the card.
Force la bannière à tenir sur une seule ligne.
Applique position: sticky au composant (Evergreen browsers only). Vous pouvez trouver plus d'informations sur la documentation MDN pour la position autocollante.
Spécifiez un tag personnalisé utilisé sur l'élément racine.
Removes the component's border-radius.
Contrôle si le composant est visible ou caché.
Définit la largeur du composant.
L'emplacement utilisé pour le contenu de l'action comme un v-btn. La fonction dismiss dans cette zone de créneaux, lorsqu'elle est appelée, fermera la bannière.
{
dismiss: (): void
}L'emplacement par défaut de vue.
L'emplacement utilisé pour le contenu de l'icône.
Contrôle si le composant est visible ou caché.
(): void8px !default;90px !default;0 !default;8px !default;0 !default;8px !default;16px !default;20px !default;12px !default;24px !default;10px !default;36px !default;16px !default;16px !default;map-get($rounded, 'xl') $banner-border-radius !default;24px !default;16px !default;Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Single-line VBanner est utilisé pour une petite quantité d'informations et est recommandé pour les implémentations de bureau uniquement. Vous pouvez activer optionnellement le prop sticky pour s'assurer que le contenu est épinglé à l'écran (note: ne fonctionne pas dans IE11). Vous pouvez trouver plus d'informations sur sticky positioning here.
Deux lignes VBanner peut stocker plus de données, l'utiliser pour les gros messages.
Le champ d'icône vous permet de contrôler explicitement le contenu et les fonctionnalités qui y sont contenues.
VBanner émet l'événement click:icon sur le clic d'icône, même avec un emplacement d'icône personnalisé.
le champ actions possède la fonction dismiss dans son champ d'application, vous pouvez l'utiliser pour facilement rejeter la bannière.
Prêt pour plus ? Continuez la lecture avec :