#14: 💅 Ajouter le style
Avec Angular, nous pouvons donner du style aux composants d'une manière qui n'affectera pas le reste de l'application. C'est une bonne pratique d'encapsuler le style lié au composant de cette façon.
Nous pouvons également définir des règles de style générales à utiliser dans toute l'application. C'est une bonne pratique pour créer le même rendu visuel pour tous nos composants. Par exemple, nous pouvons décider de la palette de couleurs qui sera utilisée comme thème de notre application. Ce qui permet, si nous voulons changer les couleurs ou offrir différents thèmes, de le changer à un seul endroit, et pas dans chaque composant.
Angular nous donne différentes méthodes d'encapsulation du style, mais nous nous en tiendrons à la valeur par défaut.
Angular CLI a généré une feuille de style générale pour nous à src/style.scss. Collez le code suivant dans ce fichier:
html, body, div, span,
h1, p, ul, li {
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
body {
background: #f1f1f1;
font-size: 16px;
line-height: 22px;
color: #404040;
font-family: 'Lucida Grande', Verdana, sans-serif;
}
ol, ul {
list-style: none;
}
.btn {
background: lightseagreen;
color: #fff;
padding: 3px 10px;
margin: 0 0 0 3px;
border: none;
border-radius: 5px;
font-size: 12px;
line-height: 24px;
cursor: pointer;
vertical-align: bottom;
}
.btn:hover {
background: lightslategrey;
}
.btn-red {
background: red;
}
.btn-red:hover {
background: darkred;
}
.app-title {
font-size: 52px;
line-height: 52px;
margin-bottom: 30px;
font-weight: bold;
text-align: center;
letter-spacing: -0.8px;
}Comment le projet sait-il qu'il doit regarder ce fichier? Dans le fichier de configuration Angular CLI
angular.jsonsousprojects.todo-list.architect.build.options.styles, vous pouvez indiquer les fichiers que l'outil de build doit prendre et ajouter au projet. Vous pouvez ouvrir les outils de développement du navigateur et voir le style à l'intérieur de l'élément:
Nous avons ajouté du style directement aux éléments (html, body, div, span, h1, p, ul, li) qui affecteront notre application immédiatement. Nous avons également ajouté des styles en utilisant des sélecteurs de classe css. Nous devons ajouter ces noms de classe aux éléments où nous voulons que le style s'applique.
Dans app-root ajoutez la classe app-title à l'élément h1:
Dans input-button-unit ajoutez la classe btn à l'élément button:
Maintenant nous allons ajouter des styles spécifiques au composant.
Maintenant nous allons ajouter du style spécifique au composant input-button-unit. Ouvrez le fichier input-button-unit.component.scss et ajoutez le style suivant à l'intérieur :
Comment cette feuille de style est-elle attachée au composant input-button-unit? Regardez le fichier input-button-unit.component.ts. L'une des propriétés de l'objet passé au décorateur @Component est styleUrls. C'est la liste de feuilles de style à utiliser par Angular, qui encapsule le style dans le composant.
Le sélecteur :host est appliqué à l'élément qui contient ce composant, ici <app-input-button-unit>. Cet élément ne fait pas partie du modèle de ce composant, il apparaît dans le modèle de son parent. C'est ainsi que nous pouvons contrôler son style à partir du composant.
Nous devons ajouter la classe todo-input à l'élément input :
Supprimons la partie qui n'est plus utile :
Maintenant nous allons ajouter du style spécifique au composant list-manager. Ouvrez le fichier list-manager.component.scss et ajoutez le style suivant à l'intérieur :
Nous allons envelopper le contenu de ce composant avec un élément <div> qui a la classe todo-app.
Enfin, nous allons ajouter du style spécifique au composant todo-item. Ouvrez le fichier todo-item.component.scss et ajoutez le style suivant à l'intérieur :
Placez le contenu du composant todo-item dans un élément <div> avec la classe todo-item:
Nous utiliserons les classes todo-checkbox et todo-title plus tard.
Vous pouvez changer le style comme vous le souhaitez - la taille des éléments, les couleurs !
Note: Vous pouvez utiliser des fichiers SCSS dans le projet, ce qui est une façon plus agréable d'écrire du style. Il a de grandes fonctionnalités qui aident le développeur. Les fichiers SCSS sont compilés en CSS lorsque le projet est build.
Last updated