Nouveautés des composants angulaires de l'interface utilisateur de Kendo avec R1 2020

La version R1 2020 de Kendo UI pour Angular est là, apportant plusieurs nouveaux composants comme la carte, l'avatar, la sélection de fichier, la case à cocher et le bouton radio. Cette version comprend également des fonctionnalités importantes telles que la virtualisation des colonnes, le glisser-déposer dans les arborescences, etc.

Une nouvelle année signifie une nouvelle version des composants Kendo UI for Angular ! Cette version apporte toute une série de nouveaux composants et de mises à jour importantes aux composants existants, alors allons droit au but et voyons ce qu'il y a de nouveau dans le pays des composants d'interface utilisateur pour Angular!

Nouveaux composants angulaires

Nouveau composant: Case à cocher [19659005] Style de l'interface utilisateur de Kendo appliqué aux cases à cocher dans un état coché, non coché et désactivé  » title= »Kendo UI for Angular Checkbox »/>

Vous avez peut-être déjà utilisé des cases à cocher avec l'interface utilisateur de Kendo pour Angular, mais jusqu'à présent, il s'agissait simplement d'appliquer des classes CSS. Avec la version R1 2020, l'équipe de l'interface utilisateur de Kendo a mis au point une directive angulaire qui peut être appliquée à l'élément HTML de case à cocher natif. Cela fournit non seulement le style associé à votre thème d'interface utilisateur Kendo préféré (par défaut, Bootstrap ou Material, etc.), mais garantit également que cette case à cocher améliore simplement ce que le cadre angulaire fournit déjà hors de la boîte.

à la page de démonstration Kendo UI for Angular Checkbox Component pour voir comment ajouter ce composant à vos applications dès aujourd'hui!

Nouveau composant: bouton radio

Comme le composant case à cocher ci-dessus, l'équipe Kendo UI for Angular a élaboré une directive pour aider à appliquer un style cohérent à tous les niveaux avec toute application angulaire écrite avec l'interface Kendo UI for Angular. Comme les boutons radio et les cases à cocher font tous partie intégrante de la création de formulaires, ces deux composants permettent de garantir que tous les aspects d'un formulaire peuvent être créés avec Kendo UI for Angular.

Pour plus d'informations, vous pouvez passer à le Kendo Interface utilisateur pour la section des documents sur les boutons radio angulaires !

Nouveau composant: Avatar

[19659007] Les avatars représentent beaucoup de choses dans les applications d'aujourd'hui; des images de profil dans les médias sociaux, des têtes de chat sur les plateformes de messagerie – même des icônes. Avec l'interface utilisateur de Kendo pour Angular Avatar, les développeurs de composants peuvent facilement ajouter une manière élégante de représenter des personnes ou des entités dans votre application en définissant une image, des icônes ou en utilisant des initiales (par exemple, «CB» en utilisant mes initiales). La forme de ces éléments peut être définie comme un carré, un cercle ou une forme générale arrondie via une option de configuration rapide.

Pour voir à quel point il est facile d'utiliser le composant Avatar angulaire dans vos applications aujourd'hui, consultez l'interface utilisateur de Kendo pour les documents Angular Avatar .

Nouveau composant: carte

Le widget Kendo UI for Angular Card est un élément de mise en page supplémentaire pour aider les développeurs à configurer des conceptions d'application belles et modernes. Popularisé avec Bootstrap et Material Design, ce composant de disposition peut être utilisé seul ou en tant que partie d'un modèle pour d'autres composants afin de créer une expérience utilisateur convaincante. Dans le cadre de l'implémentation, le composant propose des sections propres et définies comme l'en-tête et le contenu, ainsi que la possibilité de définir des actions de carte via des boutons qui peuvent être personnalisés pour répondre à vos besoins d'interaction.

Pour voir comment implémenter ce nouveau Composant de carte, vous pouvez vous référer à la page Démos et documents de carte ici .

Nouveau composant: Chip & Chip List

L'interface utilisateur de Kendo pour le composant Angular Chip couvre un style d'éléments popularisés dans Material Design et conception d'applications mobiles. Le composant se compose d'un conteneur (souvent sous forme de «pilule»), de texte, d'une image facultative et d'une icône de suppression. Cela peut être utilisé comme une partie d'un composant qui fournit plusieurs entrées ou un moyen rapide de répertorier les options prédéfinies qui peuvent être sélectionnées par l'utilisateur final.

En tant que partie créant le composant Angular Chip l'interface utilisateur de Kendo pour L'équipe angulaire a également présenté la liste de puces qui donne aux développeurs un moyen facile de fournir une liste de puces. Le composant fournit également une fonction de sélection, permettant aux développeurs de maintenir facilement l'ensemble des puces actuellement sélectionnées.

Nouveau composant: sélection de fichier

Comme le composant de téléchargement, le composant Kendo UI for Angular File Select offre à vos utilisateurs finaux un moyen intuitif de sélectionner un ou plusieurs fichiers à partir de leur machine locale. L'aspect unique du composant File Select est qu'il permet à un développeur d'avoir un contrôle total sur le moment et la façon dont le fichier est téléchargé.

Le FileSelect est livré avec de nombreuses options de configuration prêtes à l'emploi, mais si vous avez besoin de plus le contrôle du comportement et l'apparence du composant prend entièrement en charge les modèles à l'aide des modèles de structure angulaire. De plus, comme tous nos composants d'interface utilisateur qui ciblent les formulaires, le composant FileSelect s'intègre aux formulaires réactifs!

Pour plus d'informations, vous pouvez consulter la section de documentation FileSelect .

Nouveau composant: étiquette flottante [19659025]

Il peut être nécessaire de l'étiqueter comme «nouveau». L'étiquette flottante est devenue presque un aspect standard des éléments d'entrée dans la conception Web d'aujourd'hui. Bien que des étiquettes flottantes aient existé dans l'interface utilisateur de Kendo pour les composants Angular U eux-mêmes, ce composant autonome donne aux développeurs le pouvoir d'implémenter des étiquettes flottantes dans leurs propres éléments d'entrée ou d'améliorer d'autres interfaces utilisateur Kendo pour Angular UI. Vous avez peut-être déjà vu cela appelé le composant TextBoxContainer dans notre documentation, mais nous pensons que l'appeler le composant "Floating Label" semble beaucoup mieux:)

Consultez le documents mis à jour (dans une zone beaucoup plus accessible) pour le composant Floating Label ici .

Fonctionnalités étendues des composants

TreeView – Drag & Drop Nodes

Cette fonctionnalité a été l'une des fonctionnalités les plus demandées dans Kendo UI pour Angular et je suis heureux d'annoncer que nous avons ajouté des capacités de glisser-déposer dans notre Angular TreeView! Avec la nouvelle fonctionnalité Drag & Drop des TreeView, les utilisateurs finaux peuvent faire glisser des nœuds vers d'autres zones de TreeView, y compris des éléments du même niveau de hiérarchie ainsi que des nœuds à différents niveaux de la hiérarchie. Si le nœud a des enfants, ils seront également traînés. Si vous avez plusieurs TreeViews sur la même page, vous pouvez même glisser-déposer des nœuds entre les deux composants différents!

Consultez les documents TreeView Drag & Drop pour plus d'informations .

Télécharger – Prise en charge de la segmentation

Lors du téléchargement de fichiers, une approche traditionnelle consiste à prendre l'intégralité du fichier et à commencer à diffuser le fichier du début à la fin. Ceci est malheureusement un peu fragile car les connexions réseau peuvent être interrompues. C'est là que les morceaux entrent en jeu, divisant les fichiers en morceaux plus petits (morceaux) et téléchargeant ces morceaux dans une séquence. Avec cette approche, les téléchargements peuvent facilement être repris une fois la connexion réseau rétablie et peuvent également aider à suspendre et à reprendre les téléchargements. Avec R1 2020, l'interface utilisateur de Kendo pour le téléchargement angulaire prend désormais en charge la segmentation de tout fichier sélectionné!

Rendez-vous sur la documentation du composant de téléchargement pour des exemples de la façon de commencer à utiliser cette nouvelle fonctionnalité.

Grille – Virtualisation des colonnes

Avec la virtualisation des colonnes dans l'interface utilisateur de Kendo pour la grille angulaire les développeurs peuvent lancer comme autant de colonnes que nécessaire dans la grille sans se soucier de la dégradation des performances. Combinez cela avec la virtualisation de lignes préexistante et la grille de données angulaire peut prendre en charge d'énormes ensembles de données avec d'innombrables lignes et colonnes. Comme vous pouvez le voir dans le GIF animé ci-dessus, cette opération est fluide et l'interface utilisateur de Kendo pour Angular Grid ne casse pas!

Grille – Améliorations des performances

Grâce au travail d'implémentation de la virtualisation des colonnes, l'interface utilisateur de Kendo pour l'équipe angulaire a examiné le code source de la grille angulaire et a mis en œuvre divers ajustements améliorant les performances pour s'assurer que la version R1 2020 de l'interface utilisateur de Kendo pour la grille angulaire est la plus rapide à ce jour. Cela inclut la charge initiale du composant et de ses données, ainsi que des interactions comme le défilement.

Éditeur – Navigation au clavier

Avec la nouvelle fonctionnalité de navigation au clavier, l'interface utilisateur de Kendo pour Angular Editor peut maintenant être facilement utilisable avec juste un clavier. Idéal pour les scénarios où la productivité peut être améliorée en utilisant simplement le clavier ou en améliorant l'accessibilité.

Editor – Accessibility

L'interface utilisateur de Kendo pour Angular Editor est désormais livrée avec une prise en charge intégrée pour l'accessibilité prête à l'emploi. . Sans options de configuration supplémentaires, les développeurs peuvent compter sur l'éditeur pour se conformer aux normes Section 508, WCAG 2.1 et WAI-ARIA.

Nouveaux exemples d'applications

Financial Dashboard App

Au cours des deux derniers mois, l'interface utilisateur Kendo pour Angular a élaboré un exemple d'application, axé sur la création d'un tableau de bord de portefeuille d'actions , qui présente la puissance de l'interface utilisateur de Kendo pour les composants angulaires. Cela comprend notre graphique boursier, une grille de données avec des données en direct et changeantes, ainsi que divers éléments de navigation et d'autres composants de visualisation des données. Nous pensons que c'est un excellent moyen d'apprendre l'interface utilisateur de Kendo pour les composants angulaires et un bon aperçu d'une application plus réelle.

N'hésitez pas à consulter l'application Angular Stocks Portfolio et voir l'application en action! Pour le code source complet, vous pouvez vous référer à ce dépôt GitHub .

Grid & Chart Integration

Une demande courante que nous recevons avec toutes les versions de l'interface utilisateur de Kendo est de présenter les intégrations entre le package de visualisation de données et le Grille de données. Bien que cela nécessite un peu de code pour l'implémenter, il est certainement très réalisable et personnalisable aussi! Nous avons décidé de mettre en place une approche pour la façon dont ces deux composants peuvent fonctionner ensemble. Plus précisément, nous avons créé un exemple de projet qui montre une mise à jour du graphique d'interface utilisateur Kendo basée sur la sélection de cellules dans une grille d'interface utilisateur Kendo.

Intéressé par la façon dont tout cela fonctionne? Rendez-vous sur cette page GitHub pour obtenir le code source du projet et plonger dans le code!

Avez-vous des commentaires?

Avons-nous manqué votre composant ou fonctionnalité préférée avec cette version? Avez-vous eu l'occasion d'essayer un nouveau composant et souhaitez-vous nous faire part de vos commentaires sur ce que nous pouvons ajouter? N'hésitez pas à commenter dans la section des commentaires ci-dessous, ou rendez-vous sur notre portail de rétroaction publique et ajoutez-y vos idées! La plupart des éléments que nous avons ajoutés avec R1 2020 provenaient directement d'éléments affichés dans notre portail de commentaires, c'est donc un excellent moyen de s'assurer que nous ajoutons un composant dont vous avez besoin!

Rejoignez-nous pour un webinaire en direct!

Découvrez les fonctionnalités que je viens de mentionner ci-dessus en direct et en action? Rejoignez-moi et mes collègues sur l'équipe Kendo UI for Angular lors de notre webinaire en direct le le jeudi 23 janvier à 11 h 00 HE ! Nous couvrirons l'ensemble de l'interface utilisateur de Kendo tout au long de la journée, mais la section spécifique à Angular donnera le coup d'envoi à 11h00! Les places sont limitées, alors rendez-vous sur la page du webinaire pour vous inscrire aujourd'hui et réserver votre place !