Des éléments d'interface utilisateur simples et propres peuvent rafraîchir votre conception et ajouter une touche de qualité à votre site Web ou à votre application.
Blueprint UI est une boîte à outils React UI populaire qui fournit un ensemble de composants et de styles réutilisables pour créer des applications Web modernes. L'une des principales fonctionnalités 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 l'interface utilisateur Blueprint
Pour démarrer avec Blueprint UI, vous devez d'abord l'installer. Vous pouvez le faire en utilisant n'importe quel gestionnaire de paquets de votre choix.
Pour l'installer en utilisant npm, le gestionnaire de packages JavaScript, exécutez la commande suivante dans votre terminal :
npm installer @blueprintjs/core
Après avoir installé Blueprint UI, vous devez importer les fichiers CSS depuis la bibliothèque :
@importer"normaliser.css";
@importer"@blueprintjs/core/lib/css/blueprint.css";
@importer"@blueprintjs/icons/lib/css/blueprint-icons.css";
En important ces fichiers, vous pourrez intégrer les styles Blueprint UI aux composants proposés par Blueprint UI.
Création de popovers à l'aide de l'interface utilisateur de Blueprint
Les popovers sont des info-bulles qui apparaissent lorsque l'utilisateur survole ou clique sur un élément. Ils fournissent des informations ou des options supplémentaires à l'utilisateur.
Pour créer des popovers dans votre application React à l'aide de l'interface utilisateur Blueprint, vous devez installer l'interface utilisateur Blueprint Popover2 composant.
Pour cela, exécutez le code suivant dans votre terminal :
npm install --save @blueprintjs/popover2
Assurez-vous d'importer la feuille de style du package dans votre fichier CSS :
@importer"@blueprintjs/popover2/lib/css/blueprint-popover2.css";
Après avoir importé la feuille de style, vous pouvez utiliser le Popover2 composant pour créer des popovers dans votre application.
Par exemple:
importer Réagir depuis"réagir";
importer { Bouton } depuis"@blueprintjs/core";
importer { Popover2 } depuis"@blueprintjs/popover2";fonctionApplication() {
constante popoverContent = (Titre contextuel</h3>
C'est le contenu à l'intérieur du popover.</p>
</div>
);retour (
exporterdéfaut application ;
Ce code crée un popover en utilisant le Popover2 composant. Il définit également une popoverContent variable, qui contient le code JSX pour le contenu du popover.
Le Popover2 le composant prend le popoverContent comme la valeur de son contenu soutenir. Le contenu prop spécifie le contenu affiché dans le popover. Ici le Popover2 composant enveloppe un Bouton composant. Cela provoque l'affichage de la fenêtre contextuelle lorsque vous cliquez sur le bouton.
Le popover semble simple, comme illustré ici :
Vous pouvez styliser le contenu du popover en passant un nom du cours appui à la popoverContent Code JSX :
constante popoverContent = (
'popover'>
Titre contextuel</h3>
C'est le contenu à l'intérieur du popover.</p>
</div>
);
Vous pouvez ensuite définir la classe CSS dans votre fichier CSS :
.popover {
rembourrage: 1rem;
Couleur de l'arrière plan: #e2e2e2;
famille de polices: cursive;
}
Maintenant, le popover devrait être un peu mieux :
Le Popover2 Le composant prend quelques accessoires qui vous aideront à le configurer en fonction de vos besoins. Certains de ces accessoires sont popoverClassName, surInteraction, est ouvert, minimal, et placement.
Le placement prop détermine la position préférée du popover par rapport à l'élément cible. Ses valeurs disponibles sont :
- auto
- démarrage automatique
- fin automatique
- haut
- top départ
- extrémité supérieure
- bas
- bas de gamme
- extrémité inférieure
- droite
- bon départ
- bout droit
- gauche
- départ à gauche
- à gauche
Avec le popoverClassName, vous pouvez définir un nom de classe CSS pour l'élément popover. Vous allez d'abord créer une classe CSS dans votre fichier CSS pour utiliser le prop.
Par exemple:
.popover personnalisé {
Couleur de l'arrière plan: #e2e2e2;
boîte ombre: 0 10pixels 15pixels-3pxRVB(0 0 0 / 0.1);
rayon de bordure: 12pixels;
rembourrage: 1rem;
}
Après avoir créé la classe CSS, utilisez le popoverClassName prop pour appliquer le style personnalisé au composant Popover2 :
content={popoverContent}
placement="extrémité inférieure"
popoverClassName="popover personnalisé"
minime={vrai}
>
Le minimal prop contrôle le style du popover. Le prop accepte une valeur booléenne. S'il est défini sur 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 s'affichent à l'écran pour informer l'utilisateur d'informations ou d'actions importantes. Ils sont couramment utilisés pour afficher des messages d'erreur, des messages de réussite ou des avertissements.
La création d'alertes dans l'interface utilisateur de Blueprint est similaire à créer des alertes à l'aide de Chakra UI. Vous utiliserez le composant Alert pour créer une alerte dans votre application React à l'aide de Blueprint UI.
Voici un exemple :
importer Réagir depuis"réagir";
importer { Alerte, Bouton } depuis"@blueprintjs/core";fonctionApplication() {
constante [isOpen, setIsOpen] = React.useState(FAUX);constante handleOpen = () => {
setIsOpen(vrai);
};constante handleFermer = () => {
setIsOpen(FAUX);
};retour (
"Fermer"> Ceci est un message d'alerte</p>
</Alert>
exporterdéfaut application ;
Cet exemple montre comment vous devez importer le Alerte composant de la @blueprintjs/core emballer. Le Alerte Le composant affiche un message d'alerte à l'écran. Il faut également trois accessoires: est ouvert, onClose, et confirmButtonText.
Le est ouvert prop détermine si l'alerte est visible ou non. Définissez-le sur true pour afficher l'alerte et false pour la masquer. Le onClose prop est une fonction de rappel qui s'exécute lorsqu'un utilisateur ferme l'alerte.
Enfin, le confirmButtonText prop détermine le texte affiché sur le bouton de confirmation.
La notification d'alerte dans cet exemple ressemblera à ceci :
Création de toasts avec Blueprint UI
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 l'interface utilisateur Blueprint, utilisez le SuperpositionGrille-Pain composant. Le SuperpositionGrille-Pain Le composant crée une instance de Toaster qui est ensuite utilisée pour créer des toasts individuels.
Par exemple:
importer Réagir depuis"réagir";
importer { Grille-pain superposé, bouton } depuis"@blueprintjs/core";constante toasterInstance = OverlayToaster.create({ position: "en haut à droite" });
fonctionApplication() {
constante showToast = () => {
toasterInstance.show({
message: "C'est un toast",
intention: "primaire",
temps libre: 3000,
isCloseButtonShown: FAUX,
icône: "signet",
});
};retour (
exporterdéfaut application ;
Le bloc de code ci-dessus utilise le OverlayToaster.create méthode pour générer l'instance de grille-pain et spécifie sa position à l'aide de la position soutenir.
Il définit également la fonction afficherToast. Cette fonction utilise le montrer méthode de la grille-painInstance pour afficher le toast lorsqu'il est appelé. Le montrer La méthode prend un objet avec le message, intention, temps libre, isCloseButtonShown, et icône accessoires.
Le message prop spécifie le contenu textuel du toast, tandis que le intention prop spécifie le type de toast. Le style du pain grillé variera en fonction de sa valeur.
Vous pouvez contrôler la durée d'affichage de la notification de toast à l'aide du temps libre soutenir. Le icône prop spécifie un élément icône à afficher dans le toast. Avec le isCloseButtonShown prop, vous pouvez contrôler si le bouton de fermeture s'affiche dans le toast.
Le bloc de code ci-dessus générera un beau toast lorsque vous cliquerez sur le bouton, comme le montre l'image ci-dessous.
Si vous cherchez à créer des notifications 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 à la création 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 considérablement améliorer 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.