Fermer

mai 14, 2020

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


La version R2 2020 de l'interface utilisateur de Kendo pour les composants angulaires est arrivée! Cette version est livrée avec de nouveaux composants, la version RTM du composant TreeList et une nouvelle ressource pour aider tous les développeurs Angular à créer des formulaires magnifiques. Plongeons-nous et vérifions les plus récents et les meilleurs dans R2 2020.

Forms Guideline

Kendo UI for Angular Form Guidelines "title =" Kendo UI for Angular Form Guidelines "/></p><p> La création de formulaires est plus que il suffit d'ajouter des composants d'interface utilisateur à un élément de formulaire. Il y a tellement de choses à garder à l'esprit. La disposition générale du formulaire, comment gérer la validation, que faire avec des formulaires plus grands ou comment décomposer les éléments en groupes logiques. [19659004] Dans cette optique, l'équipe Kendo UI for Angular a mis au point un nouveau type de ressource: les directives de conception de formulaire. Il s'agit d'une ressource dédiée pour créer la meilleure expérience utilisateur possible autour des formulaires, quels que soient les composants de l'interface utilisateur que vous utilisez. l'itération de ces lignes directrices m'a certainement beaucoup appris personnellement, et nous espérons que tous les développeurs Angular les trouveront utiles!</p><p> Commencez à créer de meilleures formes en <a href= en suivant les instructions de l'interface utilisateur de Kendo pour les formulaires angulaires !

Nouveaux composants angulaires

Nouveau composant: Stepper

Interface utilisateur de Kendo pour le composant Angular Stepper "title =" Interface Kendo pour Composant pas à pas angulaire "/></p><p> Avec R2 2020, nous introduisons l'interface utilisateur de Kendo pour le composant pas à pas angulaire. Ce nouveau composant fournit aux utilisateurs une liste d'étapes qui doivent être suivies du début à la fin dans un ordre logique. Le composant a construit -dans le style des étapes finies, actuelles et inachevées, et le passage de l'une à l'autre met en évidence le mouvement avec de belles animations. L'interface utilisateur de Kendo pour Angular Stepper propose également des styles supplémentaires pour les étapes valides ou invalides, offrant aux développeurs d'appliquer la logique de validation pour</p><p> Le contenu de chaque étape est entièrement contrôlé par le développeur, ce qui signifie que l'interface utilisateur de Kendo pour Angular Stepper est extrêmement flexible et peut être utilisée dans un large éventail de scénarios.</p><p> Pour un examen plus approfondi de <a href= l'interface utilisateur de Kendo pour le composant Angular Stepper consultez cette section de documentation et de démonstration !

Nouveau composant: Zone de dépôt externe

Interface utilisateur de Kendo pour le composant Zone de dépôt externe angulaire "title =" Kendo UI for Angular External Drop Zone component "/></p><p> Un élément de rétroaction que nous avons trouvé intéressant du composant Kendo UI for Angular Upload concernait un composant autonome pour permettre la suppression de fichiers d'un système de fichiers dans un composant Angular. C'est pourquoi nous introduisons le composant External Drop Zone qui permet aux développeurs de mettre en évidence une zone (avec un style comme l'image ci-dessus) de leur application où les utilisateurs finaux peuvent faire glisser des fichiers de leur système de fichiers et les déposer dans le composant.</p><p> La zone de dépôt externe est également disponible en tant que directive qui active simplement la fonctionnalité glisser-déposer sur l'élément auquel vous appliquez la directive, mais n'applique pas le style.</p><p> Pour plus d'informations sur la façon de commencer à utiliser <a href= le Kendo UI pour le composant Angular External Drop Zone se référer à cette page de documentation .

Nouveau composant: Pager

Kendo UI pour le composant Angular Pager "title =" Kendo UI pour le composant Angular Pager "/></p><p> Auparavant uniquement un composant intégré à l'intérieur de notre grille de données, avec R2 2020, nous introduisons un composant de pager angulaire autonome. Cela permettra à toute application angulaire de fournir une expérience utilisateur autour de la pagination à travers de plus grands ensembles de données, avec des composants intégrés pour naviguer entre les pages, choisir une page spécifique et augmenter ou diminuer la taille de la page.</p><p> <a href= Consultez l'interface utilisateur de Kendo pour le composant Angular Pager en direct ici .

Nouveau composant : Label

Kendo UI for Angular Label component "title =" Kendo UI for Angular Label component "/></p><p> Pour ceux d'entre vous qui reconnaissent déjà cela comme une partie de la bibliothèque Kendo UI for Angular, auparavant Kendo UI for Angular n'a fourni qu'une directive pour les étiquettes. Cependant, nous avons réalisé que nous pouvions mieux servir les développeurs Angular en créant un composant Angular autonome. L'un des résultats de l'introduction de ce composant plutôt que d'une simple directive est qu'il permet d'afficher <em> des étiquettes facultatives </em>.</p><p> Tout cela provient du travail que nous avons fait avec les directives de formulaire, ainsi que des commentaires des clients. Ce composant permet de compléter l'interface utilisateur de Kendo pour les composants de forme angulaire, garantissant que nous proposons autant de blocs de construction pour les formulaires que possible.</p><p> <a href= Passez à l'interface utilisateur de Kendo pour le composant d'étiquette angulaire démos en cliquant ici .

Nouveaux composants: FormField, Hint et Error

Kendo UI for Angular Hint component "title =" Kendo UI for Angular Hint component "/></p><p> Parce que ces nouveaux Angular les composants sont des blocs de construction pour les formulaires, je les regroupe tous dans une seule catégorie, même s'ils sont des composants indépendants. Tous ces composants visent à permettre aux développeurs Angular de créer les meilleures formes possibles.</p><p> Le composant FormField aide à structurer les formulaires et représente un champ unique et une collection de composants liés à ce champ (étiquette, entrée, conseils, etc.).</p><div class=

Le composant Conseil angulaire permet d'afficher un message de conseil (cette petite étiquette sous une entrée) pour ce que les utilisateurs doivent être en train de taper à un élément de formulaire.

Le composant Erreur angulaire couvre spécifiquement les messages d'erreur de validation sous n'importe quel élément de formulaire.

Pour des exemples détaillés autour de ces nouveaux éléments de formulaire de Kendo UI pour Angular, vous pouvez vous référer à cette section de documentation .

Fonctionnalités étendues des composants

TreeList – RTM Release

Kendo UI for Angular TreeList component " title = "Kendo UI for Angular TreeList component" /></p><p> Dans le cadre de R2 2020, Kendo UI for Angular TreeList est officiellement publié en tant que RTM! Auparavant disponible en version bêta, cette nouvelle version inclut plusieurs de nos</p><p> Dans le cadre de cette version RTM, nous avons inclus:</p><ul><li><strong> Virtualisation </strong></li><li><strong> Sélection </strong></li><li><strong> Navigation du clavier </strong></li><li><strong> Conformité à l'accessibilité </strong></li></ul><p> ] Rendez-vous sur <a href= les documents et démos TreeList pour voir les nouvelles fonctionnalités en action!

TreeView – Bouton Charger plus

Interface utilisateur de Kendo pour le composant Angular TreeView avec bouton Charger plus "title =" Kendo UI pour Angular TreeView c omponent with load more button "/></p><p> L'interface utilisateur de Kendo pour Angular TreeView est souvent responsable du chargement de milliers de nœuds en une seule fois. Le simple rendu du code HTML pour cette quantité de données peut être un peu pénible dans n'importe quel navigateur.</p><p> Pour faciliter les scénarios qui nécessitent une grande quantité de données dans un nœud particulier, nous introduisons le bouton «Charger plus» qui s'affichera dans une liste de nœuds. Cliquez sur ce bouton pour charger un ensemble de nœuds supplémentaires (prédéterminés via une option de configuration) dans ce niveau de hiérarchie. Cela introduit un mécanisme similaire à la pagination dans les nœuds de TreeView pour aider à charger les données à la demande et améliorer les performances de TreeView sur toute la carte.</p><p> <a href= Pour voir comment vous pouvez tirer parti de l'interface utilisateur de Kendo pour Angular TreeView Load Plus de bouton, consultez cette page .

Grille – Persistance Développer et réduire les lignes d'état de détail

Interface utilisateur de Kendo pour la grille angulaire avec persistance de l'état de développement et de réduction "title =" Interface utilisateur de Kendo pour la grille angulaire avec développement et réduction. persistance de l'état "/></p><p> Avec R2 2020, l'interface utilisateur de Kendo pour la grille angulaire peut conserver l'état de développement et de réduction des lignes de détail lorsque la hiérarchie a été ajoutée. Cette persistance peut aider à conserver les éléments correctement développés ou réduits lorsque les utilisateurs travaillent avec des opérations de données dans l'interface utilisateur de Kendo pour la grille angulaire comme la pagination, le tri, le filtrage et le regroupement.</p><p> <a href= Découvrez la démonstration persistante de l'état de développement et de réduction des lignes de détail ici .

Téléchargement – Mise à jour Styling

Kendo UI pour Angular Upload Design mis à jour "title =" Kendo UI pour Angular Upload Design mis à jour "/></p><p> L'interface utilisateur de Kendo pour Angular Upload a également été séduit par cette version avec un design mis à jour. Cette mise à jour comprend des mises à jour des icônes de fichiers qui correspondent au type du fichier sélectionné parmi d'autres modifications à l'expérience utilisateur globale.</p><p> <a href= La conception mise à jour du composant Kendo UI for Angular Upload peut être vu ici .

Interface conversationnelle – Prise en charge de l'API DialogFlow v2

Interface utilisateur Kendo pour l'interface conversationnelle angulaire avec l'API DialogFlow v2 "title =" Interface utilisateur Kendo pour l'interface utilisateur conversationnelle angulaire avec l'API DialogFlow v2 "/></p><p> DialogFlow, l'un des backends les plus populaires pour les chatbots, a publié une version officielle v2 de son API. Cela a introduit quelques changements et pour nous assurer que nous sommes compatibles avec la version R2 2020, nous avons mis à jour nos démos présentant l'intégration avec DialogFlow pour s'assurer qu'il cela ne devrait pas poser de problème de travailler avec la nouvelle version de leur API.</p><p> <a href= Pour approfondir DialogFlow et l'interface utilisateur de Kendo pour Angular Conversational UI, cliquez ici .

Have Some Feedbac k?

C'est tout pour la version R2 2020! Avons-nous manqué un composant ou une fonctionnalité en particulier que vous attendiez? Faites-le nous savoir en soumettant vos commentaires dans notre portail public de commentaires ! Vous pouvez rechercher d'autres éléments de rétroaction et voir si quelqu'un a soumis une demande similaire, puis voter et commenter, ou soumettre vos propres commentaires si cela n'a pas été demandé auparavant.

Rejoignez-nous pour un webinaire en direct

Si vous voulez voir tout ce que je viens de mentionner (et plus) en direct et en action, vous devriez vous joindre à moi et à mes collègues Developer Advocate pour notre webinaire en direct sur l'interface utilisateur de Kendo le mardi 19 mai à 11 h 00 HE. . Nous couvrons tous les produits du bundle Kendo UI, avec la session Angular commençant à 11h00 AM ET. Nous avons un nombre limité de places pour ce webinaire, alors assurez-vous de vous y rendre et de vous inscrire pour réserver votre place dès aujourd'hui!

Le meilleur outil 2023 pour ta croissance Instagram !



Source link

Revenir vers le haut