Frameworks d’interface utilisateur de thème dans Angular Part 1: Thème avec SASS

L’une des options pour thème un cadre d’interface utilisateur est Sass. Explorons la création de couleurs, en utilisant des mixins et tous les coûts cachés avec Sass dans une application angulaire.

Il y a quelques mois, nous avons construit un Bibliothèque d’interface utilisateur angulaire à partir de zéro. Mais parfois, nous n’avons pas besoin de créer une bibliothèque à partir de zéro – nous voulons juste utiliser les couleurs de notre marque de notre entreprise. Nous pouvons créer des composants à partir de zéro ou pour profiter des bibliothèques existantes et les adapter aux couleurs de notre marque. L’utilisation de cette approche accélère le développement en utilisant des composants intégrés comme des boutons et des grilles puissantes.

D’après mon expérience en travaillant avec différentes entreprises, chaque décision a un coût caché, que ce soit au début ou plus tard. Parfois, nous ne voulons pas mettre en œuvre une bibliothèque d’interface utilisateur parce que nous pensons que nous pouvons le faire nous-mêmes, mais cette décision a un prix. Dans d’autres cas, nous pouvons choisir des solutions alternatives comme la mise en œuvre de couleurs de marque dans une bibliothèque existante comme Matériau angulaire ou progresser Kendo ui pour angulaire.

🤔 N’oubliez pas: nos choix ont un impact plus que le code. Ils affectent également le produit, les délais de livraison, la charge de travail et, en fin de compte, le succès de l’entreprise.

Alors aujourd’hui, commençons un voyage d’exploration de ces différentes options pour thème un cadre d’interface utilisateur. Tout d’abord, nous créerons un thème en utilisant Toupet. Nous chercherons à créer des couleurs, à utiliser des mixins et tous les coûts cachés. Dans les articles suivants, nous explorerons d’autres alternatives: le prochain matériel angulaire, et enfin Kendo UI pour Angular avec Progress Themedbuilder Pour voir comment gagner du temps et des efforts tout en accélérant le développement pour vous, votre équipe et votre entreprise.

Commençons!

Scénario

Je veux m’inspirer de mon amie Alyssa Nicoll et de son incroyable projet, Tour of Ponies. Ce projet comprend toutes les couleurs liées aux poneys, et je vais créer un nouveau projet, «Ponies World», en utilisant Angular 19. Dans ce projet, je vais adapter l’identité des couleurs de la marque des poneys en créant un thème SASS personnalisé avec des variables, des couleurs, des mixins et un thème en créant un composant de bouton de poney à utiliser dans une application angulaire.

Allons-y!

Configuration du projet

Tout d’abord, créez une nouvelle application angulaire en utilisant la CLI angulaire avec la commande npx -p @angular/cli ng new ponies-worldmais en utilisant le --style=scss Flag, il générera le projet prêt avec SASS configuré:

npx -p @angular/cli ng new ponies-world --style=scss
√ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No

Sélectionnez les options par défaut dans la CLI. Ensuite, le projet est créé. Ensuite, accédez à votre dossier de projet et ouvrez-le avec votre éditeur préféré.

Angular par défaut crée pour nous le styles.scss. Il fonctionne comme notre fichier CSS principal pour toute l’application. Mais, dans notre cas, nous voulons construire un thème en prenant un soin particulier pour les plans futurs, avec une structure claire facile à entretenir, au lieu de tout mettre dans un seul fichier. Nous allons créer un ensemble de fichiers pour les variables, les mixins et un fichier de thème pour les fournir à nos styles.scss en angulaire.

Le styles.scss est enregistré dans angular.json Dans la section Build.

OK, nous sommes prêts à commencer à définir les variables de couleur dans SASS!

Construisez les poneys avec Sass

Tout d’abord, nous allons définir les variables de couleur poney dans Sass. Les variables de SASS nous permettent de stocker des valeurs réutilisables telles que les couleurs, les polices et l’espacement, ce qui rend nos styles plus cohérents et plus faciles à entretenir.

Définir les variables de couleur

Tout d’abord, créez un scss Le répertoire, et à l’intérieur, créent un _colors.scss dossier pour définir les couleurs pour notre Thème poney. Nous utiliserons le $color-name Convention pour déclarer nos couleurs. Dans ce cas, nous définirons les couleurs primaires, secondaires, de texte et d’arrière-plan.

Chaque variable doit être nommée avec le -color suffixe. Par exemple, nous avons ajouté -dark Pour les couleurs sombres:

$primary-color: #ff69b4;
$primary-color-dark: #6c0438;
$secondary-color: #ffd700;
$text-color: #333;
$text-color-dark: #f3f1f1;
$background-color: #fff0f5;

Parfait! Maintenant que nous avons nos couleurs, il est temps de créer des mixins et de réutiliser ces couleurs de poney.

Créer des mixins pour les composants

Il est maintenant temps de créer des mixins dans des blocs de styles SASS – réutilisables que nous pouvons inclure à plusieurs endroits. Ils nous permettent de définir des styles une fois et de les appliquer à différents éléments avec flexibilité. Nous utilisons le @mixin Mot-clé suivi d’un nom pour définir un mixin. De plus, les mélanges prennent en charge les paramètres, ce qui nous permet de créer des styles flexibles qui peuvent être personnalisés lorsqu’ils sont appliqués. Par exemple, en utilisant $primary-color par défaut ou envoi $primary-color-dark Pour changer le bouton en mode sombre.

Tout d’abord, créez un _mixins.scss déposer. Sur lui, nous créons un mélange de bouton de poney, en utilisant la couleur primaire par défaut et, avec ()ajoutant deux paramètres: $bg-color et $text-color.

Ouvrir le _mixins.scss fichier et importer les variables en utilisant @use mot-clé pour importer les variables, le nom de mixin pony-buttonen utilisant colors.$primary-color comme valeur par défaut.

Le code final ressemble à ceci:

@use "colors" as colors;

@mixin pony-button($bg-color: colors.$primary-color, $text-color: white) {
    background-color: $bg-color;
    color: $text-color;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;

    &:hover {
        opacity: 0.9;
    }
    
    &:disabled {
        background-color: #ccc;
        color: #666;
        cursor: not-allowed;
    }
}

En savoir plus sur mixins.

Pourquoi @Use au lieu de @Import?

J’ai travaillé en utilisant @import Pour réutiliser le code SASS, mais SASS a déprécié @import en faveur de @use. Le @use La règle ne charge un fichier qu’une seule fois, empêchant les importations en double et améliorant la maintenabilité avec l’encapsulation. Il limite également l’accessibilité des styles importés aux personnes explicitement disponibles et optimise la compilation en réduisant les importations redondantes.

En savoir plus sur @utiliser.

Parfait! Nous avons terminé nos mélanges Pony-Button. Passons à la création du thème.

Le thème

Maintenant, créez un _theme.scss fichier et importer les variables et les mixins en utilisant @use. Le _theme.scss Le fichier nous aide à centraliser l’importation de variables et de mixins, ce qui facilite la gestion des styles dans l’application.

Nous avons seulement besoin d’importer ce fichier dans le monde style.scss:

@use "colors";
@use "mixins";

Ensuite, nous créons deux classes pony-btn et pony-btn-dark. Le pony-btn utilise les mixins par défaut, et pony-btn-dark usages $primary-color-dark et $text-color-dark pour changer le comportement des mélanges de poney-bouton.

Le code final ressemble:

@use "colors";
@use "mixins";

.pony-btn {
  @include mixins.pony-button();
}
.pony-btn-dark {
  @include mixins.pony-button(
    colors.$primary-color-dark,
    colors.$text-color-dark
  );
}

Parfait. Il est maintenant temps d’importer notre thème vers le styles.scss Créé par CLI angulaire. Cela permet à tous les composants de suivre facilement le même design et les mêmes styles, avec des couleurs et des styles de classes de bouton. Ouvrir le styles.scss file et importer le thème:

@use "scss/theme";

Le styles.css est configuré dans le angular.json déposer:

"styles": [
  "src/styles/styles.scss"
]

Super! Notre application est prête à utiliser notre thème. Il est temps de créer notre composant Pony-Button.

Le bouton Pony

Le bouton Pony rendra un bouton avec un titre et avec nos cours CSS pour le mode noir. Tout d’abord, créez le composant à l’aide de la CLI angulaire avec la commande suivante:

ng generate component components/pony-button

Ouvrir le pony-button.component.ts déposer. Nous devons déclarer deux propriétés d’entrée de signal, label et darkMode.

@Component({
  selector: 'app-pony-button',
  imports: [],
  templateUrl: './pony-button.component.html',
  styleUrl: './pony-button.component.scss',
})
export class PonyButtonComponent {
  label = input<string>('Accept');
  darkMode = input(false);

Pour permettre un changement dynamique lorsque l’utilisateur souhaite utiliser le darkModeutilisez le puissant calculé signaux pour réagir aux modifications. Le code final ressemble:

import { Component, computed, input } from '@angular/core';

@Component({
  selector: 'app-pony-button',
  imports: [],
  templateUrl: './pony-button.component.html',
  styleUrl: './pony-button.component.scss',
})
export class PonyButtonComponent {
  label = input<string>('Accept');
  darkMode = input(false);
  themeClass = computed(() => (this.darkMode() ? 'pony-btn-dark' : 'pony-btn'));
}

En savoir plus sur signaux.

Enfin, modifier pony-button.component.html modèle lier le themeClass() dans le class la propriété et le label().

<button [class]="themeClass()">
  {{ label() }}
</button>

Il est temps d’utiliser le app-pony-button composant avec chaque cas – la valeur par défaut et darkMode! 💪

Utilisation du bouton Pony

Il est temps d’utiliser notre joli bouton à thème app-pony-button composant. Ouvrir le app.component.ts. Parce que nous utilisons autonomeimporte le PonyButtonComponent dans le imports section.

import { Component } from '@angular/core';

import { PonyButtonComponent } from './components/pony-button/pony-button.component';

@Component({
  selector: 'app-root',
  imports: [PonyButtonComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {}

Ensuite, ajouter <app-pony-button/> avec labelet autre avec darkMode à vrai.

<app-pony-button label="Login"/>
<app-pony-button [darkMode]="true" label="Continue"/>

Enregistrer les modifications et exécuter l’application avec ng serve. Une fois qu’il est en cours d’exécution, ouvrez votre navigateur et allez à: http: // localhost: 4200 / et Alors !! Nous avons deux boutons avec le thème Pony !!! 🥳

ng serve

Résumer

Ouais! Nous l’avons fait! Nous avons réussi à construire le thème poney avec SASS en définissant des variables, en utilisant des mixins et en structurant nos fichiers pour prendre en charge le style évolutif.

Mmm… Tenez une seconde! 🤔

Avez-vous l’impression que nous avons fait trop de travail juste pour un seul bouton, avec des états de couleur pour les handicapés et survolez-vous? Qu’en est-il des animations et d’autres États? Combien de travail devrait être nécessaire pour une carte ou une grille?

Oups, nous avons oublié accessibilité! 🥲

Comment pensez-vous que l’équipe peut gérer de nouvelles exigences, ainsi que la charge de travail de la construction du thème, tout en livrant à temps?

C’est le moment où nous devons choisir un cadre comme Matériau angulaire ou Kendo ui pour angulaire. Dans le Article suivantnous intégrerons notre thème de poney dans un matériau angulaire, personnaliserons un composant et implémenter Thème dynamique (mode clair / sombre). Enfin, nous explorerons comment gagner du temps en utilisant Kendo UI et Themebuilder Prorendre notre processus de thème rapide et amusant!

Code source: Monde des poneys