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

La version R1 2022 de Kendo UI pour Angular est arrivée, apportant cinq nouveaux composants d'interface utilisateur angulaire et 23 nouvelles fonctionnalités dans nos composants angulaires existants !

La version R1 2022 de Kendo UI pour Angular est arrivée et prête à démarrer 2022 en fanfare ! Cette version comprend de nouveaux composants, plusieurs mises à jour de composants existants, la prise en charge d'Angular 13, de nouveaux kits d'interface utilisateur Figma et bien plus encore. Sans plus tarder, passons à l'action !

Prise en charge d'Angular 13

Angular 13 est sorti en novembre 2021, et Kendo L'interface utilisateur pour Angular est prise en charge depuis le jour 0. Pour tous ceux qui souhaitent mettre à jour la dernière édition du framework Angular, vous pouvez le faire en toute sécurité en mettant simplement à jour les dernières versions de l'interface utilisateur Kendo pour les packages Angular.

Kendo UI Kit pour Figma v1.7

En 2021, nous avons introduit les kits d'interface utilisateur Telerik et Kendo pour Figma pour aider à améliorer la productivité et la collaboration entre les concepteurs et les développeurs des équipes utilisant l'interface utilisateur de Kendo.

Avec R1 2022, nous avons introduit des composants Figma pour tous les composants de l'interface utilisateur Telerik et Kendo (les graphiques étant la seule exception). Avec cette dernière mise à jour, les concepteurs devraient disposer d'encore plus d'éléments à utiliser dans leurs conceptions. Options de thème "/>

Dans le cadre d'un effort continu visant à rendre l'interface utilisateur de Kendo pour Angular et ses thèmes plus flexibles et à aider nos utilisateurs à inclure plus de conceptions et à répondre aux exigences UX, nous revoyons tous les composants de l'interface utilisateur de Kendo à travers le défaut, Thèmes Bootstrap et Material Plus précisément, nous travaillons à l'introduction d'options communes qui peuvent être définies au niveau des composants et qui peuvent aider à définir les couleurs du thème principal, la taille et la forme des composants individuels, etc.

Avec R1 2022, nous avons mis à jour les ButtonsInputsDateInputs et DropDowns pour offrir les options de rendu de thème suivantes :

• theme90[196] fillMode
• taille[19659015]forme
• arrondie

Une note à 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 angulaires

Nouveau composant : code à barres angulaire

Le premier nouveau composant que j'aimerais couvrir est le nouveau composant Kendo UI pour Angular Barcode. Comme vous pouvez probablement le deviner, ce composant peut être utilisé pour afficher des codes à barres dans votre Applications angulaires. Le code-barres angulaire prend en charge plusieurs types de codes-barres 1D, tous disponibles via des options de configuration intégrées.

Chaque code-barres angulaire peut être rendu sous forme d'élément SVG ou Canvas en définissant une seule propriété. de manière appropriée. Les codes-barres peuvent être rendus sous forme d'élément SVG ou Canvas. De plus, chaque code-barres peut être exporté au format PDF ou PNG.

Voir la nouvelle Kendo UI pour les démonstrations de codes-barres angulaires ici.

Nouveau composant : code QR angulaire

Dans la même veine que le composant Barcode ci-dessus, avec R1 2022, nous introduisons également le composant Angular QR Code ! Ce nouveau composant est livré avec -en prise en charge de l'encodage et de la correction d'erreurs, ce qui est très important pour ceux qui connaissent les codes QR. Et vous pouvez ajouter une superposition personnalisée au code QR angulaire pour ajouter des éléments comme un logo d'entreprise au code QR. Cela ouvre la possibilité de prendre en charge types spécifiques comme le code QR suisse. Ces codes QR angulaires peuvent être rendus à la fois sous forme d'éléments SVG ou Canvas et peuvent être exportés vers différents formats tels que PDF ou PNG. .

Nouveau composant : filtre angulaire[19659033]Kendo UI for Angular – Filter Component" title="Kendo UI for Angular – Filter Component"/>

Avec cette dernière mise à jour, Kendo UI for Angular a ajouté le nouveau composant Filter à la liste sans cesse croissante des composants de l'interface utilisateur pour Angulaire. Le composant Filtre angulaire permet aux utilisateurs de créer des expressions de filtre plus complexes à l'aide d'une interface utilisateur intuitive. Les expressions de filtre peuvent être liées à n'importe quelle collection de données existante dans votre application Angular et peuvent être connectées à des composants d'interface utilisateur liés aux données existants, tels que l'interface utilisateur Kendo pour la grille de données angulaire. Filtrez le composant ici.

Nouveau composant : Angular Popover

La nouvelle interface utilisateur de Kendo pour Angular Popover component donne aux développeurs un moyen facile d'afficher des informations supplémentaires sur un élément sur le focus, le clic ou le survol. Bien qu'il existe une connexion à d'autres composants similaires comme l'info-bulle, le popover angulaire est conçu pour afficher un contenu plus avancé. Les scénarios courants incluent l'élément qui obtient s'affiche lorsque vous survolez des éléments de calendrier dans Google Agenda ou Outlook, où des informations telles que les participants, les notes de réunion et des informations supplémentaires liées à l'événement peuvent être affichées.

Nouveau composant : Angular FlatColorPicker

Le composant Kendo UI pour Angular FlatColorPicker élargit le nombre de façons dont les utilisateurs peuvent sélectionner une couleur dans n'importe quelle application Angular. Le composant restitue l'intégralité de l'interface de sélection des couleurs sans être caché derrière une liste déroulante ou tout autre élément. Le composant FlatColorPicker peut facilement s'intégrer dans les formulaires pilotés par des modèles et réactifs.

Les mises à jour de thème pour R1 2022 ont également apporté des couleurs nouvelles et mises à jour à toutes les interfaces utilisateur Kendo pour Angular Charts. qui ne sont peut-être pas familiers, ces nouvelles couleurs par défaut sont utilisées lorsqu'aucune couleur n'a été explicitement définie pour une série. Cette mise à jour garantit que les couleurs par défaut correspondent mieux au thème de l'interface utilisateur de Kendo qui est utilisé, devrait donner l'apparence des graphiques angulaires plus moderne, et la mise à jour donne plus de couleurs à utiliser prêtes à l'emploi.

Si vous souhaitez conserver les anciennes couleurs par défaut du thème, nous avons créé une section de documentation "Utilisation des couleurs de série à partir des thèmes v4" .

Vérifiez o ut les nouvelles couleurs par défaut dans l'interface utilisateur de Kendo pour les graphiques angulaires ici.

Graphique angulaire : panoramique et zoom améliorés

Le panoramique et le zoom font tous deux partie de l'interface utilisateur de Kendo pour les graphiques angulaires depuis la première version de la bibliothèque de graphiques angulaires, mais avec R1 2022, nous avons optimisé cette interaction. Nous avons considérablement amélioré la convivialité lors de l'utilisation de la molette de la souris lors du panoramique et du zoom. Le zoom est maintenant cohérent dans les deux sens et le point survolé reste sous le curseur. Tout ce que vous avez à faire pour voir les améliorations est de mettre à jour la dernière édition du package Angular Chart !

Grille angulaire : exemple de mise à jour en direct des données

Bien que cette fonctionnalité ait été possible dans l'interface utilisateur de Kendo pour Angular depuis un certain temps, avec cette mise à jour, nous avons ajouté une documentation spécifique et des ressources utiles sur la façon de lier des données en direct et mises à jour directement à l'interface utilisateur de Kendo pour Angular Data Grid.Comme le montre la démonstration fournie, des cellules individuelles dans la grille de données angulaire peuvent être mis à jour sans restituer l'intégralité du composant, ce qui permet au composant de maintenir des performances extrêmement rapides lorsque les données sont mises à jour sous le capot. Il s'agit d'une fonctionnalité très populaire pour tout composant de grille de données, nous voulions donc nous assurer que les développeurs disposaient d'articles et des informations faciles d'accès pour s'inspirer. Selection" title="Kendo UI for Angular – Gantt Selection"/>

Avec R1 2022, le composant Angular Gantt sort officiellement de la phase bêta et entre en RTM. Cela s'accompagne de toute une série de nouvelles fonctionnalités, notamment la possibilité de sélectionner des lignes et des tâches dans le composant Gantt. Kendo UI for Angular – Gantt Editing" title="Kendo UI for Angular – Gantt Editing"/>

Une autre fonctionnalité importante et intéressante ajoutée à l'interface utilisateur de Kendo pour Angular Gantt est la possibilité de modifier des éléments dans le Gantt. cette version, les utilisateurs peuvent modifier des éléments via plusieurs interactions différentes.

La première consiste à modifier directement dans la partie TreeList du composant d'interface utilisateur (ce qui est affiché sur le côté gauche) en interagissant avec des cellules individuelles et en mettant à jour leur valeur, également connue sous le nom d'édition dans la cellule.

La deuxième approche consiste à configurer le composant Angular Gantt pour utiliser une fenêtre de dialogue intégrée pour gérer l'édition.Celle-ci peut être ouverte en interagissant avec les tâches sur la droite- côté droit du composant Gantt.[19659005]Découvrez la démo d'édition de Gantt angulaire ici.

Gantt angulaire : création de dépendances

En prolongeant le travail effectué par l'équipe autour de l'édition du composant Gantt, avec cette mise à jour, l'interface utilisateur de Kendo pour le composant Angular Gantt a reçu la possibilité de créer de nouvelles dépendances entre les tâches de Gantt. Les utilisateurs peuvent désormais créer leurs propres dépendances entre les tâches, ce qui est important pour tout composant Gantt qui permet l'interaction de l'utilisateur final et n'est pas seulement en mode lecture seule. .

Gantt angulaire : Accessibilité

L'accessibilité est l'un des principaux piliers de Kendo UI pour Angular, et nous voulait résoudre ce problème le plus rapidement possible avec le nouveau composant Angular Gantt.Au-delà du rendu du composant, cela signifie également que le Gantt angulaire dispose désormais d'une navigation au clavier intégrée.

Avec cette dernière version, le Gantt offre désormais la conformité avec les normes Section 508, WCAG 2.1 et WAI-ARIA.

Pour plus d'informations sur l'accessibilité dans l'interface utilisateur de Kendo pour Angular, voici la section accessibilité de notre documentation.

Éditeur angulaire : obtenir le texte sélectionné [19659077]Kendo UI for Angular – Get Selected Text" title="Kendo UI for Angular – Get Selected Text"/>

Lancement d'un grand nombre de nouvelles fonctionnalités de l'éditeur à venir dans notre suite de composants d'interface utilisateur angulaire, avec R1 2022, nous avons a ajouté une nouvelle propriété pour aider à extraire le texte actuellement sélectionné dans la zone de contenu de l'éditeur. Ce nouveau champ, selectionTextpeut être utilisé pour extraire le texte sélectionné et l'utiliser pour mettre à jour d'autres composants angulaires ou modifier et stocker ailleurs.

Suivez ce lien pour découvrir le nouveau Angular Editor Get Démo de texte sélectionné.

Éditeur angulaire : Sélectionner tout et outils d'impression

La prochaine fonctionnalité ajoutée à l'interface utilisateur de Kendo pour Angular Editor avec R1 2022 est le nouvel outil Sélectionner tout et Imprimer.

L'outil Sélectionner tout permet aux utilisateurs de sélectionner tout le contenu dans l'éditeur à l'aide d'un bouton dans la barre d'outils.

Quant à l'outil Imprimer, cela permet aux utilisateurs d'envoyer le contenu de l'éditeur angulaire à une imprimante à l'aide de la boîte de dialogue d'impression intégrée du navigateur. Auparavant, cela nécessitait que les développeurs écrivent leur propre logique d'impression, nous sommes donc très heureux d'offrir cette fonctionnalité en un seul clic.[19659005]Voir tous les Kendo UI pour Angular Ed outils itor dans cette démo.

Éditeur angulaire : redimensionnement d'image

Une fonctionnalité que j'ai savoir que de nombreux utilisateurs attendent avec impatience est la possibilité pour l'interface utilisateur de Kendo pour Angular Editor de redimensionner les images dans le contenu de l'éditeur. Avec R1 2022, cela est désormais disponible immédiatement, permettant aux utilisateurs de redimensionner n'importe quelle image avec des poignées de glissement qui apparaissent lorsqu'un utilisateur met au point une image. .

Éditeur angulaire : redimensionnement

Élargissement de l'histoire du redimensionnement, avec R1 2022 l'interface utilisateur de Kendo pour Angular Editor a ajouté la fonctionnalité de redimensionnement au composant Editor lui-même. Cela permet aux utilisateurs de l'éditeur d'ajuster la taille de l'éditeur angulaire. Les développeurs peuvent définir des limites quant à la taille de l'éditeur à laquelle il peut être redimensionné, ou ils peuvent laisser les utilisateurs redimensionner sans aucune restriction .

Découvrez la Kendo UI for Angular Editor Redimensionnement démo ici.

Angular Editor : Table Split & Merge Cells

Lors de l'ajout et de l'édition g tables est possible depuis un certain temps maintenant, avec R1 2022, l'interface utilisateur de Kendo pour Angular Editor propose désormais des outils supplémentaires pour diviser ou fusionner des cellules dans n'importe quel élément de tableau trouvé dans son contenu. Ces options sont exposées via des boutons intuitifs dans l'élément de la barre d'outils du composant Angular Editor.

Voici un lien direct vers une démo mettant en évidence l'interface utilisateur de Kendo pour les fonctionnalités de fractionnement et de fusion de table d'Angular Editor.

Angular Éditeur : Appliquer des commandes aux mots une amélioration de la qualité de vie. Plus précisément, cette nouvelle fonctionnalité concerne l'application de commandes à des mots ou des blocs de texte dans l'Éditeur.

Pour donner un contexte à ce que cela signifie, voici un exemple : Avant R1 2022, lorsqu'un utilisateur cliquait n'importe où dans un seul mot dans la zone de contenu mais n'a sélectionné aucun texte (ce qui signifie que le curseur clignote entre deux caractères), puis a utilisé le bouton Gras de la barre d'outils ou un raccourci clavier, le résultat final serait que rien n'est arrivé au mot. "commande" pour mettre un mot en gras ne mettrait réellement en gras quelque chose que lorsqu'une sélection a été faite (surlignant plusieurs caractères). une nouvelle fonctionnalité entre en jeu !

Avec R1 2022, l'éditeur dispose d'un ensemble de nouvelles options de configuration permettant aux développeurs de décider quel comportement est idéal pour leurs utilisateurs. En prenant le même exemple que ci-dessus, avec les bonnes propriétés définies, l'éditeur angulaire mettra automatiquement en gras le mot entier dans lequel se trouve actuellement le curseur. documentation ici.

Planificateur angulaire : marqueur de l'heure actuelle

L'interface utilisateur de Kendo pour Angular Scheduler n'est pas seulement utilisé pour gérer les événements dans un composant autonome – de nombreux utilisateurs finaux utilisent le composant Scheduler comme moyen de gérer leurs calendriers quotidiens.

Pour améliorer l'affichage et la compréhension des événements actuellement disponibles dans Angular Scheduler, nous avons a ajouté le nouveau marqueur d'heure actuelle. Cela affiche une ligne distincte sur toute la zone d'événement indiquant l'heure actuelle, ce qui devrait rendre l'interaction avec le planificateur angulaire plus intuitive.

Voici un di lien direct vers une démo présentant l'interface utilisateur de Kendo pour la fonction de marqueur de l'heure actuelle d'Angular Scheduler .

Angular Scheduler : sélection d'emplacement

Un autre ajout à l'interface utilisateur de Kendo pour Angular Scheduler est le nouveau comportement qui permet aux utilisateurs de sélectionner non seulement des événements, mais également des créneaux horaires. Les créneaux sont les éléments qui représentent les incréments de temps (par défaut 30 minutes) dans lesquels les événements (les éléments réels affichés dans le planificateur) sont rendus. Cela devrait aider les utilisateurs qui souhaitent principalement créer des événements en sélectionnant leur durée à l'aide de la souris.

Classes et attributs CSS personnalisés lorsqu'ils sont ouverts via le service

La fonctionnalité DialogService de l'interface utilisateur Kendo pour le composant Angular Dialog est utilisée lorsque les développeurs doivent créer dynamiquement une instance de composant Dialog lors de l'utilisation d'un service Angular. Pour les personnes se trouvant dans cette situation, la version R1 2022 a ajouté la possibilité pour le composant Kendo UI for Angular Dialog d'avoir des attributs CSS et HTML personnalisés ajoutés au composant lorsqu'il est utilisé via un service Angular. via le service

Développant les fonctionnalités disponibles lors de l'ouverture d'un dialogue angulaire via un service, nous avons également ajouté la possibilité de définir que l'interface utilisateur de Kendo pour le dialogue angulaire doit être rendue droite à l gauche. Cela peut être fait via la propriété htmlAttributes en fournissant un champ dir défini sur rtl.

Pour plus d'informations, vous pouvez vous référer à le Interface utilisateur de Kendo pour les documents du service angulaire de dialogue angulaire & Attributs lors de l'ouverture via le service

Avec R1 2022, le composant Kendo UI for Angular Window a également ajouté les mêmes fonctionnalités lorsque vous travaillez via un service angulaire.Lorsque les gens doivent ajouter une classe CSS personnalisée ou un attribut HTML personnalisé à la fenêtre angulaire composant, ils peuvent utiliser les propriétés cssClass et htmlAttributes pour ce faire. utiliser un service angulaire est la capacité de rendre Utilisez le composant Window en mode RTL (de droite à gauche). Cela peut être fait via la propriété htmlAttributes en fournissant un champ dir défini sur rtl.

Voir l'interface utilisateur Kendo pour le composant de fenêtre angulaire Angular Démos de service pour plus d'informations.

Commutateur angulaire : taille personnalisée et étiquettes longues

Le composant Angular Switch fournit une expérience utilisateur intuitive et élégante pour basculer entre deux valeurs. Le plus souvent utilisé pour représenter les états On/Off ou True/False, mais il peut y avoir des cas où les étiquettes doivent être plus longues, comme Enable/Disable.

L'interface utilisateur de Kendo pour Le composant Angular Switch a reçu une mise à jour avec R1 2022 pour gérer spécifiquement les étiquettes d'une longueur arbitraire.Nous avons ajouté un article de documentation et des exemples montrant comment utiliser des dimensions personnalisées et des étiquettes plus longues dans le composant Angular Switch.Au-delà des exemples que j'ai fournis ici, permettant pour les étiquettes plus longues présentent d'énormes avantages pour les scénarios de mondialisation et d'internationalisation. title="Kendo UI pour Angular PanelBar – Conception mise à jour"/>

Pour ceux qui ne le savent pas, toutes les bibliothèques de composants Web Kendo UI et Telerik UI partagent une apparence et une convivialité communes. Il s'agit principalement d'aider nos clients à migrer d'une technologie à une autre, de s'assurer que les équipes utilisant différentes piles technologiques peuvent produire des applications qui ont le même aspect et la même convivialité, ou même de pérenniser leurs outils pour être prêts pour le prochain nouveau framework. Cela fait de Kendo UI pour Angular un produit sur neuf au total partageant un rendu commun.

Comme nous avons introduit le composant PanelBar dans toutes ces suites, nous avons également reçu des commentaires sur l'apparence du composant et avons enregistré des éléments. pour l'amélioration. Avec R1 2022, nous avons pris ces commentaires et mis à jour la conception de tous nos composants PanelBar, y compris l'interface utilisateur Kendo pour Angular PanelBar.

Ces mises à jour incluent des modifications du rendu HTML et des classes CSS appliquées audit HTML, mais laissent la plupart de l'aspect et la convivialité du composant sont intacts. Nous avons amélioré le rendu avec les éléments enfants pour les rendre un peu plus distincts, et nous avons mis à jour les flèches de développement et de réduction et remplacé l'aspect du triangle rempli par une nouvelle flèche en chevron.

Voici un lien direct vers le Interface utilisateur Kendo pour les démonstrations de composants Angular PanelBar.

Angular ColorPicker : nouveau design

Similaire à les mises à jour de conception Angular PanelBar mentionnées ci-dessus, nous avons également mis à jour l'interface utilisateur Kendo pour le composant Angular ColorPicker et sa conception.

Cette nouvelle conception a mis à jour le rendu du composant, qui inclut les éléments HTML et les classes CSS utilisées, et nous avons également pris le nouveau composant Angular FlatColorPicker et l'a intégré dans la fenêtre contextuelle du ColorPicker. Cela augmente non seulement la robustesse de l'implémentation de ColorPicker, mais inclut également des fonctionnalités telles que des volets de prévisualisation, des boutons d'action et e vues.

Voir le nouveau design Angular ColorPicker ici.

Grille angulaire et Angular TreeView : pousser et épisser à partir de collections de clés ne met plus à jour l'état

Un commentaire que nous reçu plus tôt cette année a souligné que la façon dont nous fournissons des collections de clés telles que selectedKeysexpandedKeys et checkedKeys présentait des problèmes potentiels, car techniquement les collections peuvent être mutées dans leur forme actuelle. Avec R1 2022, nous avons décidé d'améliorer cela dans les composants Angular Grid et TreeView (deux gros composants qui traitent de la sélection).

Comme certaines personnes ont peut-être travaillé avec le comportement actuel des collections de clés, cela doit être considéré comme une rupture changer car, selon votre utilisation, de nouveaux messages d'erreur peuvent apparaître lorsque vous mettez à jour ces composants vers leur dernière version. Démos Treeview pour plus d'informations.

Vous avez des commentaires ?

Même si nous avons ajouté une tonne de composants et de fonctionnalités avec cette version, nous n'avons peut-être pas ajouté quelque chose que vous ou votre équipe recherchiez. C'est maintenant l'occasion pour vous de faire entendre votre voix ! Faites-nous savoir ce qui vous manque dans l'interface utilisateur de Kendo pour Angular en vous arrêtant sur le Kendo UI for Angular Feedback Portal. Dans ce portail, vous pouvez voter pour votre commentaire préféré ou soumettre le vôtre.

L'interface utilisateur de Kendo pour Angular est devenue ce qu'elle est aujourd'hui grâce aux commentaires continus de nos clients, et nous souhaitons continuer à fournir la meilleure bibliothèque possible pour vous et vos équipes. Alors, profitez-en pour nous faire part de vos commentaires !

Webinaires et diffusions en direct

Vous voulez voir tout ce que j'ai mentionné ci-dessus en direct et en action ? Le mardi 1er février à 11 h HEnous organisons le webinaire sur la version de Kendo UI R1 2022 ! Rejoignez-nous pour découvrir les nouveautés des composants de l'interface utilisateur Angular, jQuery, React et Vue !

Pour vous donner une chance d'avoir une plongée plus interactive dans le nouveau contenu, nous hébergerons également un flux Twitch couvrant l'interface utilisateur de Kendo pour Angular spécifiquement le jeudi 27 janvier à 10h00 HEet nous couvrons également KendoReact sur Twitch le mercredi 26 janvier à 10h00 HE.[19659005]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 !