Nouveautés de l'interface utilisateur de Kendo pour Angular avec R1 2021

La version R1 2021 de Kendo UI pour Angular est arrivée et regorge de nouveaux composants et fonctionnalités, notamment les composants DropDownTree, MultiColumnComboBox et TileLayout.

C'est toujours un bon moment à chaque nouvelle version de ] Kendo UI for Angular arrive, c'est pourquoi je suis tellement excité de parler de la version R1 2021 d'aujourd'hui. Plongeons-y et voyons tous les nouveaux composants et fonctionnalités de la version R1 2021 de Kendo UI pour Angular!

Angular 11 Support

Angular 11 est sorti le 11 novembre 2020 (l'obtenir? 11 le 11/11 ! 🤯) et bien sûr Kendo UI pour Angular a immédiatement publié le support ce jour-là. Bien que cela se soit produit vers la fin de l'année dernière, je tiens toujours à le souligner dans le cadre de notre version R1 2021 pour les personnes qui n'ont pas encore eu l'occasion de mettre à niveau.

Pour plus d'informations sur ce que Angular 11 a apporté à la table vous pouvez consulter le billet de blog d'Alyssa Nicoll ici .

Abandon du support pour Angular 6 & 7 et Breaking Changes

De l'autre côté de la médaille, la version R1 2021 marque également la suppression du support pour Angular 6 et 7.

Comme vous le savez, Kendo UI pour Angular suit la même cadence de support de version de framework que le framework Angular lui-même. Angular 7 a été officiellement supprimé du support LTS le 18 avril 2020. Nous avons maintenu le support pendant la majeure partie de 2020, mais le 16 décembre 2020, nous avons officiellement abandonné le support pour ces deux éditions d'Angular.

Comme d'habitude, pour les gens qui besoin d'Angular 6 et 7, vous pouvez toujours accéder aux versions précédentes qui prennent en charge ces versions d'Angular en utilisant des balises de distribution comme @ ng6 et @ ng7 . Ces branches sont figées dans le temps, elles ne recevront donc pas de mises à jour, mais vous pouvez toujours les référencer pour les applications qui ne sont pas encore prêtes à être mises à niveau vers une nouvelle version d'Angular. Si vous n'êtes pas familier, cette section de documentation explique en détail comment tout cela fonctionne.

Nous avons également mis en œuvre des changements de rupture dans divers composants que vous devez surveiller. Bien que les journaux de modifications individuels de nos packages le mentionnent également, nous avons les problèmes GitHub suivants qui vont dans les détails .

Nouveaux composants angulaires

Nouveau composant: DropDownTree

L'un des composants d'interface utilisateur les plus attendus de Kendo UI for Angular, le nouveau composant Angular DropDownTree offre la simplicité d'un DropDown et la liste hiérarchique des éléments d'un TreeView .

Les TreeViews peuvent occuper beaucoup d'espace dans n'importe quelle application Web et ont souvent pour but de permettre aux utilisateurs de sélectionner une valeur dans l'arborescence disponible. L'immobilier est souvent une ressource coûteuse dans les applications Web modernes, donc «se cacher» l'arborescence angulaire dans une liste déroulante et laisser la valeur sélectionnée s'afficher dans un élément d'entrée permet d'économiser une tonne d'espace.

Pour voir le DropDownTree angulaire en action, et pour voir les personnalisations disponibles sur les options, rendez-vous dans la section de documentation de Kendo UI pour Angular DropDownTree .

Nouveau composant: MultiColumnComboBox

Poursuivant la tendance des drop downs populaires et très demandés, avec R1 2021, nous introduisons également l'interface utilisateur Kendo pour le composant Angular MultiColumnComboBox. En plus d'être difficile à dire dix fois rapide, ce composant Angular UI combine un élément DropDown avec une structure de table pour tous les éléments internes. Ainsi, plutôt que de lister un seul champ de texte dans une longue liste, vous avez maintenant la possibilité d'afficher plusieurs champs pour chaque élément via des colonnes pour chaque champ.

Comme avec n'importe quel DropDown, cela permet aux utilisateurs de sélectionner une valeur dans une liste d'autres valeurs sans prendre de place précieuse au sein de l'application. Bien qu'il n'y ait peut-être pas trop de choses à afficher un tableau simple avec des valeurs parmi lesquelles sélectionner, il devient certainement très pratique de le cacher dans un DropDown lorsque cette liste fait partie d'un formulaire plus long.

Pour voir comment vous pouvez Ajoutez la MultiColumnComboBox angulaire à vos applications angulaires aujourd'hui, rendez-vous sur l'interface utilisateur de Kendo pour la documentation angulaire !

Nouveau composant: TileLayout

Un autre composant passionnant ajouté avec cette version est l'interface utilisateur Kendo pour Angular TileLayout. Publié sur la base des commentaires des développeurs cherchant à créer un tableau de bord interactif avec des indicateurs de performance clés pouvant être déplacés, le composant TileLayout rend créer des mises en page dynamiques et interactives un jeu d'enfant. En définissant simplement le nombre de colonnes disponibles pour le composant, la liste des tuiles remplira automatiquement le composant et créera une apparence et une sensation de colu mns et lignes. Les utilisateurs peuvent ensuite librement faire glisser et déposer les tuiles, ainsi que les redimensionner, afin de créer leur propre mise en page personnalisée.

Il y a certainement beaucoup à décompresser avec ce composant et je ne peux pas lui rendre justice juste dans ce blog Publier. Rendez-vous donc sur la documentation de Kendo UI pour Angular TileLayout pour voir comment vous pouvez ajouter ce nouveau composant à vos applications Angular dès aujourd'hui!

Nouveau composant: FloatingActionButton

Popularisé par les applications de bureau et mobiles, le Floating Action Button est une grande partie de nombreuses applications suivant Material Design. Il est probable que vous l'ayez utilisé à un moment donné aujourd'hui , ou du moins assez récemment.

Le bouton d'action flottant fournit un simple bouton «flottant» qui effectue une action particulière qui est contextuelle au contenu de la page. Au-delà de cette fonction, nous avons ajouté la possibilité de créer des éléments d'action connexes supplémentaires qui apparaissent lorsque le bouton principal interagit avec. Souvent appelé «numérotation abrégée», la liste des actions disponibles peut être personnalisée pour s'adapter à n'importe quel scénario.

Chaque bouton d'action de l'An Le bouton d'action flottant gular est livré avec des options de configuration telles que le style et l'icône pour s'assurer que les boutons fournis ont un sens pour l'utilisateur.

Pour plus d'informations, ainsi que des démos pour jouer avec le composant, rendez-vous sur le Section de documentation de l'interface utilisateur de Kendo pour le bouton d'action flottante angulaire .

Nouveau composant: ExpansionPanel

qui a été demandé par beaucoup de nos développeurs est la nouvelle interface utilisateur Kendo pour le composant Angular ExpansionPanel.

Ce composant fournit un élément d'interface utilisateur avec un titre, également appelé en-tête, qui peut être utilisé pour développer ou réduire le contenu associé en dessous . Tout ce qui est affiché dans l'en-tête ou la zone de contenu peut être personnalisé à l'aide de modèles angulaires, de sorte que le panneau d'expansion angulaire est extrêmement flexible et devrait pouvoir s'adapter à n'importe quelle application angulaire. pour en savoir plus sur ce nouveau composant.

Nouveau composant: TextArea

Pour résumer l'ensemble de la nouvelle interface utilisateur composants avec R1 2021, nous avons également introduit la nouvelle interface utilisateur Kendo pour le composant Angular TextArea. Cela introduit spécifiquement une entrée de texte plus longue et est l'interface utilisateur Kendo pour l'équivalent angulaire de l'élément HTML TextArea natif. L'interface utilisateur Kendo pour Angular TextArea se développe sur les éléments disponibles. composants et directives que Kendo UI pour Angular offre et aide à obtenir une apparence cohérente dans tous les éléments de l'interface utilisateur de vos applications Angular.

Auparavant disponible uniquement via s En ce qui concerne le style CSS, nous voulions offrir cela en tant que composant autonome pour ajouter des fonctionnalités supplémentaires, tout comme nous l'avons fait avec l'interface utilisateur Kendo pour Angular Textbox. Cela signifie que des fonctionnalités telles que des ornements, qui vous permettent d'ajouter plus d'éléments avant et après la TextArea, ainsi que des icônes de validation sont toutes disponibles prêtes à l'emploi.

Voici un lien rapide vers l'interface utilisateur de Kendo pour la documentation Angular TextArea pour plus d'informations sur ce nouveau composant.

Fonctionnalités des composants étendus

Graphiques – Mise à jour de la mise en évidence des séries

Au cours des deux dernières versions, nous avons amélioré divers aspects visuels de notre bibliothèque de visualisation de données et cette tendance s'est poursuivie avec R1 2021. Dans cette version, nous avons amélioré la façon dont la mise en évidence des séries est mise en valeur lorsque vous survolez différentes séries. Comme on le voit dans l'animation ci-dessus, il devient immédiatement clair quelle série est actuellement focalisée tandis que l'autre série devient moins accentuée. [19659005] Pour un aperçu du fonctionnement de cette nouvelle série de surlignages, vous pouvez consulter notre interface utilisateur Kendo pour les démos Angular Chart .

Grid & TreeList – Responsive Pager

Avec R1 2021 à la fois l'interface utilisateur Kendo pour Angular Data Grid et TreeList tirez parti de notre pageur angulaire pour vous assurer que leur expérience de pagination intégrée est désormais automatiquement réactive. Cela signifie que les éléments de l'interface utilisateur dans le pagineur changeront de manière dynamique en fonction de la fenêtre disponible et de la taille de la grille ou de l'arborescence.

C'est beaucoup plus facile à mettre en valeur en jouant avec les composants, alors passez à le Kendo UI for Angular Grid ou les sections de documentation Angular TreeList pour voir cela en action!

ListView – Édition intégrée

Introduit l'année dernière, avec R1 2021, Kendo UI pour Angular ListView étend son ensemble initial de fonctionnalités en ajoutant une interface intégrée pour éditer les éléments dans le composant. Cela déplace le Angular ListView au-delà de l'affichage des données via les modèles fournis et ajoute plus d'interactivité et de convivialité hors de la boîte.

Consultez la démo d'édition Angular ListView pour plus d'informations .

ListView – Keyboard Nav Conformité en matière d'igation et d'accessibilité

L'accessibilité est une partie importante de l'interface utilisateur de Kendo pour Angular et le composant ListView ne fait pas exception à cette règle. Au cours des deux derniers mois, l'équipe Kendo UI for Angular a travaillé sur l'ajout de la navigation au clavier intégrée, ainsi que quelques autres améliorations, à Angular ListView afin de s'assurer que ListView est conforme à WCAG 2.0, Section 508, et Normes d'accessibilité WAI-ARIA.

TreeView – Filtrage intégré

Ajout au liste déjà impressionnante de fonctionnalités dans l'interface utilisateur de Kendo pour Angular TreeView, avec R1 2021, nous avons officiellement ajouté un mécanisme de filtrage intégré et la possibilité d'afficher une zone de texte de recherche au-dessus du composant. Auparavant uniquement possible grâce aux développeurs fournissant leur propre code personnalisé, le mécanisme de filtrage peut maintenant être implémenté via un simple ensemble d'options de configuration.

C'est l'une des fonctionnalités les plus demandées pour l'interface utilisateur de Kendo pour Angular TreeView, donc j'espère que vous êtes aussi excité que moi de le voir. Cette fonctionnalité a été ajoutée dans!

Pour commencer à filtrer tous vos TreeViews, passez à l'interface utilisateur de Kendo pour la documentation Angular TreeView .

Editor – Support for More HTML Elements

Développement des fonctionnalités disponibles de l'interface utilisateur Kendo pour Angular Editor, avec R1 2021 nous avons examiné le moteur sous-jacent afin d'élargir la liste des éléments HTML pris en charge que les développeurs et les utilisateurs finaux peuvent ajouter au contenu de l'éditeur.

Pour une liste plus complète des éléments HTML pris en charge, vous pouvez vous diriger vers à la documentation de l'interface utilisateur de Kendo pour Angular Editor .

Editor – Prise en charge des schémas personnalisés

Lié à la fonctionnalité ci-dessus, avec R1 2021, l'interface utilisateur de Kendo pour l'éditeur angulaire prend désormais en charge les schémas personnalisés. Il s'agit d'une fonctionnalité importante car elle permet à l'éditeur angulaire de prendre en charge des éléments personnalisés dans son contenu, permettant aux développeurs angulaires d'étendre les éléments disponibles que les utilisateurs peuvent ajouter à leur contenu, y compris quelque chose de complètement personnalisé.

Pour un aperçu de la façon dont cela fonctionne réellement , rendez-vous sur l'interface utilisateur de Kendo pour la documentation de l'éditeur angulaire .

Calendrier et MultiViewCalendar – rendu classique

Pour ceux d'entre vous qui ont migré depuis jQuery, ASP.NET MVC ou ASP.NET Core, vous avez peut-être remarqué que les composants Angular Calendar et MultiViewCalendar ont une conception différente. a introduit Kendo UI for Angular, nous avons revisité l'expérience utilisateur pour les calendriers et créé une nouvelle conception globale et une nouvelle expérience utilisateur.

Nous savons que les gens qui migrent entre ces calendriers, ou les équipes qui doivent prend en charge plusieurs technologies avec une seule conception, peut résoudre certains problèmes liés aux nouvelles conceptions. Ainsi, afin de nous assurer que nous couvrons tout le monde avec nos calendriers angulaires, nous avons introduit le mode «Rendu classique» des composants Calendrier angulaire et MultiViewCalendar.

Les deux façons différentes d'afficher les composants du calendrier angulaire peuvent être effectuées avec un seul option de configuration, permettant aux développeurs Angular de choisir facilement entre les deux expériences utilisateur!

Pour voir le nouveau rendu de Calendar en action, rendez-vous sur la documentation du composant Kendo UI pour Angular Calendar ici !

TimePicker & DateTimePicker – Prise en charge de la milliseconde

Enfin, avec R1 2021, l'interface utilisateur Kendo pour Angular DateTimePicker et les composants TimePicker prennent désormais en charge les millisecondes dans leurs entrées et leurs interfaces déroulantes.

Voir l'interface utilisateur Kendo pour la documentation Angular TimePicker et la documentation Angular DateTimePicker pour voir à quoi cela ressemble dans chaque composant.

Nous voulons votre avis!

Avons-nous manqué un composant angulaire ou une fonctionnalité dont vous avez besoin dans vos projets Angular? N'hésitez pas à ajouter un commentaire dans la section des commentaires ci-dessous ou à ajouter votre demande spécifique dans notre Kendo UI pour le portail de commentaires angulaires . Toutes les fonctionnalités et tous les composants ci-dessus ont été demandés par des gens comme vous, alors assurez-vous que votre voix est entendue!

Inscrivez-vous à notre webinaire Live R1 2021

Vous voulez voir ces nouvelles fonctionnalités et composants plus en détail? Vous voulez me poser, ainsi qu'à l'équipe Angular, des questions sur la version R1 2021 ou tout ce qui concerne l'interface utilisateur de Kendo pour Angular? Rejoignez-nous pour le webinaire sur la version 2021 de Kendo UI R1 2021 le jeudi 28 janvier à partir de 11h00 HE . Pour plus de détails, rendez-vous sur notre page de webinaire sur la version de l'interface utilisateur Kendo R1 2021 . Les places sont limitées, alors n’oubliez pas de prendre votre place dès aujourd'hui!

Save My Seat