Nouveautés de KendoReact avec R2 2021

R2 2021 signifie: TypeScript et support équivalent pour nos échantillons et démos, de nouveaux composants tels que Skeleton et Circular Gauge, et une série d'améliorations sur plusieurs composants existants tels que Data Grid et Gantt.

May est là et cela signifie une autre version passionnante de KendoReact. R2 2021 apporte de nouveaux composants tels que la jauge circulaire et certaines fonctionnalités très demandées dans un vaste ensemble de composants d'interface utilisateur existants. Ne traînons pas les choses et passons directement aux nouveautés de KendoReact avec R2 2021.

Hooks et démos de TypeScript

L'une des plus grandes remarques générales autour de R2 2021 est que les documents et démos de KendoReact incluent maintenant des démos équivalentes pour les hooks ainsi que TypeScript pour la plupart de nos exemples de code. Nous étendons activement cela à une couverture complète au moment où nous parlons, mais cela signifie que pour presque n'importe quel échantillon donné, vous pouvez maintenant choisir:

• Composants de classe utilisant JavaScript
• Composants de classe utilisant TypeScript
• Composants fonctionnels et hooks utilisant JavaScript [19659006] Composants de fonction et hooks utilisant TypeScript

Comme mentionné, nous ne sommes pas encore tout à fait à 100% de couverture pour tous les échantillons, mais nous travaillons activement à cela et, selon le moment où vous lisez ceci, nous pouvons déjà être

Ce sont toutes des sélections que vous pouvez faire démo par démo, garantissant que quelle que soit l'approche que vous adoptez pour créer des applications React aujourd'hui, KendoReact vous soutient avec des échantillons à jour. [19659010] Le but de tout cet effort est de faciliter le choix de votre approche préférée et de continuer à copier et coller ou à apprendre à partir de n'importe lequel des échantillons de KendoReact.

Nouveaux composants

Nouveau composant: React External Drop Zone [19659014] Un grand rectangle a une flèche vers le haut d'une ligne horizontale. Il dit «Faites glisser et déposez les fichiers ici pour les télécharger. Seuls les fichiers JPEG et PNG sont autorisés. ' Une boîte séparée contient un bouton Sélectionner les fichiers et un texte indiquant «Déposez les fichiers à télécharger».  » title= »KendoReact External DropZone Component – Overview »/>

Le nouveau composant React External Drop Zone offre une nouvelle expérience utilisateur autour du glisser-déposer de fichiers dans une application React. Ce qu'un développeur fait avec le fichier après qu'il a été déposé dans ce composant dépend entièrement du développeur, mais cela est souvent combiné avec une sorte de processus de téléchargement. Ce composant peut, bien entendu, être entièrement personnalisé pour s'adapter à toutes les exigences de conception.

Voici un lien direct vers les nouvelles démos du composant KendoReact External Drop Zone .

Nouveau composant: React Skeleton

Une tendance dans de nombreuses expériences utilisateur modernes est d'augmenter les performances perçues et de réduire les surprises globales lors du chargement d'une page en ayant des éléments d'espace réservé représentant la mise en page finale de la page être affiché avant que le chargement de tout ne soit terminé. C'est là que le nouveau composant React Skeleton entre en jeu, car il fournit plusieurs formes (y compris la ligne, le rectangle et le cercle) qui peuvent être utilisées pour créer tout type de structures d'espace réservé et les afficher pendant le chargement de données supplémentaires ou HTML.

Pour vous inspirer de l'utilisation de ce nouveau composant, consultez les Démos du composant KendoReact Skeleton .

Nouveau composant: React Circular Gauge

Pour compléter la liste des nouveaux composants, nous avons un composant rond: la nouvelle jauge circulaire React. Avec ce nouveau composant, nous étoffons les jauges disponibles que KendoReact a à disposition des développeurs en fournissant une jauge entièrement circulaire. Ce nouveau composant prend en charge les graduations pour représenter les valeurs ainsi que la possibilité d'afficher du texte au centre et bien plus encore.

Pour plus d'informations, rendez-vous sur la documentation et démos du composant KendoReact Circular Gauge .

Fonctionnalités des composants étendus

React Gantt: Personnaliser les en-têtes de colonnes

Commençant par de nouvelles fonctionnalités pour les composants existants, le composant KendoReact Gantt prend désormais en charge la personnalisation de ses en-têtes de colonne, permettant aux développeurs de fournir un moteur de rendu personnalisé pour l'en-tête de n'importe quelle colonne pour vous assurer qu'il peut être un ajustement naturel pour toutes les exigences de conception.

Consultez cet article de KendoReact Gantt GanttHeaderCellProps API pour plus d'informations.

React Gantt: Year View

] Le composant React Gantt a également étendu son ensemble de vues existant en ajoutant la nouvelle fonction de vue annuelle. Cela permet aux utilisateurs de voir toutes les tâches de l'année entière. Il peut s'agir de la vue par défaut du Gantt ou d'une partie d'une liste de vues existantes (jour, semaine, mois, etc.) parmi lesquelles les utilisateurs peuvent sélectionner.

Pour voir la fonction de vue annuelle du composant React Gantt , vous pouvez vous référer à cette démo et sélectionner "Year" dans la liste déroulante dans le coin supérieur droit.

React Grid – Range Selection

Avec R2 2021, la grille KendoReact ajoute de nombreuses fonctionnalités, y compris la nouvelle capacité de sélection de plage. Cela permet aux utilisateurs de sélectionner une plage de cellules en mettant en surbrillance une zone en faisant glisser leur souris pour contrôler la sélection.

Allez à la démo de sélection de la grille de KendoReact pour voir cela en action.

React Grid: espaces réservés lors de la virtualisation

Alors que la grille de données KendoReact est extrêmement rapide à rendre, il peut y avoir scénarios dans lesquels les utilisateurs font défiler le contenu avant que le réseau n'ait eu la chance de rattraper son retard, et la grille peut simplement afficher des cellules vides. Avec R2 2021, le React Data Table peut désormais afficher un élément d'espace réservé qui indique à l'utilisateur que des données arrivent.

Pour voir comment vous pouvez tirer parti de ces espaces réservés dans votre propre implémentation de React Data Grid, consultez le Démos de virtualisation de grille KendoReact .

React Grid: Développer et réduire tous les groupes

En plus de la liste des améliorations de qualité de vie avec la grille de données KendoReact, le composant comprend désormais un fonction pour développer et réduire tous les groupes dans la table de données. Cela peut être fait par l'utilisateur en interagissant avec un élément dans la grille elle-même, mais peut également être fait par programme pour les scénarios qui nécessitent ce type d'interaction.

Consultez la démo expand and collapse all groups de KendoReact Grille de données .

Grille de réaction: état du groupe persistant pendant la pagination

[19659010] La dernière fonctionnalité que nous avons ajoutée à la grille de données KendoReact avec R2 2021 est la possibilité de conserver l'état du groupe pendant les opérations de données et la pagination, ce qui signifie que l'état réduit et étendu des groupes sera désormais conservé lorsque les utilisateurs naviguent entre les pages. .

Pour plus d'informations, consultez la KendoReact Data Table docs & demos .

React DatePicker & DateTimePicker: Floating Labels

[19659010] Les étiquettes flottantes ont été popularisées par le langage de conception matérielle et sont définitivement devenues partie intégrante de nombreux autres systèmes de conception depuis. Alors que KendoReact a pris en charge les étiquettes flottantes pour beaucoup de nos éléments d'entrée, les derniers retenus ont été les composants DatePicker et DateTimePicker. Eh bien, ils ne tiennent plus, comme avec R2 2021, les composants React DatePicker et DateTimePicker offrent la possibilité d'ajouter des étiquettes flottantes.

Pour voir cela en action, rendez-vous sur les KendoReact DatePicker et DateTimePicker Floating Label demos .

React PDF Generator: Exporter n'importe quel SVG

Une bibliothèque populaire dans KendoReact est le PDF Generator, qui peut exporter n'importe quel morceau de HTML vers un fichier PDF. Bien que nous ayons pu exporter facilement nos composants de visualisation de données basés sur SVG jusqu'à présent, les éléments SVG génériques ont été un peu plus difficiles. C'est pourquoi je suis ravi de mentionner qu'avec R2 2021, le React PDF Generator peut désormais exporter n'importe quel élément SVG générique dans le cadre du processus de création PDF.

Pour voir à quoi ressemblent les éléments SVG générés en PDF, vérifiez sortez les démos de traitement PDF de KendoReact et ajoutez simplement un élément SVG au contenu que vous exportez.

React Scheduler: Sélection d'événements multiples

Le planificateur KendoReact a également reçu un certain amour avec R2 2021 en ajoutant la possibilité de sélectionner plusieurs événements à une fois que. Cela peut ouvrir la possibilité de faire glisser et déposer un groupe d'événements pour déplacer leur position, ou d'accéder potentiellement aux éléments sélectionnés par programme et de manipuler la sélection d'une manière ou d'une autre.

Voir la sélection d'événements multiples dans le KendoReact Scheduler ici .

React ColorPicker: Couleur de contraste

Le composant KendoReact ColorPicker a ajouté une nouvelle fonction de contraste de couleur avec R2 2021. Cette fonction permet aux utilisateurs de sélectionner une couleur contrastée en fonction de la couleur primaire actuellement sélectionnée. Ceci est particulièrement utile pour tout ce qui concerne l'accessibilité, prenant en charge deux niveaux de contraste: AA (contraste minimum) et AAA (contraste amélioré).

Découvrez le composant KendoReact ColorPicker avec Contrast Color activé ici . [19659063] React Input: Character Count

Last but not least, avec R2 2021 KendoReact Input component a également ajouté la possibilité de travailler avec l'un de nos composants React Hint pour créer un personnage

Voici un aperçu de la Démo du compteur de caractères d'entrée de KendoReact .

Refonte des forums communautaires Telerik et Kendo UI

Et enfin, nous avons réorganisé l'un des endroits préférés des développeurs. adore traîner – les Forums communautaires Telerik et Kendo UI . Découvrez l'histoire complète du pourquoi et du quoi dans le article de blog dédié .

Vous avez des commentaires?

Avons-nous oublié un composant ou une fonctionnalité en particulier que vous recherchiez? Nous voulons de vos nouvelles. Rendez-vous sur le Portail de commentaires publics de KendoReact et votez pour votre fonctionnalité ou composant préféré, ou soumettez vos propres idées. Tout ce que nous livrons lors d'une sortie provient des commentaires d'utilisateurs comme vous, alors vous avez maintenant la possibilité d'influencer directement la feuille de route de KendoReact.

Webinaire et diffusion en direct

Vous voulez voir tout ce que j'ai mentionné ci-dessus en direct et en action? Eh bien, ai-je de bonnes nouvelles pour vous. Le jeudi 20 mai, à 11 h HE nous organisons le webinaire Kendo UI R2 2021 . Cette session couvrira tout ce que j'ai mentionné ici, ainsi que des informations sur jQuery, Angular et Vue.

En plus de cela, nous aurons également un Twitch plongeant plus profondément dans l'interface utilisateur de Kendo pour Angular et Kendo Réagissez le mardi 18 mai de 9 h 00 à 10 h 30 HE et mercredi 19 mai de 13 h 30 à 15 h 00 HE .

Des tonnes de Vous aurez du plaisir, alors rendez-vous sur la page d'inscription au webinaire Kendo UI R2 2021 pour réserver votre place et participer aux festivités.

Réservez votre place pour le webinaire