Frameworks d’interface utilisateur de thème dans la partie angulaire 3: Kendo UI, thèmebuilder

S’appuyant sur nos deux parties précédentes, nous continuons notre série sur le thèse angulaire – cette fois avec Kendo UI pour Angular et Themebuilder.

Dans nos articles précédents, nous avons exploré le thème personnalisé avec du sass et des matériaux angulaires dans une application angulaire existante. Pendant ce voyage, nous Construit un thème à partir de zéro à l’aide de Sass avec des variables et des mixins. Ensuite, nous avons fait un pas en avant par se déplaçant vers des matériaux angulairesqui nous a apporté un ensemble de composants et de mixins de thème pour personnaliser et adapter notre thème poney.

Mais, tout en utilisant des matériaux angulaires, je sentais qu’il nécessitait beaucoup de travail manuel. Chaque fois que j’avais besoin de tester une nouvelle couleur, j’ai dû modifier le code, recompiler et le vérifier manuellement. N’oubliez pas non plus que la création des palettes nécessitait des étapes manuelles pour définir les palettes, configurer des variables SASS et remplacer les styles. Tout changement nécessitait de reconstruire l’application, ce qui rend notre expérience difficile à maintenir et non la meilleure expérience de développeur.

💡 Mais que se passe-t-il si nous pouvions obtenir le même résultat avec moins d’efforts?

Avec progrès Kendo ui pour angulaire et Thème Les deux travaillant ensemble, nous pouvons personnaliser nos applications rapidement et sans douleur!

Pourquoi choisir Kendo UI pour le thème?

Kendo UI pour Angular est livré avec une énorme liste de composants accessibles, prêts à l’emploi, avec de nombreux éléments d’interface utilisateur. Et, en travaillant en combinaison avec themebuilder, nous pouvons personnaliser n’importe quel composant d’interface utilisateur Kendo avec un aperçu en direct, gagner du temps et des efforts.

L’une des choses incroyables que j’ai trouvées à propos de l’interface utilisateur de Kendo est son soutien à l’entreprise avec des réponses rapides d’experts dévoués, une documentation approfondie et des guides avec des exemples pratiques.

Alors que le matériau angulaire nous a donné beaucoup de flexibilité, il a nécessité une configuration et des reconstructions manuelles manuelles. Kendo UI et Themebuilder rationalisent ce processus magnifiquement, et viennent avec plusieurs ressources utiles, telles que:

Je pense que nous voulons personnaliser, alors passons à Kendo UI!

Déménager à Kendo UI

Tout d’abord, clonez notre projet existant monde des poneys pointant notre branche move-to-kendo-ui-startsur cette branche, nous allons apporter nos modifications.

git clone --branch move-to-kendo-ui-start --single-branch  https://github.com/danywalls/ponies-world.git

Ensuite, installez Kendo UI pour Angular en utilisant un schéma. Au lieu d’installer tous les composants comme dans le matériau angulaire, nous n’avons besoin que du package de boutons. Exécuter la commande ng add @progress/kendo-angular-buttons dans le terminal. Progress Kendo UI fournit un schéma pour chaque composant, ce qui nous aide à créer des applications lumineuses, car nous n’avons qu’à installer les composants que notre application utilise réellement.

Après avoir répondu oui, il installe automatiquement les styles et les thèmes mondiaux de l’interface utilisateur de Kendo et enregistre automatiquement les styles globaux. Une fois cela terminé, nous sommes prêts à commencer à utiliser le Nice Composant des boutons angulaires avec KendoButton Directive dans notre application!

Kendobutton est une directive incroyable qui nous accorde beaucoup de pouvoir pour travailler avec des boutons et les adapter à notre application. Nous pouvons définir des propriétés pour nos boutons comme les animations primaires, les belles animations, le thème et plus encore.

Passons au code. Tout d’abord, ouvert pony-button.component.ts et importer le KENDO_BUTTONDans la section des importations. Mmmm… Je pense qu’il est temps d’améliorer notre code. Retirer darkMode et themeClassPropriétés du signal d’entrée, car en utilisant la puissance de Kendobutton, nous pouvons simplifier cela.

Importer le KENDO_BUTTON et ButtonThemeColor depuis @progress/kendo-angular-buttons. Ajouter le KENDO_BUTTON à la section des importations pour avoir accès au kendoButton directive dans le modèle. Déclarer un nouveau thème de propriété d’entrée de type ButtonThemeColor Pour faire en sorte que l’entrée accepte uniquement les couleurs du bouton de thème valides.

Le code final ressemble à ceci:

import {Component, input} from '@angular/core';
import {ButtonThemeColor, KENDO_BUTTON} from '@progress/kendo-angular-buttons';
@Component({
  selector: 'app-pony-button',
  imports: [KENDO_BUTTON],
  templateUrl: './pony-button.component.html',
  styleUrl: './pony-button.component.scss',
})
export class PonyButtonComponent {
  label = input<string>('Accept');
  theme = input<ButtonThemeColor>('base');
}

Notre prochaine étape consiste à mettre à jour le modèle. Ouvrir pony-button.component.htmlajouter le kendoButton Directive au bouton et lier themeColor avec theme propriété.

Le code final ressemble:

<button kendoButton [themeColor]="theme()"  >
 {{label()}}
</button>

Maintenant, il est temps de faire de petits changements dans le app.component.html en définissant le thème de la propriété et en ajoutant d’autres exemples, comme un app-pony-button avec le thème primaire, par défaut et sombre. N’hésitez pas à copier le balisage suivant dans le app.component.html:

<div class="welcome"> 
<h1>Welcome to Pony</h1>
 <p>It is the amazing pony world, where you can dance and draw!</p>
 <div class="welcome__actions">
   <app-pony-button label="Login" theme="primary" />
   <app-pony-button label="Continue" />
   <app-pony-button label="Darkness 🦇" [theme]="'dark'"></app-pony-button>
 </div>
</div>

Enregistrer les modifications et voir notre application en exécutant ng serve et naviguer vers http: // localhost: 4200et nous obtenons:

Mmm… ça marche. Nous avons l’apparence du primaire, par défaut et sombre, mais nous manquons les couleurs du thème de Pony. Maintenant, au lieu d’écrire des sass, de charger des mixins, de générer une palette et de recharger pour tester les couleurs, nous allons utiliser le puissant themebuilder !!!

Il a l’air plus facile que le matériau angulaire, qui nécessitait une configuration manuelle et une configuration de thème. 😁

Passons à themebuilder !!!

Temps de thème Builder!

Tout d’abord, parlons de themebuilder. C’est le moyen le plus simple de personnaliser les composants de l’interface utilisateur de Kendo. Peu importe si nous avons une petite ou une grande application; Themebuilder facilite la réalisation de nos modifications ou travaillez avec des concepteurs. Et cela fonctionne bien avec Figma!

Themebuilder est livré avec des plans gratuits et flexibles; Vous pouvez choisir en fonction de ce dont votre entreprise a besoin (et peut mettre à jour à tout moment). Et il est livré avec une documentation utile, des cours et un grand soutien. Si vous voulez en savoir plus, je vous recommande fortement de consulter Vidéos youtube. Mais pour l’instant, commençons à l’utiliser!

Dans votre navigateur, allez à https://themebuilder.telerik.com/. Parce que nous utilisons Kendo UI pour Angular, choisissez Telerik & Kendo UI.

Créez un compte gratuit pour conserver votre projet, enregistrez-le dans le cloud et utilisez themebuilder.

Vous n’avez pas besoin d’une carte de crédit! Je l’aime! N’hésitez pas à créer votre compte en sachant que c’est vraiment gratuit.

Après cela, nous sommes prêts à créer notre projet. Cliquez sur le bouton Créer du projet.

Ici, nous avons beaucoup de saveurs comme la valeur par défaut, le bootstrap, le style d’interface utilisateur Kendo Classic et Classic! 😁 Choisissez ce que vous voulez. Dans mon cas, j’ai choisi couramment.

Après cela, nous avons la possibilité de changer un beaucoup de composants. Mais, dans notre cas, nous n’avons qu’à personnaliser le bouton, alors cliquez dans le filtre et sélectionnez le bouton.

Ensuite, pour personnaliser les styles, dans chaque section, nous devons modifier les variables --kendo-color-base, --kendo-color-primary et --kendo-color-dark pour correspondre à nos couleurs de poney. Après chaque changement, nous pouvons voir un aperçu de leur apparence instantanément.

Nous aurons une configuration comme ceci:

FAIT!! Oui, nous avons déjà apporté nos modifications! Nous avons seulement besoin d’exporter des variables CSS, alors cliquez sur le bouton Exporter tout.

Parfait! Nous avons notre thème personnalisé Kendo UI. Il est temps de déplacer notre thème à Angular!

Utiliser notre thème avec Angular

C’est la dernière étape! Nous avons notre thème téléchargé dans un fichier zip, nous devons donc extraire les fichiers. Il fournit deux versions, SASS et CSS. Accédez au répertoire DIST et CSS pour copier le fichier pony.css.

Ensuite, nous copie le pony.css dans le projet au même niveau que le fichier Styles.scss.

Enfin, nous devons dire à Angular de ramasser notre pony.css. Ouvrez le fichier angular.json, qui nous aide avec l’administration et configure les projets de construction, de service, de test et de localisation.

Ouvrez Angular.json et déplacez-vous vers l’architecte de la section> Build> Options. Concentrez-vous sur les styles et les scripts pour ajouter nos styles et CSS.

Après cela, arrêtez la CLI angulaire et exécutez-la à nouveau pour appliquer la nouvelle configuration. Ensuite, allez à http: // localhost: 4200 Et tada! Nous avons nos couleurs de poney dans les boutons de l’interface utilisateur de Kendo !!!

Encore une chose!

C’est bien que nous ayons les boutons prêts avec les couleurs roses, mais que se passe-t-il si j’ai besoin d’un autre composant d’interface utilisateur Kendo, comme un chargeur?

Essayons avec kendo-loader. Tout d’abord, ouvrez le terminal et installez-le en exécutant la commande suivante:

ng add @progress/kendo-angular-indicators

Ouvrir le app.component.tsimporte le KENDO_INDICATORS depuis @progress/kendo-angular-indicatorset ajoutez-le à la section Imports dans l’appos.T.TS pour avoir accès au composant Kendo-chargeur.

Enfin, ouvert app.component.htmlajouter le kendo-loader composant et définir la propriété size à grand.

Le code ressemble à ceci:

<div class="welcome">
 <h1>Welcome to Pony</h1>
 <p>It is the amazing pony world, where you can dance and draw!</p>

 <div class="welcome__actions">

   <app-pony-button label="Login" theme="primary" />
   <app-pony-button label="Continue" />
   <app-pony-button label="Darkness 🦇" [theme]="'dark'"></app-pony-button>
 </div>
</div>

Après avoir enregistré les modifications, le chargeur affiche désormais également les couleurs de poney. Cela signifie que tous les composants de l’interface utilisateur de Kendo sont désormais facilement stylisés pour correspondre à notre conception!

Résumer

Ce voyage était tellement amusant. Nous avons commencé à thème nos applications angulaires en utilisant Just Sass. Plus tard, nous avons déménagé dans le matériel, bénéficiant de certains avantages mais en faisant des points de douleur qui nous ont fait passer à une alternative meilleure et puissante de l’interface utilisateur de Kendo pour Angular avec themebuilder. Nous avons appris à travailler avec Kendo UI et Themebuilder pour un thème plus rapide et sans effort et personnalisé et appliqué nos couleurs personnalisées en quelques clics.

ThemeBuilder nous permet de modifier les variables CSS avec des aperçus en temps réel, afin que nous puissions tester les modifications avant de les appliquer, ce qui rend notre développement rapide. Et, bien sûr, nous pouvons apprendre rapidement avec l’excellente documentation, et si nous en avons besoin de plus, il a un support d’entreprise avec une équipe de soutien dédiée pour des réponses rapides et des conseils d’experts.

N’oubliez pas que vous pouvez apprendre le thème étape par étape avec ce cours gratuit sur YouTube. 👉 Regardez maintenant

Code source: https://github.com/danywalls/ponies-world/tree/move-to-kendo-ui

Maintenant que notre interface utilisateur est entièrement sur le thème et l’évolution, nous avons le temps de travailler avec d’autres points importants pour notre application comme l’accessibilité. Pas de soucis!! Kendo UI est prêt avec accessibilité! Alors, prenez le temps de regarder des jeux NBA ou Netflix. 😉

Et n’oubliez pas que vous pouvez Essayez Kendo UI pour Angular gratuitement (pour de vrai!).