Construire des popovers, des alertes et des toasts avec Blueprint UI dans React
Blueprint UI est une boîte à outils React UI populaire qui fournit un ensemble de composants et de styles réutilisables pour construire des applications web modernes. L’une des principales caractéristiques de Blueprint UI est sa prise en charge de la création de popovers, d’alertes et de toasts, qui sont des composants essentiels pour afficher des informations et des commentaires aux utilisateurs.
Installation de Blueprint UI
Pour commencer à utiliser Blueprint UI, vous devez d’abord l’installer. Vous pouvez le faire à l’aide du gestionnaire de paquets de votre choix.
Pour l’installer à l’aide de npm, le gestionnaire de paquets JavaScript, exécutez la commande suivante dans votre terminal :
Après avoir installé Blueprint UI, vous devez importer les fichiers CSS de la bibliothèque :
En important ces fichiers, vous serez en mesure d’intégrer les styles de Blueprint UI avec les composants que Blueprint UI offre.
Création de popovers à l’aide de Blueprint UI
Les popovers sont des infobulles qui apparaissent lorsque l’utilisateur survole ou clique sur un élément. Elles fournissent des informations ou des options supplémentaires à l’utilisateur.
Pour créer des popovers dans votre application React à l’aide de Blueprint UI, vous devez installer le module Blueprint UI Popover2 de Blueprint UI.
Pour ce faire, exécutez le code suivant dans votre terminal :
Veillez à importer la feuille de style du paquet dans votre fichier CSS :
Après avoir importé la feuille de style, vous pouvez utiliser l’option Popover2 pour créer des popovers dans votre application.
Par exemple :
Ce code crée une fenêtre contextuelle à l’aide du composant Popover2 . Il définit également un composant popoverContent qui contient le code JSX du contenu du popover.
La variable Popover2 prend le composant popoverContent comme valeur de son contenu prop. Le contenu contenu spécifie le contenu affiché dans le popover. Ici, la propriété Popover2 enveloppe un composant Bouton dans un composant Button . Le popover s’affiche lorsque vous cliquez sur le bouton.
La fenêtre contextuelle est simple, comme le montre l’illustration ci-dessous :
Vous pouvez styliser le contenu de la fenêtre contextuelle en passant un élément nom de classe à la fonction popoverContent JSX :
Vous pouvez ensuite définir la classe CSS dans votre fichier CSS :
Le popover devrait maintenant avoir un peu plus d’allure :
Le Popover2 prend quelques accessoires qui vous aideront à le configurer en fonction de vos besoins. Certains de ces accessoires sont popoverClassName, onInteraction, isOpen, minimal et placement.
Les placement prop détermine la position préférée du popover par rapport à l’élément cible. Les valeurs disponibles sont les suivantes
- auto
- auto-start
- auto-end
- top
- top-start
- top-end
- bas
- bas-début
- bas-fin
- droite
- départ à droite
- droite-fin
- gauche
- début gauche
- gauche-fin
Avec les popoverClassName vous pouvez définir un nom de classe CSS pour l’élément popover. Vous devez d’abord créer une classe CSS dans votre fichier CSS pour utiliser la propriété.
Par exemple :
Après avoir créé la classe CSS, utilisez la balise popoverClassName pour appliquer le style personnalisé au composant Popover2 :
Le minimal contrôle le style du popover. Cette propriété accepte une valeur booléenne. Si elle vaut true, le popover aura un style minimal, pas de flèche et une apparence de boîte simple.
Création d’alertes
Les alertes sont des notifications qui apparaissent à l’écran pour informer l’utilisateur d’informations ou d’actions importantes. Elles sont généralement utilisées pour afficher des messages d’erreur, des messages de réussite ou des avertissements.
La création d’alertes dans l’interface Blueprint est similaire à la création d’alertes dans l’interface Chakra. Vous utiliserez le composant Alert pour créer une alerte dans votre application React à l’aide de Blueprint UI.
Voici un exemple :
Cet exemple montre comment vous devez importer le fichier Alerte à partir du composant @blueprintjs/core . Le composant Alert affiche un message d’alerte à l’écran. Il prend également trois accessoires : isOpen, onClose et confirmButtonText.
Les isOpen détermine si l’alerte est visible ou non. Donnez-lui la valeur true pour afficher l’alerte et false pour la masquer. La propriété onClose est une fonction de rappel qui s’exécute lorsque l’utilisateur ferme l’alerte.
Enfin, l’élément confirmButtonText détermine le texte affiché sur le bouton de confirmation.
Dans cet exemple, la notification d’alerte se présentera comme suit :
Création de toasts avec l’interface Blueprint
Les toasts sont des notifications qui apparaissent à l’écran pour informer l’utilisateur d’informations ou d’événements importants. Ils sont similaires aux alertes, mais sont généralement moins intrusifs et disparaissent rapidement.
Pour créer un toast dans votre application React à l’aide de Blueprint UI, utilisez la fonction OverlayToaster pour créer un toast dans votre application React à l’aide de l’interface Blueprint. Le composant OverlayToaster crée une instance de grille-pain qui est ensuite utilisée pour créer des toasts individuels.
Par exemple :
Le bloc de code ci-dessus utilise le composant OverlayToaster.create pour générer l’instance de grille-pain et spécifie sa position à l’aide de la méthode position prop.
Il définit également la fonction showToast. Cette fonction utilise la fonction show de la méthode toasterInstance pour afficher le toast lorsqu’elle est appelée. La méthode montre prend un objet avec l’attribut message, intention, délai d’attente, isCloseButtonShown et icône accessoires.
Les message spécifie le contenu textuel du toast, tandis que la propriété intention précise le type de toast. Le style du toast varie en fonction de sa valeur.
Vous pouvez contrôler la durée d’affichage de la notification du toast à l’aide de la propriété timeout prop. La propriété icône spécifie un élément d’icône à afficher dans le toast. Avec l’élément isCloseButtonShown permet de contrôler l’affichage du bouton de fermeture dans le toast.
Le bloc de code ci-dessus génère un beau toast lorsque vous cliquez sur le bouton, comme le montre l’image ci-dessous.
Si vous cherchez à créer des notifications de toast attrayantes dans votre application React, Blueprint UI est une excellente option. Il fournit une large gamme de composants prédéfinis que vous pouvez utiliser pour créer des notifications qui correspondent au style de votre application.
Cependant, si vous travaillez sur un petit projet qui ne nécessite pas toutes les fonctionnalités de Blueprint UI, React Toastify est une alternative légère pour créer de belles notifications.
Améliorer l’expérience utilisateur avec des toasts, des popovers et des alertes
Vous avez appris à créer des popovers, des alertes et des toasts dans votre application React à l’aide de Blueprint UI. Ces composants sont essentiels pour fournir des informations et des commentaires aux utilisateurs et peuvent améliorer considérablement l’expérience utilisateur de votre application. Vous pouvez facilement créer ces composants en utilisant les informations que vous avez obtenues avec un minimum d’effort et de personnalisation.
