Le composant v-alert est utilisé pour transmettre des informations importantes à l'utilisateur grâce à des icônes et des couleurs liées au contexte. Il y a 4 types par défaut : success, info, warning, et error. Des icônes par défaut sont assignées afin de différencier la nature des différentes alertes. De nombreuses parties d'une alerte comme border, icon, et color peuvent également être personnalisées pour s'adapter à presque toutes les situations.
Alerts in their simplest form are a flat sheets of paper that display a message.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
La propriété type dispose par défaut de 4 styles v-alert possibles : success, infor, warning et error. Chacun de ces styles fospose d'une icône et d'un texte par défaut. Les couleurs par défaut peuvent être configurées globalement en personnalisant le Thème Vuetify.
La prop border ajoute une bordure simple à l'un des 4 côtés de l'alerte. Cela peut être combiné avec color, dark, et type pour personnaliser l'alerte.
The colored-border prop removes the alert background in order to accent the border prop. If a type is set, it will use the types default color. If no color or type is set, the color will default to the inverted color of the applied theme (black for light and white/gray for dark).
La prop dense réduit la hauteur de l'alerte pour créer un style simple et compact. Lorsqu'elle est combinée avec la bordure prop l'épaisseur de la bordure sera réduite pour rester compatible avec le style.
La prop dismissible ajoute un bouton de fermeture à la fin du composant d'alerte. En cliquant sur ce bouton, il va définir sa valeur à false et cacher l'alerte. Vous pouvez restaurer l'alerte en liant v-model et le paramétrer à true. L'icône de fermeture a automatiquement un aria-label appliqué qui peut être changé en modifiant la prop close-label ou en modifiant localement la valeur close. Pour plus d'informations sur la manière de modifier les paramètres de votre localement, naviguez sur la page Internationalisation.
La prop icône vous permet d'ajouter une icône au début du composant d'alerte. Si un type est fourni, cela remplacera l'icône de type par défaut. Si le paramètre de la prop icône est à false cela supprimera l'icône.
La prop outlined inverse le style d'une alerte, héritant de la color actuellement appliquée, elle est appliqué au texte et à la bordure, et rendant son arrière-plan transparent.
La prop prominent fournit une alerte plus prononcée en augmentant la hauteur et en appliquant un halo à l'icône. Lorsque l'application est prominent et dense ensemble, l'alerte prendra l'apparence d'une alerte normale mais avec les effets d'icônes prominent.
La prop text est une variante d'alerte simple qui applique une couleur de fond d'opacité réduite de color. Similaire à d'autres props de style, text peut être combiné avec d'autres props comme dense, prominent, et outlined pour créer un composant unique et personnalisé.
La propriété transition vous permet d'appliquer une transition à l'alerte qui est visible lorsque le composant est affiché ou caché. Pour plus d'informations, consultez les transitions prédéfinies de Vuetify ou suivre la démarche pour construire la votre.
By combining color, dismissible, closeIcon, border, elevation, icon, and colored-border props you can create stylish custom alerts such as this twitter notification.
Par défaut les composants v-alert se voient attribués le rôle WAI-ARIA de alert qui indique que l'alerte "est un Un type de région vivante avec des informations importantes, généralement sensibles au facteur temps (A type of live region with important, and usually time-sensitive, information)". Lorsque vous utilisez la propriété dissmissible, l'icône de fermeture reçoit un aria-label correspondant. Cette valeur peut être changée soit en modifiant la propriété close-label, soit en personnalisant la valeur globale par défaut de la propriété close de l'Internationalization.
Prêt pour plus ? Continuez la lecture avec :