Alerte
Le composant Alerte est un moyen simple d’afficher des messages importants aux utilisateurs. Considérez-le comme une notification utile qui attire leur attention lorsqu’il faut mettre quelque chose en évidence.
Configurer votre alerte
1. Choisissez l'objectif et le style (Variante) de l'alerte
La propriété "Variante" détermine l'apparence générale de votre alerte et le message attendu. Sélectionnez la variante qui convient le mieux au type de notification que vous souhaitez afficher :
De base : Un style neutre pour les informations générales, les mises à jour ou les notifications non critiques. C'est un bon choix pour fournir un contexte général ou un retour d'information.
Avertissement : Un style plus visible utilisé pour attirer l'attention de l'utilisateur. Utilisez-le pour des messages système importants, des mises en garde ou des situations nécessitant la vigilance de l'utilisateur mais pas une action immédiate.
Erreur : Un style critique qui indique un problème sérieux ou une erreur nécessitant une attention et une action immédiates de la part de l'utilisateur.
Hors ligne : Un style spécifique pour informer l'utilisateur qu'il a perdu sa connexion Internet
2. Ajoutez un indice visuel avec une icône (facultatif)
Vous pouvez ajouter une icône à votre alerte pour renforcer visuellement le message et le rendre plus visible.
Comment ajouter : Sélectionnez une icône dans les options du panneau de propriétés des composants.
Choix de l'icône : Les choix d'icônes changeront en fonction de la variante choisie (par ex. une icône d'avertissement convient mieux à la variante avertissement). Choisissez une icône pertinente par rapport au message de l'alerte.
3. Appliquer un arrière-plan texturé (facultatif)
L'option "Texturé" ajoute une texture subtile à l'arrière-plan de l'alerte.
Objectif : Cela peut créer une apparence plus douce et visuellement distincte comparée à un arrière-plan uni.
Quand l'utiliser : Envisagez d'utiliser un arrière-plan texturé pour différencier les alertes des autres éléments de la page ou pour ajouter une touche d'intérêt visuel
4. Rendre l'alerte dismissible (facultatif)
Activez l'option "Dismissible" pour permettre aux utilisateurs de fermer l'alerte.
Comment cela fonctionne : Un bouton de fermeture ("X") apparaîtra sur l'alerte, permettant aux utilisateurs de la retirer de l'écran.
Quand l'utiliser : En général, il est conseillé de rendre les alertes dismissibles, surtout pour les notifications moins critiques, afin que les utilisateurs aient le contrôle de leur expérience et puissent effacer l'alerte une fois le message pris en compte.
Style
Vous voulez encore plus de contrôle ? Rendez-vous dans l'onglet "Style" pour affiner l'apparence de l'alerte en remplaçant les styles par défaut de la variante. Vous pouvez ajuster les couleurs, les polices, les espacements, et plus encore.
Tutoriels
Les exemples suivants démontrent certaines des fonctionnalités disponibles pour le composant Alerte.
Créer une alerte avec une identité visuelle personnalisée
Créer une alerte d'erreur dismissible
Style
L'onglet "Style" vous offre un contrôle précis sur l'apparence de votre alerte. Voici une répartition des options de style :
Contrôle le espacement extérieur autour du composant alerte, créant de l'espace entre l'alerte et les autres éléments de la page.
Haut : Ajustez l'espace au-dessus de l'alerte.
Droite : Ajustez l'espace à droite de l'alerte.
Bas : Ajustez l'espace en dessous de l'alerte.
Gauche : Ajustez l'espace à gauche de l'alerte
Contrôle le espacement intérieur à l'intérieur de l'alerte, affectant la distance entre son contenu (texte et icône) et sa bordure.
Rembourrage : Contrôlez l'espacement intérieur entre le contenu de l'alerte et la bordure.
Définit l'apparence visuelle de l'arrière-plan de l'alerte.
Couleur d'arrière-plan : Définissez la couleur d'arrière-plan de l'alerte
Dégradé linéaire : Appliquez un dégradé linéaire à l'arrière-plan. Vous pouvez personnaliser la direction, les couleurs et les points de transition du dégradé
Met en forme l'apparence du texte dans le message d'alerte.
Taille de la police : Ajustez la taille de la police du texte de l'alerte.
Famille de polices : Choisissez la famille de polices pour le texte de l'alerte.
Graisse de la police : Définissez la graisse de la police (par ex. normal, gras).
Style de police : Définissez le style de la police (par ex. normal, italique).
Couleur du texte : Définissez la couleur du texte de l'alerte.
Alignement du texte : Alignez le texte dans l'alerte (par ex. à gauche, centré, à droite)
Personnalise l'apparence de la bordure qui entoure l'alerte.
Couleur de la bordure : Définissez la couleur de la bordure de l'alerte.
Épaisseur de la bordure : Ajustez l'épaisseur de la bordure.
Style de la bordure : Choisissez un style de bordure (par ex. plein, en tirets, en pointillés).
Rayon de la bordure : Contrôlez l'arrondissement des coins de l'alerte
Met en forme l'apparence de l'icône dans l'alerte (si une icône est utilisée).
Couleur d'arrière-plan de l'icône : Définissez la couleur d'arrière-plan de l'icône de l'alerte.
Couleur de premier plan de l'icône : Définissez la couleur de l'icône de l'alerte.
Couleur de premier plan de l'icône de fermeture : Définissez la couleur de l'icône de fermeture (si "Is Dismissible" est activé).
Couleur de premier plan utilitaire : Définissez la couleur de toutes les icônes utilitaires dans l'alerte
Mis à jour
Ce contenu vous a-t-il été utile ?