Dans cet article, nous passerons de la création de tous nos propres styles dans Sass à l’utilisation de matériaux angulaires. C’est définitivement un pas vers un développement angulaire plus rapide et plus évolutif.
Comme les développeurs aiment coder et faire tout par nous-mêmes, nous pouvons parfois oublier les réalités d’un besoin de productivité, notre charge de travail écrasante ou pour considérer le temps de commercialisation. Dans notre Article précédent, nous avons construit un thème poney à partir de zéro en utilisant SASS—Définir les couleurs, créer des mixins et les intégrer tous dans un seul thème et personnaliser notre joli bouton poney.
Cette approche nous fait nous sentir comme des artisans, construisant chaque partie du thème et du style. Peut-être que nous aimons avoir le contrôle total, mais un tel contrôle est également livré avec des coûts cachés comme la maintenance des styles personnalisés, la vérification de l’accessibilité, la création de chaque fonctionnalité et, bien sûr, la gestion de l’évolutivité du thème. Cela peut être difficile car nous devons tout faire nous-mêmes!
Maintenant, il est temps d’économiser du temps et d’accélérer la productivité. Au lieu de créer tous les aspects de nos composants, comme des boutons ou des cartes, nous voulons intégrer notre thème personnalisé dans des composants puissants et prêts dans un cadre comme un matériau angulaire et aligner ces composants avec nos couleurs de thème de poney.
Pourquoi choisir un matériau angulaire?
Bien, Matériau angulaire est un grand cadre de composant mature et bien testé. Il est gratuit et est livré avec une liste de composants puissants (et il est également prêt pour l’accessibilité). Nous n’avons donc pas besoin de construire des composants à partir de zéro, lorsque le matériau angulaire est livré avec un API THEMING Cela nous permet de personnaliser des styles à l’aide de theming basé sur SASS, tout en offrant un excellent Directives de conception des matériaux Pour garder l’interface utilisateur cohérente dans nos applications.
Spoiler: J’ai trouvé des défis pendant le processus, mais c’est quelque chose que je vous laisserai découvrir par vous-même.
La meilleure façon d’apprendre et de comprendre pourquoi utiliser du matériel angulaire sur le thème avec Sass est d’apprendre en faisant, alors mettons en œuvre notre thème en utilisant du matériel angulaire dans notre projet et voir comment cela fonctionne.
Configuration du projet
Premièrement, cloner notre projet existant, monde des poneys Mais au lieu de commencer par la branche maître, nous commençons à partir de l’état du projet précédent theme-with-sass bifurquer. Exécuter la commande git clone --branch theme-with-sass --single-branch https://github.com/danywalls/ponies-world.git. Il clones le projet dans la branche spécifique.
git clone --branch theme-with-sass --single-branch https://github.com/danywalls/ponies-world.git
Cloning into 'ponies-world'...
remote: Enumerating objects: 53, done.
remote: Counting objects: 100% (53/53), done.
remote: Compressing objects: 100% (47/47), done.
remote: Total 53 (delta 8), reused 0 (delta 0), pack-reused 0 (from 0)
Receiving objects: 100% (53/53), 132.88 KiB | 3.24 MiB/s, done.
Resolving deltas: 100% (8/8), done.
Ensuite, déplacez-vous dans le monde des poneys annuaire. Pour être sûr que nous travaillons dans le même état, courir git branch commande – il doit afficher le *theme-with-sass bifurquer.
git branch
* theme-with-sass
Parce que nous voulons garder notre branche de thème-avec-Sass propre, créez une nouvelle branche en utilisant git checkout -b move-to-material.
Parfait. Dans la prochaine étape, nous allons installer du matériel angulaire! 🎨🖌️
Commencez avec du matériau angulaire
Il est maintenant temps d’améliorer notre interface utilisateur en utilisant un matériau angulaire. Il a des schémas pour faciliter la configuration de notre projet. Tout d’abord, exécutez le ng add @angular/material Commande dans le terminal, qui vous invitera avec des options de configuration. Dans notre cas, nous choisissons SCSSDéfinissez le thème par défaut (nous le remplacerons plus tard) et activerons la typographie et les animations globales.
ng add @angular/material
La CLI vous invitera avec des options de configuration. Sélectionnez oui et choisissez votre thème préféré (nous allons quand même le changer sur notre thème Pony).
Une fois installé, nous pouvons commencer à personnaliser le thème.
OK, mais qu’a fait le schéma? Le schéma mis à jour angulaire.json pour enregistrer le thème prédéfini et ajouter la police roboto dans index.html. Toutes les modifications sont automatiques pour nous, mais lorsque nous commençons à utiliser du matériel dans notre application, nous devons apporter de petits changements.
La puissance du matériau angulaire offre des composants et des directives. Pour personnaliser notre existant pony-buttonnous devons utiliser des directives de matériel avec. Alors, ouvert pony-button-component.ts et importer le MatButtonModulequi nous donne accès à MatButton Directive, faisant de nos boutons sophistiqué avec un style de matériau.
import { Component, computed, input } from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
@Component({
selector: 'app-pony-button',
imports: [
MatButtonModule
],
templateUrl: './pony-button.component.html',
styleUrl: './pony-button.component.scss',
})
export class PonyButtonComponent {
label = input<string>('Accept');
Enfin, ouvrez le pony-button.component.htmlajouter mat-button Directive au bouton et enregistrez les modifications. Après cela, exécutez l’application avec ng servealler à http://localhost:4200 Et tada !! Nous avons nos boutons avec le style matériel !!!
Voulez-vous faire des choses puissantes avec directives?
Mmmm… a l’air bien, mais ce ne sont pas les couleurs de poney. Alors, comment adapter le matériau angulaire pour correspondre un peu plus à mes couleurs de poney? Il est temps de comprendre comment fonctionne le thème du matériel angulaire!
Thémination de matériaux angulaires
Angular Material utilise une API de thèmes basée sur SASS qui permet aux développeurs de définir les palettes de couleurs et de remplacer les styles. Le système de thème par défaut suit les principes de conception des matériaux, avec une couleur primaire pour la couleur de marque principale, la couleur d’accent dans les reflets, une couleur d’avertissement pour les états d’erreur et une couleur de surface / d’arrière-plan pour l’interface utilisateur globale.
Pour appliquer notre thème de poney dans le matériel, nous devons utiliser Sass en combinaison avec le mat.theme Mixin pour aider à personnaliser la couleur, la typographie et la densité en utilisant jetons de conception et une palette de couleurs.
Personnons-le. Ouvrir le _theme.scss fichier et importer un matériau angulaire thème avec @use '@angular/material' as mat;. Définir color-scheme à la lumière pour voir les couleurs pour la lumière. En utilisant le mat alias, appelez le mat.theme() Mélanger et régler la couleur avec mat.$violet-palette et typographie.
Le code final ressemble:
@use "colors";
@use "mixins";
@use '@angular/material' as mat;
html {
color-scheme: light;
@include mat.theme((
color: mat.$violet-palette,
typography: Roboto,
density: 0
));
}
Parfait! 🚀 Maintenant, nos boutons et (entrées, cartes, etc.) hériteront de nos couleurs violet! Mais ne voulons-nous pas utiliser _colors variables, comme $primary-color: #ff69b4;?
Essayons de changer mat.$violet-palette à colors.$primary-color.
@use "colors";
@use "mixins";
@use '@angular/material' as mat;
html {
color-scheme: light;
@include mat.theme((
color: colors.$primary-color,
typography: Roboto,
density: 0
));
}
Enregistrez les modifications et… oups! 🙃
Nous avons eu une erreur car le thème attend une palette de couleurs. Cela signifie donc que je dois créer une palette de couleurs? Nous avons de la chance, car l’équipe matérielle a créé un schéma pour que nous puissions générer facilement une palette en fonction de nos couleurs, alors créons-le!
Construisez un thème avec des couleurs de poney
Nous voulons générer une nouvelle palette basée sur un matériau angulaire en utilisant les schémas, si nous allons au code source Dans le Readme, il contient des exemples de son fonctionnement. Commençons à jouer avec!
Ouvrez le terminal dans le dossier du projet et exécutez la commande ng generate @angular/material:theme-color. Il vous posera des questions sur vos couleurs pour créer le primaire, le secondaire, le tertiaire et plus (nous n’avons pas besoin de les définir tous), et cela permet également un contraste élevé.
Dans notre cas, nous prenons les mêmes couleurs du scss/_colors.scss Fichier – Par exemple, les couleurs primaires et secondaires. Tous ne sont pas requis dans notre cas, nous ne définirons donc que le primaire et le secondaire. Après cela, il stockera la nouvelle palette de couleurs avec le nom _theme-colors.scss.
La dernière étape consiste à utiliser notre palette personnalisée _theme-colors.scss dans notre thème. Ouvrir _theme.scss fichier et importer custom-theme avec un alias comme pony-theme et définissez la couleur avec notre ponytheme.primary-palette.
Le code final ressemble:
@use '@angular/material' as mat;
@use 'theme-colors' as ponytheme;
html {
color-scheme: light;
@include mat.theme((
color: ponytheme.$primary-palette,
typography: Roboto,
density: 0
));
}
🛠️ Conseil: Si votre compilateur SASS ne peut pas trouver
theme-colorsessayez d’ajuster le chemin vers'.@use '../../_theme-colors' as ponytheme;'. Cela peut se produire en fonction de votre structure de dossier et de la configuration de vos styles globauxangular.json.
Enregistrer les modifications et Tada !!! Nous avons eu nos composants avec une palette de poney rose! 🥳💃
Résumer
Nous avons appris à créer un thème personnalisé en utilisant un matériau angulaire, accélérant notre développement à l’aide de composants de matériaux angulaires et de nos couleurs. Mais, pour être honnête, tandis que le thème matériel fonctionne, j’ai rencontré plusieurs défis en cours de route. Je n’aime pas que nous devons recompiler l’application pour voir un changement de thème, et avec trop de passe-partout, il semble que nous devrons écrire plusieurs fonctions et configurations SASS juste pour définir un thème de base.
J’ai été déçu de la documentation de thèmes car il manque d’exemples pratiques, ce qui rend difficile la suivante pour les applications du monde réel et ce n’est pas adapté aux débutants. À mon avis, l’API de thème matériel est complexe, nécessitant une connaissance des utilitaires de théâtre de Sass et de Material, ce qui n’est pas raisonnable pour les nouveaux développeurs.
Alors que puis-je faire? 🤔
Comme je l’ai dit, nous devons fournir des solutions pour aider les développeurs et l’entreprise, alors essayons de trouver un moyen plus efficace de thème une application angulaire. Essayons Kendo ui pour angulaire et Progress Themedbuilder. Cela devrait apporter des fonctionnalités clés qui peuvent gagner du travail et du temps pour mon équipe, comme le thème changeant instantanément dans un éditeur d’interface utilisateur, en sautant l’API de thèmes complexes et une excellente documentation et un soutien, ce qui facilite la mise en œuvre des équipes.
Ainsi, dans le prochain article, nous explorerons l’interface utilisateur de Kendo et Themebuilder pour simplifier le thème, éliminer le code de la baillit et accélérer le développement de l’interface utilisateur.
Code source: https://github.com/danywalls/ponies-world/tree/move-to-material
Codage heureux!
Voulez-vous aller profondément dans le thème du matériel 3? Je recommande vivement une vidéo incroyable https://www.youtube.com/watch?v=kQur2p4rggm par https://x.com/guacamoleankita Et Alyssa Nicoll! 😊
Source link