Utilisez la bibliothèque Blueprint et vous n'aurez plus jamais de mal à créer un site Web attrayant et accessible.
Construire une application React à partir de zéro peut être une tâche longue et difficile, en particulier lorsqu'il s'agit de styliser les composants. C'est là que Blueprint UI Toolkit est utile. La boîte à outils est un ensemble de composants d'interface utilisateur réutilisables qui peuvent vous aider à créer des interfaces cohérentes et visuellement attrayantes pour vos applications React.
Découvrez les bases de la boîte à outils Blueprint UI et comment l'utiliser pour créer une application React simple.
Blueprint UI Toolkit est un Bibliothèque de composants d'interface utilisateur React. Il contient une collection de composants prédéfinis faciles à utiliser et à personnaliser. Vous pouvez utiliser ces composants préconçus prêts à l'emploi ou les modifier pour répondre à vos besoins spécifiques.
Les composants de Blueprint UI Toolkit incluent les boutons, les formulaires, les modes, la navigation et les tableaux. L'utilisation de ces composants peut vous faire gagner du temps et des efforts, car vous n'avez pas à concevoir et à créer chaque composant à partir de zéro.
Pour démarrer avec Blueprint UI Toolkit, vous devez créer une application React.
Une fois votre projet configuré, vous pouvez installer Blueprint UI Toolkit à l'aide du programme d'installation de package Node de votre choix. Pour installer Blueprint UI Toolkit à l'aide de npm, exécutez la commande suivante dans votre terminal :
npm installer @blueprintjs/core
Pour utiliser du fil à la place, exécutez cette commande :
fil ajouter @blueprintjs/core
Une fois que vous avez installé Blueprint UI Toolkit, vous pouvez utiliser les composants de votre choix dans votre application React.
Avant d'utiliser les composants, incluez les fichiers CSS de Blueprint UI Toolkit :
@importer"normaliser.css";
@importer"@blueprintjs/core/lib/css/blueprint.css";
@importer"@blueprintjs/icons/lib/css/blueprint-icons.css";
L'ajout du bloc de code ci-dessus à votre fichier CSS applique les styles d'interface utilisateur Blueprint à ses composants.
Par exemple, pour ajouter un bouton à votre application, utilisez la Bouton composant de Blueprint UI Toolkit :
importer Réagir depuis"réagir";
importer { Bouton } depuis"@blueprintjs/core";fonctionApplication() {
retour (
exporterdéfaut application ;
Ce bloc de code ajoute un bouton à votre application en utilisant le Bouton composant. Le Bouton le composant prend des accessoires tels que intention, texte, icône, petit, et grand.
Le intention prop définit la nature du bouton, qui se reflète dans sa couleur d'arrière-plan. Dans cet exemple, le bouton a une succès intention qui lui donne une couleur de fond verte. Blueprint UI propose plusieurs intentions principales, notamment primaire (bleu), succès (vert), avertissement (orange) et danger (rouge).
Vous pouvez spécifier le texte qui apparaît à l'intérieur du bouton avec le texte soutenir. Vous pouvez également ajouter des icônes au bouton à l'aide de la icône soutenir. A côté de la icône l'accessoire est le icônedroite prop, qui ajoute l'icône sur le côté droit du bouton.
Enfin, le grand et petit les accessoires booléens spécifient la taille du bouton. Le grand prop rend le bouton plus grand, tandis que le petit prop le rend plus petit.
Le bloc de code précédent générera un bouton qui ressemble à ceci :
Vous pouvez également utiliser le Bouton d'ancrage composant pour créer un bouton dans votre application. Le Bouton d'ancrage Le composant est une version spécialisée du composant Button explicitement conçu pour être utilisé comme lien.
Ce composant accepte bon nombre des mêmes accessoires que le composant Button, y compris texte, grand, petit, intention, et icône. Il accepte également la href et cible accessoires.
Le href prop spécifie l'URL vers laquelle le bouton renvoie, et le cible prop spécifie la fenêtre ou le cadre cible du lien :
importer Réagir depuis"réagir";
importer { bouton d'ancrage } depuis"@blueprintjs/core";fonctionApplication() {
retour (
href=" https://example.com/"
intention="primaire"
texte="Cliquez-moi"
cible="_blanc"
/>
</div>
);
}
exporterdéfaut application ;
Ce bloc de code ci-dessus rend un Bouton d'ancrage composant. Le composant href la valeur de prop est " https://example.com/” et le cible La valeur prop est "_blank", ce qui signifie que le lien s'ouvrira dans un autre onglet ou fenêtre du navigateur.
Un autre composant essentiel de la boîte à outils Blueprint UI est le Carte composant. Il s'agit d'un composant réutilisable qui affiche des informations d'une manière visuelle attrayante.
Le composant Card prend deux props interactif et élévation. Le élévation prop contrôle la profondeur d'ombre de la carte, avec des valeurs plus élevées produisant un effet d'ombre plus important.
Le interactif prop accepte une valeur booléenne. Lorsqu'il est défini sur true, il active les interactions de survol et de clic sur la carte, ce qui lui permet de répondre aux entrées de l'utilisateur.
Par exemple:
importer Réagir depuis"réagir";
importer { Carte, Altitude } depuis"@blueprintjs/core";fonctionApplication() {
retour (vrai} élévation={Altitude. DEUX}> Ceci est une carte</h2>
C'est du contenu dans ma carte </p>
</Card>
</div>
);
}
exporterdéfaut application ;
Dans cet exemple, le Carte composant a un titre et du contenu. Le interactif l'accessoire est réglé sur vrai.
Vous importez également le Élévation composant de @blueprintjs/core. Le Élévation component est une énumération qui définit un ensemble de valeurs prédéfinies que vous pouvez utiliser pour définir la profondeur d'ombre d'un composant.
Voici les valeurs disponibles du Élévation énumération :
- Élévation. ZÉRO: Cette valeur définit la profondeur d'ombre sur 0, indiquant que le composant n'a aucune ombre appliquée
- Élévation. UN: Cette valeur définit la profondeur d'ombre sur 1.
- Élévation. DEUX: Cette valeur définit la profondeur d'ombre sur 2.
- Élévation. TROIS: Cette valeur définit la profondeur d'ombre sur 3.
- Élévation. QUATRE: Cette valeur définit la profondeur d'ombre sur 4.
- Élévation. CINQ: Cette valeur définit la profondeur d'ombre sur 5.
Le rendu du bloc de code ci-dessus affichera une image sur votre écran qui ressemble à ceci :
Les composants Blueprint UI Toolkit sont faciles à personnaliser. Vous pouvez utiliser le CSS traditionnel pour modifier l'apparence des composants, ou vous pouvez utiliser les accessoires fournis pour modifier leur comportement.
Par exemple, vous pouvez personnaliser l'apparence d'un bouton en lui passant un nom du cours soutenir:
importer Réagir depuis"réagir";
importer { Bouton } depuis"@blueprintjs/core";fonctionApplication() {
retour (
exporterdéfaut application ;
Le bloc de code ci-dessus applique une classe personnalisée au bouton, vous permettant de modifier son apparence à l'aide de CSS :
.mon-bouton{
rayon de bordure: 10pixels;
rembourrage: 0.4rem 0.8rem;
}
L'application de ces styles fera ressembler votre bouton à ceci :
Il y a beaucoup plus à Blueprint UI
Blueprint UI offre plus de composants que ceux mentionnés ci-dessus, tels que Alert, Popover, toast, etc. Cependant, avec les informations fournies, vous pouvez créer une application React simple à l'aide de Blueprint UI.
Vous pouvez styliser votre application React en utilisant différentes méthodes. Vous pouvez utiliser les CSS traditionnels, SASS/SCSS, Tailwind CSS et CSS dans les bibliothèques JS telles que les émotions, les composants stylés, etc.