Améliorations apportées aux thèmes d'interface utilisateur Telerik et Kendo en 2022

Les thèmes de l'interface utilisateur Telerik et Kendo s'améliorent tout au long de 2022 pour rendre les thèmes plus simples à comprendre, faciliter le processus de création d'une apparence personnalisée et faire des composants Web la base parfaite pour tout langage de conception.

Aujourd'hui, nous annonçons les changements apportés aux thèmes partagés entre les bibliothèques de composants d'interface utilisateur Web Telerik et Kendo UI. Ces mises à jour affectent les développeurs utilisant Telerik UI pour ASP.NET MVC, Telerik UI pour ASP.NET Core, Telerik UI pour Blazor, Kendo UI pour jQuery, Kendo UI pour Angular, Kendo UI pour Vue et KendoReact. Ces mises à jour affectent à la fois les thèmes basés sur Sass et LESS (pour les personnes qui les utilisent avec l'interface utilisateur Kendo pour jQuery, l'interface utilisateur Telerik pour ASP.NET MVC et l'interface utilisateur Telerik pour ASP.NET Core). Ces changements font partie d'un effort plus large visant à moderniser et à améliorer les thèmes afin de garantir que nous pouvons couvrir tous les besoins des utilisateurs aujourd'hui et à l'avenir. que des changements décisifs arrivent dans les thèmes de l'interface utilisateur Telerik et Kendo.

Continuez à lire pour obtenir les détails de quoi, pourquoi et quand autour de ces mises à jour, pour savoir quel sera l'avenir des thèmes LESS, et plus encore .

Table des matières

1. Qu'est-ce qui change ?
2. Pourquoi ces changements se produisent-ils ?
3. Comment cela va-t-il m'affecter ?
4. Quand ces changements se produisent-ils ?
5. Nouvelle documentation pour les thèmes[19659011]Thème variable CSS
6. Qu'en est-il du thème X ?

Qu'est-ce qui change ?

Pour garantir que les thèmes d'interface utilisateur Telerik et Kendo peuvent aider nos clients dans leurs efforts de développement actuels et futursnotre les équipes ont identifié comment améliorer le rendu de toutes les interfaces utilisateur Telerik et Kendo w composants eb.

Lorsque nous mentionnons le rendu, nous faisons référence au HTML et au CSS que tous ces composants rendent sur les pages Web. Pour faire court, nous les appelons souvent nos thèmes. Ce rendu est partagé entre Telerik UI pour ASP.NET MVC, Telerik UI pour ASP.NET Core, Telerik UI pour Blazor, Kendo UI pour jQuery, Kendo UI pour Angular, KendoReact et Kendo UI pour Vue. Ces mises à jour seront disponibles pour les thèmes basés sur Sass et LESS, de sorte que ces changements affectent tous nos clients dans une certaine mesure.

Le but de cet effort est de donner aux développeurs une flexibilité maximale lors de la personnalisation de l'apparence de tous nos composants vont au-delà des options de couleur et des variables disponibles que nous avons dans nos thèmes par défaut, Bootstrap, Material et autres.

Nous faisons évoluer les thèmes de l'interface utilisateur Telerik et Kendo pour prendre en charge plusieurs options courantes au niveau des composants. Cet effort consiste à examiner chaque composant d'interface utilisateur contenu dans ces bibliothèques d'interface utilisateur, ce qui signifie qu'en 2022, nous examinerons et mettrons à jour chacun des plus de 100 composants d'interface utilisateur que nous proposons.

Plus précisément, nous cherchons à étendez les options disponibles pour chaque composant en offrant de nouvelles variables qui peuvent être utilisées pour personnaliser un seul composant, ou même définies sur tous les composants de l'interface utilisateur. Ces nouvelles options sont :

• themeColor : contrôle quelle couleur du thème actuel doit être utilisée pour colorer le composant
• fillMode : détermine comment la couleur est appliquée au composant (complètement rempli, juste le contour, etc.)
• taille : contrôle la taille globale du composant en utilisant des options de taille petite, moyenne et grande
• forme : applique une forme spécifique au composant, qui peut inclure des options de forme comme carré, arrondi, etc.
• arrondi : contrôle le rayon de bordure du composant en utilisant des paramètres petits, moyens ou grands

Ces options sont déployées avec la version R1 2022 de l'interface utilisateur Telerik pour ASP.NET Core, UI pour ASP.NET MVC, Telerik UI pour Blazor (v3.0.0), Kendo UI pour jQuery, Kendo UI pour Angular, Kendo UI pour Vue et KendoReact. Ces options apporteront de nouvelles et puissantes façons de personnaliser et de contrôler ces thèmes Sass. Cependant, les utilisateurs doivent être conscients que ces mises à jour peuvent apporter des modifications au rendu, à la fois dans le balisage et dans les classes CSS utilisées, au sein des composants qui reçoivent cette modification et que ces modifications peuvent être considérées comme des modifications de rupture selon la façon dont vous utilisez les fichiers disponibles. thèmes.

En plus de ces options énumérées ci-dessus, de nombreux composants recevront plus d'états prêts à l'emploi et de mises à jour de couleurs, offrant plus d'options visuelles pour les développeurs prêts à l'emploi.

Pour vous donner un exemple, voici à quoi ressemblent les boutons de l'interface utilisateur de Kendo aujourd'hui :

Et voici ce qui sera disponible pour tous Composants Telerik et Kendo UI Button avec la version R1 2022 :

Le mos Les changements apparents que nous pouvons voir ci-dessus sont bien sûr la disponibilité de plus de couleurs prêtes à l'emploi avec les boutons. À partir de là, les développeurs et les concepteurs peuvent utiliser les nouvelles options disponibles pour décider si les boutons doivent être remplis (comme ci-dessus) ou simplement un contour, le rembourrage interne et la taille globale peuvent être contrôlés, et des aspects tels que les coins arrondis peuvent également être gérés tout au long ces propriétés.

Au-delà de ces modifications dans tous les thèmes Kendo UI, le thème Kendo UI Default supprimera les largeurs par défaut des composants basés sur des formulaires . Tous les composants basés sur des formulaires (entrées, sélecteurs, listes déroulantes, etc.) auront désormais une largeur de 100 %. Cela signifie que les gens devront soit mettre à jour et spécifier la largeur dans la configuration du composant, soit fournir une largeur dans l'élément parent.

Si vous êtes un utilisateur de Telerik ou Kendo UI qui utilise simplement l'un de nos thèmes tel quel box, vous remarquerez peut-être de légères modifications à l'apparence des composants, qui peuvent passer inaperçues à moins que vous ne procédiez à des tests de régression visuels. assurez-vous que vos modifications persistent ou comprenez comment modifier les nouveaux thèmes pour appliquer les personnalisations que vous avez effectuées dans le passé.

Pour des raisons de mise à jour ou de migration vers R1 2022, ou v5 du package nos thèmes, et au-delà, nous recommandons à nos utilisateurs de traiter cette version comme une version avec des modifications importantes et d'ajouter du temps supplémentaire pendant la mise à niveau pour assurer une migration en douceur.

Pourquoi ces modifications se produisent-elles ?

Comme nous avons continué à le fairefaire évoluer les bibliothèques de composants d'interface utilisateur que nous proposons dans les bibliothèques et les frameworks populaires tels que jQuery, Angular, React, Vue, ASP.NET MVC, ASP.NET Core et Blazor, la façon dont les développeurs et leurs équipes de conception travaillent ensemble a également changé.

A La tendance claire qui a émergé au cours des deux dernières années est la création et l'adoption de langages de conception. Avec cette tendance, nous avons vu beaucoup de nos clients abandonner la simple utilisation des thèmes d'interface utilisateur Telerik et Kendo prêts à l'emploi et les personnaliser pour créer un aspect et une sensation complètement uniques qui correspondent aux conceptions d'entreprise qui sont mises en œuvre.[19659003]Ce changement a également conduit à des tonnes de commentaires de nos clients en termes de moyens d'améliorer la capacité de personnaliser les composants de l'interface utilisateur Telerik et Kendo. Au-delà de la simple offre de la fonctionnalité de modèle des composants, l'apparence réelle de nos thèmes Sass et de nos classes CSS devrait également être quelque chose que les développeurs peuvent facilement modifier. Cependant, dans leur état actuel, les composants ne sont pas aussi faciles à utiliser que de nombreux développeurs le souhaiteraient.

Cet effort signifie que notre équipe examine et met à jour la liste complète des composants de l'interface utilisateur Web qui nous proposons dans notre interface utilisateur Telerik pour les produits ASP.NET MVC, ASP.NET Core et Blazor ainsi que les produits Kendo UI pour jQuery, Angular, React et Vue. Cela fournira des options supplémentaires pour personnaliser chaque composant au niveau composant par composant ou à une échelle «globale» pour tous les composants. En fin de compte, notre objectif est de fournir un niveau de personnalisation qui rendra les composants de l'interface utilisateur de Kendo beaucoup plus faciles à modifier pour s'adapter à toutes les exigences de conception, en particulier pour les personnes mettant en œuvre des systèmes de conception.

Alors que nous rendons nos composants d'interface utilisateur Web plus faciles à personnaliser, il sont également d'autres avantages qui découlent de ces options de composants. L'inclusion de ces options supplémentaires pour chaque composant de l'interface utilisateur supprime une partie du besoin d'attendre qu'un nouveau thème soit créé par les équipes d'interface utilisateur Telerik et Kendo.

Par exemple, nous savons que plusieurs de nos clients doivent contrôler les informations. densité au sein de leurs applications (combien d'informations sont affichées à l'écran à la fois). Certaines exigences peuvent nécessiter l'affichage d'autant de données que possible, en utilisant moins d'espaces blancs et de remplissage que les langages de conception comme l'offre Material Design. Certains peuvent connaître cela comme un « thème compact ». Avec les thèmes traditionnels, cela reviendrait à attendre un nouveau thème dédié. Avec les nouvelles options de rendu, cela peut être réalisé en utilisant l'option size mentionnée ci-dessus sur une base composant par composant ou en la définissant globalement pour que tous les composants adhèrent à la même taille.

De même. , proposer des options arrondies ou carrées d'un thème ne nécessite plus l'introduction d'un nouveau thème ; Les développeurs peuvent saisir l'un des thèmes par défaut, Bootstrap ou Material et appliquer l'option arrondie ou carrée pour les composants applicables.

Un autre aspect de ces mises à jour est que les thèmes seront beaucoup plus simples à utiliser et à personnaliser. Le retour actuel que nous entendons des développeurs et des concepteurs utilisant nos composants Web Kendo UI et Telerik UI est que la compréhension et le développement ultérieur avec les thèmes peuvent être assez complexes et fastidieux. Nous pensons que tout cet effort rendra le travail avec les thèmes beaucoup plus facile qu'aujourd'hui, à la fois pour les concepteurs utilisant les kits Telerik et Kendo UI Figma et pour les développeurs mettant en œuvre des personnalisations et des modifications de thème.

Comment cela m'affectera-t-il ?[19659014] La réponse courte est que ces changements sont des changements de rupture, ce qui signifie que vous serez très probablement affecté d'une manière ou d'une autre . La manière dont vous êtes affecté dépend de la façon dont vous avez utilisé les thèmes Telerik et Kendo UI jusqu'à présent. J'ai essayé de résumer, à un niveau élevé, comment cela peut affecter les utilisateurs.

Un élément commun à chaque scénario ci-dessous est, si votre équipe met en place des tests de régression visuels (automatisés ou manuels), vous le ferez le plus voir probablement certains changements signalés. Bien que les thèmes restent pour la plupart les mêmes en termes d'apparence et de convivialité, avec toutes les nouvelles options disponibles, il peut y avoir certains paramètres par défaut qui doivent être modifiés pour obtenir le même aspect et la même convivialité auxquels votre équipe est habituée.[19659047]Utilisation de thèmes sans personnalisation

Si votre équipe a simplement pris l'un des thèmes disponibles sur étagère et n'a fait aucun ajustement, l'impact sera très probablement minime. Alors que nous introduisons de nouvelles options et de nouveaux états comme ceux mis en évidence dans le composant Button ci-dessus, au cœur les thèmes auront toujours la même apparence.

Certains changements peuvent se produire lorsque vous mettez à jour les références à la dernière version. de l'un de nos thèmes donnés, mais ces changements peuvent être modifiés avec l'une des options que nous avons mentionnées jusqu'à présent afin d'atteindre un comportement souhaitable.

Utiliser des thèmes avec de légères modifications

De légères modifications peuvent être effectuées en quelques manières, mais les approches les plus populaires incluent :

• Utiliser une variable Sass ou plusieurs variables pour contrôler une ou plusieurs propriétés
• Remplacer les classes CSS
• Personnaliser les fichiers CSS générés ou les fichiers LESS/Sass sous-jacents

Non peu importe ce que vous et votre équipe avez pu utiliser ci-dessus, les options de rendu introduiront des changements de rupture qui devraient être examinés avant chaque mise à niveau vers R1 2022 et au-delà.

Pour les personnes utilisant des variables vers d o modifications, il y aura de nouvelles variables disponibles à utiliser, et certaines des "anciennes" variables peuvent avoir besoin d'utiliser des variables nouvelles et supplémentaires pour aider à obtenir le même aspect et la même sensation. En fin de compte, nous essayons de rationaliser et de simplifier la personnalisation avec nos variables, notamment en réduisant le nombre total de variables disponibles, de sorte que certaines variables peuvent ne plus exister dans la nouvelle version de nos thèmes.

Pour le groupe qui a remplacé les classes CSS. , vous devrez vérifier si exactement les mêmes classes CSS sont utilisées et si la combinaison de classes CSS que vous remplacez actuellement accomplit la même chose qu'elle a accompli à l'origine. Au fur et à mesure que nous parcourons et rationalisons nos thèmes, nous essayons également d'améliorer la structure de classe CSS qui existe dans chacun de nos composants d'interface utilisateur, de sorte que les classes précédemment utilisées peuvent ne pas être utilisées de la même manière.

Pour les personnes qui ont suivi le cours. plonger dans la modification directe des fichiers CSS, Sass ou LESS des thèmes Telerik et Kendo UI, il y aura des changements à la fois dans le rendu des composants ainsi que dans les lignes de code réelles dans ces fichiers. Ainsi, vous devrez à la fois référencer tous les nouveaux changements qui seront déployés avec chaque version et vous devrez vous familiariser avec le code source de chacun de nos thèmes.

Une note pour ce dernier groupe : un autre aspect de les changements dont nous discutons dans cet article de blog visent à réduire le besoin de faire ces types de modifications, nous espérons donc que beaucoup d'entre vous pourront passer à l'utilisation de nos variables exposées pour rendre les mêmes personnalisations beaucoup plus faciles à maintenir et à être plus robuste dans les futures mises à jour pour éviter d'avoir à copier et coller des modifications dans le code source à chaque mise à jour. vous et votre équipe devez faire attention. Il existe plusieurs façons de « personnaliser fortement » les thèmes existants que nous proposons, il sera donc difficile de donner des conseils spécifiques dans cet article de blog. Cependant, si vous vous trouvez dans ce groupe, vous devrez prêter attention aux notes de version tout au long de cette année. Cependant, il sera essentiel de prévoir plus de temps pour tenir compte de ces changements lors de la mise à jour de vos références d'interface utilisateur Telerik et/ou Kendo. à un thème dans ce nouveau format. Nous savons que cela peut créer un travail important pour certaines équipes avec chaque version tout au long de l'année, nos équipes de support et de développement sont donc disponibles pour vous aider avec toutes les mises à jour que vous et votre équipe devez faire.

Quand ces changements se produisent-ils (chronologie) ?

Étant donné que l'ensemble total de composants d'interface utilisateur qui est couvert par nos thèmes Sass s'étend sur plus de 100 composants, cet effort n'est pas quelque chose qui peut être fait dans une seule version. Au lieu de cela, nous prévoyons de répartir ce travail sur plusieurs versions en 2022, et potentiellement en 2023, pour parcourir et mettre à jour tous les composants disponibles.

R1 2022

Le début de cet effort démarre en janvier 2022 avec R1 2022qui contiendra les mises à jour des composants suivants :

Buttons and Inputs

Button, Switch, Checkbox, Radio Button, TextBox, MaskedTextBox, NumericTextBox, TextArea, Menu Button, SplitButton, DateInput, Puce.

Pickers

DatePicker, TimePicker, DateTimePicker, ColorPicker.

Drop Downs

MultiSelect, AutoComplete, DropDownList, ComboBox, MultiColumnComboBox, DropDownTree.

De futures versions supplémentaires seront abordées avec22 Voici une feuille de route approximative sur les composants qui seront couverts dans quelles versions. Gardez à l'esprit que les choses peuvent changer ici car notre feuille de route s'ajuste en fonction des commentaires des clients, mais cela devrait toujours servir de plan approximatif pour le moment où certains composants seront ciblés.

R2 2022

AppBar, BottomNavigation, Badge, Notification , Tooltip, Loader, Toolbar, Window, Dialog, TabStrip, PanelBar, ExpansionPanel, Upload.

R3 2022

Nous essaierons de couvrir les composants restants, y compris l'éditeur, le planificateur, Pflieger et plus encore !

Nouvelle documentation pour les thèmes

Une autre partie passionnante de cet effort est l'introduction de la nouvelle documentation de thème que nous déploierons pendant le développement de ces options communes pour chaque composant.

Lors de la création et de la documentation des composants de l'interface utilisateur, la ressource la plus courante qui peut être trouvé est l'API JavaScript ou C# que les composants offrent – c'est ainsi que nous obtenons les composants pour s'afficher sur la page après tout. Cependant, un autre aspect de la pièce de composant de l'interface utilisateur est leur apparence, c'est là qu'intervient CSS. C'est un aspect des composants Web Telerik et Kendo UI qui manquait jusqu'à présent, les variables Sass étant documentées dans une capacité limitée. tout au long de notre documentation.

L'objectif de cet effort de documentation est d'aller au-delà des variables Sass que nous avons déjà disponibles dans notre documentation existante et de donner aux développeurs frontaux les informations et les outils nécessaires pour que l'un de nos composants d'interface utilisateur s'intègre dans leurs conceptions. Cette ressource sera un document vivant qui sera mis à jour tout comme notre autre documentation au fur et à mesure que nous continuons à ajouter des fonctionnalités et des composants.

Bien que je n'aie pas de lien direct aujourd'hui, vous pourrez voir l'évolution. de cette documentation à partir de R1 2022 et tout au long du reste de 2022 et au-delà. effort est le nouveau thème Nouvelle, qui est basé sur les propriétés personnalisées CSS, également connues sous le nom de variables CSS. Ces propriétés sont très intéressantes car elles constituent une solution prête à l'emploi pour CSS afin d'éviter complètement le besoin de préprocesseurs CSS comme LESS et Sass.

Le thème Nouvelle est actuellement en version bêta et nous l'acceptons avec empressement. commentaires de la part de développeurs susceptibles d'être intéressés par l'utilisation de variables CSS pour styliser leurs composants. Nous augmentons lentement le nombre de composants pris en charge, mais pour l'instant, ce thème couvre les composants « de base » tels que les boutons, les listes déroulantes et les entrées. Pour plus d'informations sur le thème Nouvelle, vous pouvez vous référer aux articles de documentation que nous avons sur le thème, comme celui-ci pour React.

Et le Thème X ?

Pour ceux d'entre vous qui recherchent thèmes supplémentaires à ajouter à la liste des thèmes qui existent déjà hors de la boîte (par exemple, Default, Bootstrap et Material), il y a aussi de bonnes nouvelles ici ! Bien que nous n'ayons pas de nouveau thème à annoncer aujourd'hui, tout cet effort met en place notre architecture de thème pour nous aider à créer de nouveaux thèmes dans un délai plus court à l'avenir.

J'ai déjà mentionné cela, mais pour les gens qui ont été demander un thème compact, cela peut être accompli avec les nouvelles options de dimensionnement que j'ai mentionnées plus tôt, donc, une fois que nous avons parcouru tous nos composants Web, il suffit d'utiliser les options de dimensionnement disponibles ou de personnaliser les options de dimensionnement pour les personnaliser vous permettra transformez n'importe lequel de nos thèmes existants pour créer une version compacte !

Notre espoir est qu'avec ces changements, nous pourrons non seulement aider nos clients à créer des langages de conception à l'aide de l'interface utilisateur Kendo et des composants Web Telerik, mais nous devrions également ouvrir la voie pour l'introduction de nouveaux thèmes sur la route.