Quoi de neuf dans Kendo UI pour Angular avec R3 2021

La version R3 2021 pour Kendo UI pour Angular est arrivée ! Il s'agit d'une énorme version, contenant de nouveaux composants tels que le diagramme de Gantt et un grand nombre de fonctionnalités ajoutées aux composants existants. Il y a beaucoup de choses dans cette version pour tout développeur Angular, alors allons-y directement et voyons les nouveautés de R3 2021 dans Kendo UI pour Angular.

Bootstrap 5 Support

Sélectionneurs de thèmes mis à jour dans Docs & Demos

Quelque chose que toutes les interfaces utilisateur de Kendo pour les développeurs angulaires peuvent remarquer avec cette version, c'est qu'il y a beaucoup plus de thèmes parmi lesquels choisir dans la liste déroulante Theme Picker dans les documents et les démos ! Eh bien, techniquement, ce sont toujours les trois mêmes thèmes que nous avons depuis un certain temps (Default, Bootstrap et Material Design), mais nous présentons maintenant également plusieurs de nos « swatches », qui sont des variations de couleurs prédéfinies de ces thèmes.

Notre espoir est que cela permettra aux développeurs de voir ce qui est possible pour l'interface utilisateur Kendo pour Angular avec seulement quelques mises à jour de variables Sass, et c'est également un excellent moyen de montrer aux autres équipes quels schémas de couleurs vous pouvez appliquer à votre Angular existant. apps.

Jouez avec le sélecteur de thème mis à jour en ouvrant n'importe quelle démo de Kendo UI pour documents et démos angulaires.

Kendo UI Kit pour Figma

Une autre mise à jour passionnante à mentionner avant même de commencer à examiner les nouveaux composants et fonctionnalités de l'interface utilisateur est le nouveau kit d'interface utilisateur Kendo pour Figma ! Contenant plus de 30 composants Kendo UI pour les composants angulaires (la liste s'allonge au moment où nous parlons), ce kit permet à tout concepteur travaillant avec Figma d'ajouter Kendo UI pour les composants angulaires à leurs conceptions. Cela devrait aider à rassembler les concepteurs et les développeurs lors de la création d'applications avec l'interface utilisateur Kendo pour Angular.

Pour en savoir plus, consultez la page Kendo UI Kits for Figma.

Nouveaux composants angulaires

Nouveau Composant : Diagramme de Gantt

L'un des composants d'interface utilisateur les plus attendus avec la version R3 2021 est le nouveau Angular Gantt Graphique. Au cas où vous ne sauriez pas ce qu'est un diagramme de Gantt, voici un bref résumé :

Le Gantt est un type de diagramme à barres qui illustre un calendrier de projet. Il permet aux utilisateurs de voir diverses tâches, comment elles sont liées et combien de temps chaque tâche devrait prendre pour s'accomplir. Les tâches ont une barre visuelle pour indiquer le début et la fin d'une tâche, l'avancement d'une tâche particulière, si la tâche est à l'heure ou en retard, et bien plus encore.

Il y a déjà beaucoup à découvrir dans ce composant, bien sûr. trop de choses à couvrir dans cet article de blog, alors rendez-vous dans la section de documentation de l'interface utilisateur Kendo pour Angular Gantt pour voir le composant en action.

Nouveau composant : Heatmap

Un autre grand composant ajouté avec R3 2021 est le nouveau composant Angular Heatmap. Les graphiques Heatmap, également connus sous le nom de « carte thermique de cluster », sont adaptés pour visualiser l'amplitude d'une valeur sur deux dimensions. Le meilleur exemple de carte thermique est le graphique de contribution que vous voyez sur GitHub.

L'interface utilisateur Kendo pour Angular Heatmap fait partie de notre bibliothèque Angular Data Visualization, ce qui signifie que le contenu est rendu sous la forme d'un ensemble d'éléments SVG. [19659005]Consultez les Documents et démos de la carte thermique angulaire pour plus d'informations.

Nouveau composant : Typographie

Un retour constant que nous recevons de Kendo UI pour les utilisateurs angulaires est le désir de pousser la normalisation ou la cohérence entre les applications. Dans ce cadre, nous sommes allés de l'avant et avons créé la nouvelle directive Angular Typography.

La directive Kendo UI pour Angular Typography permet aux développeurs d'améliorer l'apparence de n'importe quel élément d'interface utilisateur en utilisant les classes de thème Kendo UI disponibles. Plutôt que d'écrire des classes par eux-mêmes, les développeurs peuvent simplement choisir des classes prêtes à l'emploi à partir des thèmes qu'ils utilisent déjà !

Pour plus d'informations sur ce composant, rendez-vous sur le composant Kendo UI for Angular Typography section documentation.

Fonctionnalités étendues des composants

Une amélioration de la qualité de vie qui a été ajoutée à la grille de données angulaire avec R3 2021 est la possibilité de contrôler la position du pager intégré de la grille. Avec cette fonctionnalité, un développeur peut contrôler si le pager doit être affiché en haut, en bas ou à la fois en haut et en bas d'une grille de données angulaire spécifique.

De plus, avec R3 2021, l'interface utilisateur Kendo pour l'équipe Angular s'est également concentré sur les améliorations de l'accessibilité dans le pager de la grille de données, qui prend désormais en charge la navigation au clavier grâce à ces efforts. 19659036]Grille : espaces réservés pendant la virtualisation

La grille de données angulaire a pris en charge la virtualisation, à la fois dans les lignes et colonnes, depuis longtemps, mais avec R3 2021, nous avons encore amélioré une chose déjà géniale ! Avec cette version, nous avons ajouté des espaces réservés squelettes intégrés pendant les scénarios de défilement virtuel.

Pendant les scénarios de virtualisation, la grille demandera des données supplémentaires au fur et à mesure que les utilisateurs défilent. Cette demande traitera des données locales sur le client (rapide) ou provoquera des demandes de serveur pour plus de données (lent).

Auparavant, lorsque les données n'étaient pas disponibles, les utilisateurs ne voyaient que des lignes vides, ce qui peut sembler un peu étrange. pour l'expérience d'un utilisateur, car les utilisateurs ne savent pas si davantage de données sont chargées ou si quelque chose s'est mal passé. Avec cette fonctionnalité d'espace réservé, les utilisateurs peuvent voir qu'il se passe quelque chose avec le composant et ils sauront intuitivement que les données arrivent effectivement.

Il s'agit davantage d'un gain de performances perçu pour les utilisateurs finaux de la grille, mais même de performances perçues. apparaîtra comme une amélioration des performances ! De plus, il a fière allure.

Veuillez vous référer à la documentation Kendo UI for Angular Grid Virtualization pour plus d'informations.

Grid: Sample for Drag & Drop Between Grids

Une question populaire de l'interface utilisateur Kendo pour les développeurs angulaires est de savoir comment activer le glisser-déposer entre deux grilles de données. Avec cette version, nous avons créé une nouvelle démo qui montre exactement comment cela peut être fait, qui sera facile à découvrir et à avoir à portée de main chaque fois que plusieurs grilles doivent être sur une seule page.

Pour voir le code derrière l'exemple, vous pouvez cliquer ici pour accéder au référentiel de base de connaissances Kendo UI pour Angular.

TreeList: Sample for Drag & Drop Between TreeLists

Similaire à l'exemple de grille ci-dessus, l'interface utilisateur Kendo pour Angular L'équipe a créé un exemple montrant comment faire glisser et déposer des éléments entre deux TreeLists angulaires. ]TabStrip : Onglets fermables

Une amélioration de la qualité de vie ajoutée à le composant Kendo UI pour Angular TabStrip avec R3 2021 est la nouvelle fonctionnalité d'onglets fermables. Comme son nom l'indique, cela permet aux utilisateurs de cliquer sur une icône (par défaut un symbole X) pour supprimer l'onglet en question de la liste des onglets disponibles. Les développeurs n'ont qu'à définir l'option closable afin de profiter de cela, donc il y a beaucoup pour votre argent dans une seule option de configuration.

Voici l'interface utilisateur Kendo pour Angular TabStrip Démo Closable Tabs pour plus d'informations.

TabStrip: Scrollable Tabs

Voici une démo présentant les onglets déroulants dans l'interface utilisateur de Kendo pour Angular TabStrip.

TreeView : Auto- Faites défiler pendant le glisser-déposer[19659048] Avec R3 2021, le TreeView peut désormais défiler automatiquement lorsque les utilisateurs font glisser et déposent des nœuds dans le TreeView. Cela devient une énorme amélioration par rapport à l'utilisation de TreeView lorsqu'il s'agit de grandes listes de nœuds que les utilisateurs peuvent vouloir réorganiser. ].

TreeView : étendre automatiquement les nœuds sur le filtre

Une amélioration supplémentaire de l'arborescence angulaire avec R3 2021 est la possibilité d'étendre automatiquement les nœuds lorsque les utilisateurs filtrent les données au sein du composant. Si un nœud est découvert en filtrant tous les nœuds, l'accès à la racine sera développé pour aider à mettre en évidence le ou les nœuds en question.

Il y a quelques options de configuration à garder à l'esprit pour cela, veuillez donc vous référer à la démonstration Angular TreeView Auto-Expanding Nodes While Filtering pour voir ce qui doit être fait pour implémenter cette fonctionnalité dans vos applications aujourd'hui.

MultiSelectTree : Filtrage côté client

Éditeur : option de préservation des espaces blancs et événements de mise au point et de flou

Kendo UI for Angular demo pour voir comment vous pouvez utiliser ces nouvelles fonctionnalités aujourd'hui.

Avec R3 2021, le ScrollView a une option pour afficher le pager en bas au format Dark ou Light. Le gif ci-dessus montre la différence et il devrait être aussi clair que le jour et la nuit.

Consultez la démo de pagination ScrollView pour en savoir plus.

ColorPicker & ColorGradient : navigation et localisation au clavier[19659048]

Les composants Angular ColorPicker et ColorGradient ont également reçu une certaine attention avec R3 2021. Plus précisément, les deux composants sont désormais livrés avec des fonctionnalités intégrées de navigation et de localisation au clavier. Documentation du composant ColorGradient.

FloatingLabel : prise en charge CSS personnalisée et événement de changement de position

Le composant Angular FloatingLabel prend désormais officiellement en charge le CSS personnalisé, permettant aux développeurs de personnaliser l'apparence des FloatingLabels. De plus, l'événement positionChange a également été ajouté.

Voici un lien rapide vers le composant Angular FloatingLabel.

SplitButton : Modifier le type du bouton principal[19659048]Documentation du composant Angular SplitButton.

Vous avez des commentaires ?

C'est un plein Libération! Cependant, nous n'avons peut-être pas ajouté une fonctionnalité ou un composant spécifique que vous recherchiez, c'est donc maintenant l'occasion pour vous de faire entendre votre voix et de nous faire savoir ce qui vous manque dans l'interface utilisateur de Kendo pour Angular !

Rendez-vous sur l'Kendo UI pour Angular Feedback Portal et votez pour votre article de retour préféré ou soumettez le vôtre ! Kendo UI for Angular a atteint la taille qu'elle est aujourd'hui grâce aux commentaires continus de nos clients, et nous voulons continuer à fournir la meilleure bibliothèque possible pour vous et vos équipes. Nous utilisons les commentaires que nous entendons de votre part pour piloter toutes nos versions !

Webinaires et diffusions en direct

Vous voulez voir tout ce que j'ai mentionné ci-dessus en direct et en action ? Le mercredi 28 septembre à 11 h HEnous organisons le webinaire Kendo UI R3 2021 sur la version . Cette session couvrira tout ce qui est nouveau avec R3 2021 dans Angular, jQuery, React et Vue.

En plus de cela, nous aurons également un Twitch livestream approfondissant l'interface utilisateur de Kendo pour Angular Vendredi 24 septembre à 10 h HE. Nous couvrons également KendoReact sur Twitch le jeudi 23 septembre à 10 h 00 HE.

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