Nouveautés de KendoReact avec R2 2020

La version R2 2020 de KendoReact est arrivée! Cette version couvre une tonne de nouveaux composants et fonctionnalités dans les composants existants, ainsi qu'une nouvelle ressource pour aider les développeurs de React à créer des formulaires magnifiques. Plongeons-nous et passons en revue les nouveautés de KendoReact avec R2 2020! un élément de formulaire. Il y a des tonnes de choses à penser, comme le bon déroulement du formulaire, les types d'entrées à utiliser et la façon de gérer la validation qui doivent être pris en considération.

Les nouvelles directives de conception de KendoReact fournissent les meilleures pratiques pour la création de formulaires dans React et va au-delà des composants d'interface utilisateur à utiliser. Nous pensons que tous les développeurs React peuvent tirer parti de ce guide, quelle que soit la bibliothèque de composants d'interface utilisateur qu'ils utilisent, et nous espérons que vous le trouverez utile!

Voici un lien rapide vers les directives de conception de formulaire de KendoReact .

Nouveaux composants

Nouveau composant: ListView

Le nouveau KendoReact ListView est perfe ct pour tout scénario qui nécessite une liste déroulante d'éléments. Avec un pageur intégré et un défilement sans fin, la liste des éléments de données peut être assez longue tout en conservant le haut niveau de performances que les développeurs attendent de KendoReact. De plus, ce composant peut facilement être intégré à d'autres composants de KendoReact comme le filtre pour aider à filtrer les données dans le Listview.

Pour un aperçu complet de ce que vous pouvez faire avec le KendoReact ListView, rendez-vous sur cette session de documentation et de démonstration .

Nouveau composant: barre de progression et barre de progression de morceau

Ces nouveaux ajouts à la bibliothèque de l'interface utilisateur de KendoReact aident à indiquer la progression dans vos applications React. Les deux barres de progression permettent de montrer la distance d'un processus particulier (disons, une plage de 0 à 100) et les deux peuvent être affichées horizontalement ou mode vertical.

La principale différence entre les deux composants (comme le montre l'image ci-dessus) est que la barre de progression est une barre unifiée, tandis que la barre de progression en morceaux est divisée en blocs qui rempliront un bloc à la fois. [19659010] Pour consulter des exemples d'utilisation de la barre de progression, vous pouvez consulter ces démos et la barre de progression Chunk a ses exemples ici .

Nouveau composant: Stepper [19659018] KendoReact Stepper Component "title =" KendoReact Stepper Component "/>

Le nouveau composant Stepper est une manière moderne et élégante de montrer la progression à travers une séquence d'étapes ou de workflows. Le composant a un style intégré pour toutes les vues passées et terminées, la vue actuelle et les vues futures. Chaque étape a son propre modèle de contenu, ce qui signifie que vous avez un contrôle total sur ce qui doit être affiché lorsque vos utilisateurs parcourent votre flux de travail prédéfini une étape à la fois.

Le Stepper peut également être utilisé pour la navigation et l'interaction avec les points forts des composants les animations élégantes qui font vraiment apparaître ce composant sur une page.

Pour jouer avec le nouveau composant KendoReact Stepper, consultez ces démos .

Nouveaux composants: Label, Floating Label, Hint, et erreur

Avec R2 2020, nous avons ajouté plusieurs types de composants Label à KendoReact, qui comprend:

• Label – un composant autonome pour aide à l'implémentation d'étiquettes dans React
• Étiquettes flottantes – popularisées par Material Design, les étiquettes flottantes sont désormais présentées dans plusieurs langages de conception et sont devenues un moyen populaire de mettre en évidence les espaces réservés et de les faire passer à labe ls. Dans cet esprit, KendoReact a désormais un composant générique d'étiquette flottante qui peut être intégré à n'importe quel élément d'entrée.
• Conseil et erreur – Ces composants aident à fournir un style et des images appropriés à une étiquette chaque fois qu'un conseil ou une erreur devrait être affiché.

Pour une liste complète des documents et des démos pour tous les composants d'étiquette, vous pouvez cliquer sur ce lien .

Nouveaux composants: bouton radio et groupe radio

Les boutons radio, ou un groupe radio plus important, sont des éléments HTML très populaires pour sélectionner une valeur dans une liste d'options. Avec R2 2020, nous introduisons le bouton radio KendoReact et le groupe radio afin de garantir que la bibliothèque KendoReact peut répondre à toutes les exigences relatives à la création de formulaires dans React. Ces composants sont également livrés avec le même style que tous les autres composants KendoReact pour aider à maintenir une apparence et une convivialité communes à l'ensemble de votre ensemble.

Pour voir le bouton radio KendoReact en action, consultez ce lien et voici un lien rapide vers le composant KendoReact Radio Group .

Nouveau composant: Range Slider

S'étendant sur le composant Slider déjà existant, le nouveau KendoReact Range Slider peut être utilisé pour tout scénario nécessitant qu'un utilisateur sélectionne une plage de valeurs (plutôt qu'une seule valeur). Grâce à sa conception intuitive, la définition du début, de la fin ou de l'étendue d'une plage peut être facilement modifiée à l'aide de deux poignées de glissement.

Pour voir des exemples du curseur de plage KendoReact en action, passez directement à cette page. section de la documentation de KendoReact .

Nouveau composant: Forms – FormElement & FieldWrapper

Continuant à s'assurer que les développeurs de React utilisant KendoReact ont tout ce dont ils ont besoin pour créer des formulaires, les composants FormElement et FieldWrapper développent le composant déjà puissant de KendoReact Form.

Bien que ceux-ci soient un peu spécifiques aux gens qui créent des formulaires, à un niveau élevé, FormElement représente l'élément HTML Form lorsque la configuration d'un formulaire KendoReact et le FieldWrapper est conçu pour encapsuler une seule collection d'un éditeur de champ (alias l'élément d'entrée), d'une étiquette, d'un indice et de composants d'erreur pour aider à la structuration g et styliser chaque champ individuel.

Ces composants font tous partie du package KendoReact Form, alors passez à la section Formulaires et démos pour voir comment vous pouvez commencer à utiliser le composant Form dès aujourd'hui .

Fonctionnalités étendues des composants

TreeList – Virtualisation des lignes

La virtualisation est l'une des plus importantes fonctionnalités d'amélioration de performances de tous Composant d'interface utilisateur, et avec R2 2020, je suis ravi de révéler que nous avons ajouté la virtualisation de la ligne avec KendoReact TreeList. Combinez cela avec la fonctionnalité de virtualisation de colonnes existante et vous pouvez lancer d'énormes ensembles de données sur la TreeList tout en conservant une expérience de défilement fluide.

Une note à noter ici est que les données liées à la KendoReact TreeList devront être chargées sur le client.

Pour voir la KendoReact TreeList avec virtualisation des lignes, consultez cette page de documentation et de démonstration . [1965901212] ] TreeList – Pager

Une partie centrale de la grille KendoReact, qui couvre de nombreuses fonctionnalités similaires à TreeList, le pager est un fonctionnalité importante dans tout composant lié aux données. C'est pourquoi nous avons ajouté un pager à la liste KendoReact TreeList avec R2 2020. Il existe désormais encore plus d'options pour naviguer dans les données trouvées dans la liste TreeList, garantissant que le composant peut couvrir tous les scénarios souhaités.

Voici une démo rapide présentant le KendoReact TreeList avec la pagination activée .

TreeList – Drag & Drop

Voici une démonstration de la fonction glisser-déposer de la KendoReact TreeList en action .

TreeList – Aggregates

Avec la nouvelle fonctionnalité d'agrégats, KendoReact TreeList permettra aux développeurs de React d'afficher des informations agrégées basées sur les données lié à la TreeList. Cela inclut des calculs comme la somme, le nombre et d'autres, ainsi que la possibilité d'injecter votre propre rendu.

Pour voir la KendoReact TreeList avec les agrégats activés, accédez à cette page de documentation et de démonstration

.

TreeList – Menu Colonne

Le menu Colonne du TreeList KendoReact vous permet d'afficher un menu avec des actions rapides pour chaque colonne de la TreeList. Les options disponibles dans le menu des colonnes peuvent être personnalisées et cette fonctionnalité peut être utilisée pour fournir des options de filtrage ou pour afficher et masquer certaines colonnes.

Pour en savoir plus sur le menu des colonnes dans la liste arborescente de KendoReact, consultez cette page à droite ici .

TreeList – Exporter vers PDF et Excel

Avec R2 2020, KendoReact TreeList arbore désormais la possibilité d'exporter le contenu du composant au format PDF ou Excel! Cette fonctionnalité permet aux utilisateurs d'exporter le contenu de la TreeList dans l'un ou l'autre format de fichier en un seul clic. Le contenu exporté peut également être personnalisé pour ajouter des informations supplémentaires ou modifier

Pour voir comment exporter la KendoReact TreeList vers Excel, vous pouvez vous référer à cette démo tandis que l'exportation PDF de KendoReact TreeList est mise en évidence ici .

Grille – Filtre de case à cocher

Avec la nouvelle option Filtre de case à cocher dans la grille de données de KendoReact, toutes les valeurs uniques disponibles dans une colonne seront affiché dans un menu de filtre. À partir de cela, les utilisateurs finaux peuvent sélectionner les valeurs qu'ils souhaitent voir ou ne pas voir dans la grille.

Pour voir comment configurer le filtrage des cases à cocher dans vos propres grilles KendoReact, rendez-vous sur cette démo .

Scheduler – Rendu personnalisé d'en-tête et pied de page

En continuant d'étendre les rendus personnalisés disponibles dans le planificateur KendoReact avec R2 2020, le composant peut recevoir un rendu personnalisé pour les éléments d'en-tête et de pied de page du planificateur. Cela permet aux développeurs de prendre encore plus le contrôle de l'aspect et de la convivialité du planificateur.

Pour voir comment configurer des rendus personnalisés pour l'en-tête et le pied de page du planificateur, consultez cette section de démonstration . [19659012] Formulaire – Validation au niveau du formulaire, FieldArray

Sur la base des commentaires des utilisateurs de KendoReact travaillant avec le composant Formulaire KendoReact, nous avons ajouté des fonctionnalités supplémentaires à ce outil déjà puissant pour la création de formulaires. Avec R2 2020, nous avons introduit la validation au niveau du formulaire pour aider à valider l'intégralité du formulaire lorsque le bouton d'envoi est enfoncé et introduit le FieldArray pour faciliter les manipulations courantes de tableaux et de listes dans un élément Form.

Pour plus d'informations sur ces composants et sur la manière dont ils peuvent tous s'associer pour aider à créer des formulaires dans React, rendez-vous sur la section de démonstration de KendoReact Form .

Drawer – Custom Rende ring

Avec la nouvelle fonctionnalité de rendu personnalisé de KendoReact Drawer, les développeurs peuvent transmettre des rendus personnalisés pour les éléments du tiroir. Cela permet des mises en page personnalisées dans chaque élément, garantissant que le tiroir peut s'adapter à toutes les exigences de l'application.

Rendez-vous sur cette page de documentation et de démonstration pour le tiroir KendoReact pour en savoir plus .

Nouvel échantillon Application: application Coffee Warehouse

Les utilisateurs nous demandent souvent de voir davantage de composants de l'interface utilisateur KendoReact fonctionner ensemble au sein d'une application. nous avons déjà une longue liste d'exemples d'applications, avec R2 2020, nous avons préparé une nouvelle application React et elle fait chaud aux presses!

L'application Coffee Warehouse présente les composants de l'interface utilisateur de KendoReact comme le tiroir, la grille, les graphiques, etc. un seul tableau de bord. Si vous cherchez une ressource pédagogique pour utiliser KendoReact dans des applications, ou un point de départ pour vos propres tableaux de bord, je vous recommande vivement de vous rendre sur le Coffee Warehou en direct se application ou consultez le code source de l'application ici sur GitHub .

Avez-vous des commentaires?

Avons-nous oublié un composant ou une fonctionnalité particulière que vous aimeriez voir ajoutée à KendoReact? Faites-le nous savoir en soumettant vos commentaires dans le portail de commentaires public de KendoReact !

Rejoignez-nous pour un webinaire en direct!

Si vous voulez voir ce que nous évoqué dans ce billet de blog en direct et en action, alors vous devriez vous joindre à moi-même et à mes collègues Developer Advocate pour notre webinaire en direct sur l'interface utilisateur de Kendo le mardi 19 mai à 11h00 HE! Nous couvrons tous les produits du bundle Kendo UI, et la session spécifique KendoReact commence à 12 h 00 HE. 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!