Theming avec style

Nos boutons ont une belle apparence après le travail effectué dans le dernier article . Mais si nous voulions les personnaliser? Où pourrions-nous même
commencer? Découvrez les réponses à ces questions et expliquez-vous comment utiliser les thèmes fournis avec Kendo UI dans la troisième partie de Angular & Kendo UI Unite!

Bonjour, et bon sang. Je m'appelle Alyssa Nicoll. Bienvenue au segment trois de Angular & Kendo UI Unite . Si vous
soyez nouveaux dans cette série, jetez un œil à le premier article pour commencer!

Vous pouvez également regarder la vidéo sur laquelle cet article est basé – sinon, plongez dans le texte ci-dessous.

Maintenant que nous avons terminé la deuxième partie de cette série nos boutons sont actuellement très beaux.

Cependant, si nous voulions les personnaliser ? Où pourrions-nous même commencer par quelque chose comme ça? Et à propos de
thèmes? Quels sont les thèmes et comment pouvons-nous les utiliser?

Thèmes

Les thèmes sont des styles utilisés par nos composants de l'interface utilisateur de Kendo pour leur donner un aspect cohésif et élégant. Lorsque nous avons utilisé pour la première fois la mention pour inclure les boutons Kendo UI dans notre application, elle comprenait également le thème par défaut de Kendo UI (voir le fichier package.json ). Vous pouvez voir à quoi ressemblent tous les composants du thème par défaut ici .

Nous avons cependant plus que le thème par défaut! Je tiens à vous montrer dans nos documents, où nous avons un aperçu du style qui traite des multiples thèmes de que nous avons à offrir . Le premier, comme vous le savez, est le thème par défaut, fourni initialement avec nos composants de boutons. Nous avons aussi un Bootstrap et un Material.

Découvrez plus d'informations sur notre thème Bootstrap ici :

Découvrez plus d'informations sur notre thème ici:

Y compris un thème différent

Dans cet article, nous allons faire tourner le thème Matériau. Nous allons commencer par installer le thème Matériau dans notre application:

npm install --save @ progress / kendo-theme-material

Nous allons maintenant modifier les références à kendo-theme-default à kendo-theme-material dans d'angular.json . Ensuite, démarrez l’ancien serveur et découvrez insta-magic. Au lieu du bouton orange par défaut de notre bouton principal, nous devrions en voir un bleu pour l'aspect Matériel:

En fait, tous nos boutons ont maintenant un aspect différent!

Styles par défaut :

Styles de thème des matières:

Personnalisation d'un thème

Ce dont j'aimerais parler, c'est de la personnalisation le thème. Donc, si nous passons à la page de personnalisation dans la documentation vous pouvez voir une liste de variables SCSS. Ces variables sont écrasables, ce qui signifie que nous pouvons leur attribuer les valeurs de notre choix.

Pour modifier ces variables, nous devons continuer et commencer à utiliser SCSS dans notre champ angulaire. application. Tout ce que nous avons à faire est de changer l'extension du fichier de styles en .scss . Puis, dans angular.json modifiez les références styles.css à styles.scss .

Maintenant que nous avons apporté ces modifications, nous devrions être capable d'utiliser SCSS dans notre application. En fait, si nous rouvrons le terminal et redémarrons notre application, nous constatons que rien n’a changé et que tout est comme il l’a fait! En effet, tous les CSS valides sont des SCSS valides. Nous n'avons donc pas du tout besoin de modifier nos styles pour que le fichier .scss fonctionne correctement.

La partie suivante, que vous pouvez lire dans nos docs, est la personnalisation des thèmes. . Les liens vers les variables pour les thèmes Par défaut, Bootstrap et Matériel sont tout à fait exacts, très pratiques. Mais ci-dessous, nous parlons également de l’utilisation de SCSS.

Pour commencer la personnalisation, examinons notre fichier styles.scss et modifions certaines variables, telles que la couleur du bouton $ primary . Importons ensuite l’analyse du bouton Matériel de la Kendo UI. Donc, avant, nous avions un bouton principal bleu, mais maintenant avec notre nouvelle variable $ primaire nous devrions pouvoir voir un bouton principal rose à la place!

 $ primary: # ff69b4;
@import "~ @ progress / kendo-theme-material / scss / button"; 

Cela a fonctionné! Continuons et changeons une autre variable, comme par exemple la première de la liste, le texte du bouton. Alors, revenons en arrière et changeons-le, et nous n'allons pas avoir envie. Nous allons simplement faire la même chose en rose:

 $ primary: # ff69b4;
$ button-text: # ff69b4;

@import "~ @ progress / kendo-theme-material / scss / button"; 

Ainsi, comme prévu, les boutons Material ont désormais un texte en rose. Cependant, je voulais mentionner en note que ces variables, comme toutes les bonnes variables, sont utilisées à plusieurs endroits. Donc, ce n'est pas seulement utilisé dans le texte du bouton, il est aussi utilisé intelligemment pour créer, par exemple, un fond sur le survol:

Si nous allons au-dessus de ces boutons et voyons leur couleur de fond hover utilise une couleur de rose légèrement plus opaque que la couleur de texte du bouton que nous venons de fournir.

Vous pouvez bien sûr modifier d'autres éléments en dehors de la liste des variables et les utiliser vous-même. Par exemple, nous avons ce joli texte rose sur nos boutons Material et nous aimerions que les mêmes boutons soient nus. Nous pouvons appeler les classes k-button et k-bare puis définir la variable de couleur à $ button-text .

 $ primaire: # ff69b4;
$ button-text: # ff69b4;

@import "~ @ progress / kendo-theme-material / scss / button";

.k-button.k-bare {
  couleur: $ button-text;
} 

Nous voyons maintenant que le texte des boutons nus a été modifié, mais en survol, il n’a pas l’air si chaud.

Nous devons simplement ajouter un appel pour : survolez également :

 ...
.k-button.k-nue, .k-button.k-nue: survol {
  couleur: $ button-text;
} 

Les thèmes de Kendo UI sont donc extrêmement flexibles et nous avons beaucoup de documentation que vous pouvez consulter pour aller plus loin. Honnêtement, c’est l’une de mes parties préférées parce que j’ai travaillé avec d’autres bibliothèques CSS qui n’étaient tout simplement pas aussi flexibles. Quelque chose à surveiller, comme nous sommes une bibliothèque CSS, nous devons parfois utiliser les balises importantes. Il est toujours agréable d’utiliser votre inspecteur pour savoir ce qui est actuellement utilisé pour styliser les éléments et quels sélecteurs vous devez utiliser pour les remplacer:

C’est exactement ainsi que je savais que nous Il faut sélectionner .k-button.k-bare pour lui donner la couleur de texte rose.

Une dernière chose que je voulais mentionner était que si nous revenions à nos styles, comme vous le voyez, nous importions uniquement les styles de bouton Matériel Kendo UI dans notre scss. Ceci est une bonne pratique au lieu d'importer tous les styles, comme ceci:

@import "~ @ progress / kendo-theme-material / scss / all";

Il vaut mieux importer uniquement les styles que vous souhaitez être utilisé dans votre application et de préférence dans des fichiers individuels pour la chose spécifique que vous allez styler. Donc, si vous personnalisez les tableaux de Kendo UI dans votre application, il est préférable de les mettre dans leur propre feuille de style.

Conseil utile: nous n’avons plus besoin des styles de thème Kendo UI répertoriés dans notre angular.json . ] depuis que nous les importons dans notre fichier scss! Vous pouvez les supprimer si vous le souhaitez. 🙂

C'est tout ce que j'ai pour vous aujourd'hui sur la personnalisation avec style et thèmes. J'espère que vous vous amusez tous. Surveillez le prochain billet de la série où nous allons faire passer notre application au niveau supérieur en créant une liste de tâches! Passez une bonne journée et codage heureux. : D

Si vous êtes nouveau dans Kendo UI pour Angular, vous pouvez en apprendre davantage ici ou simplement vous lancer dans un essai gratuit aujourd'hui.