Quoi de neuf dans l'interface utilisateur de Kendo pour jQuery avec R1 2022

La version R1 2022 de Kendo UI pour jQuery apporte le nouveau PivotGrid amélioré, une multitude de nouvelles fonctionnalités et de thèmes mis à jour.

La version R1 2022 de Kendo UI pour jQuery est enfin là et prête à démarrer la nouvelle année à la vitesse supérieure ! Cette version apporte un nouveau composant PivotGrid mis à jour, davantage d'actifs d'interface utilisateur Figma et des tonnes de fonctionnalités dans les composants existants. Continuez à lire pour voir tout ce qui est nouveau avec R1 2022 dans l'interface utilisateur de Kendo pour jQuery. pour Figma"/>

L'année dernière, nous avons officiellement présenté les kits d'interface utilisateur Telerik et Kendo pour Figma. Nous avons créé ces ressources Figma afin d'aider à améliorer la collaboration entre les concepteurs et les développeurs utilisant l'interface utilisateur de Kendo. Initialement nous n'avons publié qu'un petit groupe de composants d'interface utilisateur, mais nous avons régulièrement ajouté de nouveaux composants d'interface utilisateur tout au long de l'année dernière. composants avec une seule exception : les graphiques. >

Basé sur les retours de nos clients omers, ainsi que la tendance continue de l'industrie autour de la création de langages de conception, nous avons lancé un processus pour faire évoluer les thèmes de l'interface utilisateur de Kendo pour qu'ils soient plus flexibles, plus simples à comprendre et à utiliser, ainsi que pour rendre la personnalisation des composants de l'interface utilisateur de Kendo aussi simple que possible.

Grâce à cet effort, nous revisitons tous les composants de l'interface utilisateur de Kendo à travers les thèmes Default, Bootstrap et Material. Nous introduisons des options communes qui peuvent être définies pour l'ensemble de votre application ou définies à un niveau plus granulaire en personnalisant des composants individuels. , DateInputs et DropDowns pour offrir les options de rendu de thème suivantes :

• themeColor
• fillMode
• size
• shape
• rounded[19659] faire ici est que ces mises à jour incluront des changements de rupture à l'aspect visuel de l'interface utilisateur de Kendo pour Angular. Pour toute personne personnalisant nos composants ou effectuant des tests de régression visuelle, nous recommandons de prendre un peu plus de temps pour examiner ces modifications.

  Des mises à jour visuelles plus importantes comme celles-ci peuvent avoir des implications sous la forme de régressions visuelles qui peuvent apparaître lors de la mise à niveau d'une ancienne version vers R1. 2022. Bien que nous pensions avoir détecté et résolu de nombreux problèmes de régression visuelle lors de la préparation de la R1 2022, il se peut que d'autres problèmes soient découverts après la publication. Nous nous engageons fermement à résoudre ces problèmes le plus rapidement possible et continuerons à publier des mises à jour avec des correctifs pour nos thèmes et composants après la sortie de R1 2022.

  Pour fournir plus d'informations sur ces changements et notre plan général autour de l'interface utilisateur de Kendo thèmes, nous avons récemment publié Améliorations à venir pour les thèmes d'interface utilisateur Telerik et Kendo en 2022.

  Nouveaux composants jQuery

  Nouveau composant : jQuery PivotGrid (v2)

  

  La première grande annonce pour les développeurs jQuery avec R1 2022 est le nouveau composant jQuery PivotGrid amélioré !

  Vous pourriez être surpris de voir cela répertorié comme un nouveau composant puisque l'interface utilisateur de Kendo pour jQuery a un PivotGrid depuis de nombreuses années. Je le mentionne ici car il s'agit d'un tout nouveau composant PivotGrid, écrit à partir de zéro.Ce n'est pas seulement une mise à jour -c'est un tout nouveau c composant !

  Au fil des ans, nous avons reçu une tonne de commentaires concernant des aspects du composant PivotGrid, y compris de nouvelles fonctionnalités et des améliorations de l'expérience utilisateur. Bien que nous ayons pu aborder bon nombre de ces éléments, nous nous sommes rendu compte que le moteur sous-jacent et notre approche de la création d'un composant PivotGrid pouvaient être considérablement améliorés. Après plusieurs séries de recherches, preuves de concepts et commentaires, nous avons conclu qu'un nouveau composant PivotGrid était la meilleure voie à suivre.

  Si vous utilisez le jQuery PivotGrid existant, vous n'avez pas à vous inquiéter, nous n'avons pas supprimé le "ancien" PivotGrid, et les deux composants peuvent vivre côte à côte. Le nouveau composant et son espace de noms, PivotGridv2permettent aux développeurs de prendre leur temps pour migrer les utilisations existantes du PivotGrid ou de les combiner en fonction des besoins. Au moment où ce billet de blog est publié, PivotGridv2 a moins de fonctionnalités et moins de fonctionnalités que le PivotGrid d'origine. Cependant, nous travaillerons sur l'ajout de fonctionnalités et de fonctionnalités pour correspondre, et plus tard dépasser, l'ensemble actuel de fonctionnalités de PivotGrid avec v2. .

  Nouveau composant : jQuery Avatar

  

  La nouvelle UI Kendo pour jQuery Avatar Component a également été introduit avec la version R1 2022 ! Ce nouveau composant est parfait pour afficher un composant d'interface utilisateur pour représenter un individu ou une entité dans vos applications Web construites avec jQuery. Le composant peut afficher des images, des icônes ou des initiales pour représenter quelqu'un et dispose de plusieurs options de configuration comme options de rendu pour configurer si le composant jQuery Avatar doit être de forme arrondie, circulaire ou carrée. d Fonctionnalités des composants

  exemple d'application de tableau de bord d'administration jQuery

  

  de nouveaux exemples d'applications sont toujours amusants à partager, et avec R1 2022, nous introduisons l'exemple d'application "Admin Dashboard" entièrement construit avec Kendo UI pour jQuery ! Cet exemple d'application suit la même conception et la même architecture d'application que les modèles de tableau de bord d'administration populaires que vous utilisez peut-être déjà aujourd'hui. Nous savons que beaucoup de nos utilisateurs créent des tableaux de bord similaires au quotidien, nous espérons donc que cet exemple d'application vous aidera à démarrer votre prochain projet.

  Découvrez le nouvel exemple d'application de tableau de bord d'administration ici.

  Tous les graphiques jQuery : couleurs et conception mises à jour

  

  Une autre annonce pour R1 2022 liée à la mise à jour de tous nos thèmes est que la bibliothèque jQuery Charts arbore maintenant un nouvel ensemble de couleurs par défaut prêtes à l'emploi. Pour ceux qui ne sont pas familiers, ces couleurs par défaut sont utilisées lorsqu'aucune couleur de série n'est définie et qu'elles étaient auparavant un peu limitées en nombre, ce qui obligeait à réutiliser les couleurs lorsqu'un grand nombre de séries ont été ajoutées. Avec cette dernière mise à jour, le jeu de couleurs par défaut a non seulement été mis à jour pour donner au jQuery Chart une sensation plus moderne et maintenir la conception en ligne avec le thème de l'interface utilisateur Kendo qui est utilisé, mais il y a aussi plus couleurs disponibles, ce qui évitera d'avoir des couleurs réutilisées lorsqu'un grand nombre de séries sont rendues à la fois.

  Pour ceux qui ont besoin de conserver les anciennes couleurs comme couleur par défaut des graphiques jQuery, nous avons ceci de la section de documentation Thèmes v4" dans nos documents jQuery.

  Pour voir toutes les nouvelles couleurs de vos propres yeux, voici un lien rapide vers l'interface utilisateur Kendo pour jQuery Charts qui affiche les nouvelles couleurs par défaut.

  Tous Graphiques jQuery : panoramique et zoom améliorés

  

  Le panoramique et le zoom font tous deux partie de l'interface utilisateur de Kendo pour les graphiques jQuery depuis un certain temps déjà, mais avec R1 2022 nous avons amélioré cette fonctionnalité ! Plus précisément, avec cette mise à jour, le zoom est désormais cohérent lors d'un zoom avant et arrière à l'aide de la molette de la souris. jQuery Grid : Tri multi-colonnes via CTRL + Clic

  

  Une amélioration de la qualité de vie pour l'interface utilisateur de Kendo pour jQuery Grid que nous avons ajoutée avec R1 2022 est la possibilité d'utiliser le tri sur plusieurs colonnes à l'aide de l'interaction CTRL + Clic. Il s'agit d'un comportement facultatif qui permet aux utilisateurs finaux de trier sur une seule colonne lors de l'utilisation d'un clic de souris régulier et ne triez plusieurs colonnes que lorsque vous maintenez le bouton CTRL enfoncé et que vous cliquez sur des en-têtes de colonne supplémentaires. Plus tard, lorsque vous cliquez sur un en-tête de colonne sans maintenir le bouton CTRL enfoncé, la grille reviendra au tri par une seule colonne.

  Pour voir ce nouveau comportement dans action, voici le jQuery Grid component tri multi-colonnes dem o.

  jQuery Grid : glisser-déposer amélioré

  

  L'interface utilisateur de Kendo pour jQuery Grid prend en charge le glisser-déposer depuis quelques années maintenant, mais il y a toujours quelque chose à améliorer ! Avec cette nouvelle fonctionnalité de glisser-déposer mise à jour, jQuery Grid affiche une expérience utilisateur plus intuitive pour sélectionner, faire glisser et placer des lignes dans la grille. Ces indicateurs améliorés devraient permettre aux utilisateurs finaux de voir exactement quelles lignes sont glissées et où dans le reste des éléments de données de la grille ils sont sur le point d'être placés. Démonstrations de jQuery Grid.

  Éditeur jQuery : prise en charge de l'annulation et de la restauration

  

  Avec R1 2021, l'interface utilisateur de Kendo pour jQuery Editor offre désormais aux utilisateurs la possibilité d'annuler ou de rétablir les modifications apportées au contenu du composant Editor. Auparavant, cela n'était géré que par le navigateur et sa fonctionnalité intégrée pour mémoriser le contenu dans les champs modifiables, ce qui ne ne fonctionnent pas toujours bien. Maintenant que les modifications sont suivies en interne dans l'éditeur, cela fournira aux utilisateurs finaux un outil beaucoup plus fiable pour annuler les modifications dans le contenu. ].

  jQuery ColorPicke r : Nouveau design

  

  Avec R1 2022, nous nous sommes également concentrés sur l'amélioration de la conception des composants existants. Pour nous lancer, le composant Kendo UI pour jQuery ColorPicker a reçu un design nouveau et amélioré. pour jQuery. Bien que nous ayons pu ajouter des fonctionnalités ici et là, nous voulions consacrer du temps pour aborder encore plus de fonctionnalités en mettant à jour la conception. pour passer des vues Dégradé aux vues Palette dans le même élément ColorPicker. Nous avons ajouté un nouvel aperçu des couleurs où vous pouvez facilement comparer deux couleurs, et nous avons inclus de nouvelles entrées HEX et RVB basculables avec prise en charge de l'opacité. Enfin, nous avons ajouté l'outil de contraste pour montrer aux utilisateurs le rapport de contraste entre deux couleurs.

  Consultez la nouvelle conception jQuery ColorPicker mise à jour ici.

  jQuery PanelBar : Conception mise à jour

  

  Un autre composant qui a reçu une conception mise à jour est le composant Kendo UI pour jQuery PanelBar. Le composant est généralement le même, mais pour R1 2022, nous avons mis à jour le rendu , qui inclut les éléments HTML et les classes CSS utilisés pour représenter le jQuery PanelBar, et ces modifications rendent les éléments enfants dans le PanelBar plus distincts lorsque tout le contenu est développé. De plus, nous avons mis à jour l'apparence des flèches de développement et de réduction. utilisez une flèche en forme de chevron au lieu d'un triangle plein.

  Voici un lien direct vers les démos du composant jQuery PanelBar pour plus d'informations.

  jQuery Drawer : Amazon-Style Navigation Sa mple

  

  Un scénario qui apparaît fréquemment pour les utilisateurs de l'interface utilisateur Kendo pour jQuery Drawer est le désir de répliquer l'Amazon menu lorsque vous utilisez le composant. Pour ceux qui ne sont pas familiers, cet élément de navigation commence par un composant de tiroir standard répertoriant diverses options de menu. Lorsqu'un utilisateur clique sur n'importe quel élément de menu, le composant Tiroir s'anime au « niveau » suivant du tiroir et restitue un tout nouvel ensemble d'éléments de menu liés à l'élément parent qui vient d'être sélectionné. À partir de là, les utilisateurs peuvent naviguer plus en profondeur ou utiliser la navigation fournie pour revenir aux niveaux précédents.

  Pour aider les développeurs à atteindre ce style d'interaction, nous avons créé un article de la base de connaissances qui explique comment cela peut être fait. Il s'agit d'un scénario un peu plus avancé, ce qui signifie qu'il nécessite un peu plus de code que ce que l'on trouverait normalement dans l'une de nos démos, d'où l'article de la base de connaissances.

  Tous les composants jQuery : accessibilité améliorée

  

  Une grande fonctionnalité sous le capot pour R1 2022 est l'amélioration de l'accessibilité dans tous les composants de l'interface utilisateur de Kendo pour jQuery. Ces améliorations vont de la résolution des problèmes d'accessibilité signalés dans notre backlog à l'amélioration de nos tests d'accessibilité automatisés. pour améliorer la robustesse des composants de l'interface utilisateur du point de vue de l'accessibilité. Le résultat est que la dernière édition de nos composants jQuery continue d'être la première bibliothèque d'interface utilisateur jQuery pour la conformité à l'accessibilité.

  Vous pouvez en savoir plus en visitant le Interface utilisateur de Kendo pour la documentation sur l'accessibilité de jQuery ici.

  Prise en charge de Visual Studio 2022

  Pour les fans de Visual Studio, je peux signaler qu'avec R1 2022, Kendo L'interface utilisateur pour jQuery prend officiellement en charge Visual Studio 2022 ! Les extensions Visual Studio que nous proposons pour nos composants d'interface utilisateur ont été mises à jour pour garantir que tous nos outils fonctionnent pour la dernière version de Visual Studio. commentaires de clients comme vous. Nous aimons avoir des nouvelles de nos clients pour nous assurer que nous ajoutons des composants et des fonctionnalités dont vous avez tous besoin. Avons-nous oublié un composant ou une fonctionnalité spécifique dont vous avez besoin ? Veuillez vous référer au Kendo UI for jQuery Feedback Portal et soumettre votre propre demande de fonctionnalité ou voter pour un élément existant.

  Webinaires et diffusions en direct

  Pour avoir une chance de voir toutes les mises à jour ci-dessus en direct et en personne, nous organisons le webinaire sur la sortie de Kendo UI R1 2022 le mardi 1er février à 11 h HE ! Rejoignez-nous pour découvrir les nouveautés des composants de l'interface utilisateur jQuery, Angular, React et Vue !

  Pour ceux qui sont intéressés par les dernières nouveautés d'Angular et de React, nous avons également des flux Twitch bonus en cours ! L'interface utilisateur de Kendo pour Angular sera couverte en direct lors d'une diffusion le jeudi 27 janvier à 10h00 HE et le contenu de KendoReact est diffusé le mercredi 26 janvier à 10h00 HE.

  Des tonnes de plaisir seront au rendez-vous, alors rendez-vous sur la page d'inscription au webinaire Kendo UI R1 2022 pour réserver votre place et participer aux festivités !