Fermer

septembre 15, 2021

Quoi de neuf dans KendoReact avec R3 202110 minutes de lecture



La version R3 2021 de KendoReact est arrivée et elle apporte d'énormes composants et de nombreuses fonctionnalités à ajouter à la boîte à outils de tout développeur React.

Les nouveaux composants incluent les nouveaux composants PivotGrid et Heatmap, tandis que nous avons ajouté l'auto-colonne. dimensionnement à la grille de données React. Il y a beaucoup plus à couvrir, alors commençons directement. est le support de la dernière version de Bootstrap. Avec cette version, le thème KendoReact Bootstrap prend officiellement en charge Bootstrap v5. n'importe quelle démo.

Sélectionneurs de thèmes mis à jour dans Docs & Demos

KendoReact - Sélecteur de thèmes et de couleurs amélioré

En parlant du sélecteur de thèmes dans les démos KendoReact, avec R3 2021, l'équipe KendoReact a augmenté le nombre de thèmes disponible dans le sélecteur de thème de chaque démo KendoReact. À vrai dire, nous avons toujours le même nombre de thèmes avec les thèmes Default, Bootstrap et Material, mais le sélecteur de thèmes mis à jour propose désormais des variations de couleur pour chaque thème qui ont été rassemblées par les ingénieurs frontend de KendoReact. Nous les appelons des « échantillons » et ils devraient aider à montrer ce qui peut être fait avec KendoReact et ses thèmes en modifiant juste une poignée de variables Sass.

Consultez les Démos de KendoReact et choisissez l'une des de nouveaux échantillons pour voir comment les couleurs changent tous les composants KendoReact mis en évidence dans les démos. Kit pour Figma dans les pages KendoReact depuis un certain temps, je voulais profiter de ce moment pour les mettre à nouveau en évidence. Cela aidera toutes les équipes travaillant avec des concepteurs à s'assurer que les développeurs et les concepteurs travaillent avec les mêmes composants d'interface utilisateur, facilitant ainsi le partage et la mise en œuvre des conceptions.

Ce n'est que le début des kits d'interface utilisateur Figma, car nous continuerons. pour ajouter des composants d'interface utilisateur jusqu'à ce que nous ayons une couverture à 100% de tous les composants KendoReact disponibles, alors gardez un œil attentif sur le kit Figma à l'avenir !

Pour plus d'informations sur tout cela, passez à Kendo UI Kits pour la page Figma.

Nouveaux composants React

Nouveau composant : PivotGrid

KendoReact PivotGrid Component - Overview

Le premier composant à être mis en évidence dans R3 2021 est le tout nouveau React PivotGrid composant. Ce composant a été conçu à partir de zéro pour garantir que le composant est incroyablement rapide et peut tirer pleinement parti de React pour garantir que tous les aspects du composant adhèrent à un niveau de performance élevé.

Le React PivotGrid a traversé un longue période d'itérations de conception et de recherche, et l'équipe de KendoReact est convaincue que tout développeur React qui a besoin d'une fonctionnalité pivotante poussera un soupir de soulagement en découvrant le KendoReact PivotGrid.

Il y a vraiment beaucoup à dire sur un composant comme le PivotGrid. , mais je préférerais de loin laisser le composant d'interface utilisateur parler. Rendez-vous sur les démos en ligne KendoReact PivotGrid pour voir exactement comment vous pouvez ajouter ce nouveau composant d'interface utilisateur passionnant à n'importe quelle application React.

Nouveau composant : MultiSelectTree

Image de présentation du composant React MultiSelectTree. Les éléments de recherche incluentSafas, linge de lit. Une liste ci-dessous montre deux catégories parentes qui ont été développées. Les éléments ont chacun une case à cocher. L'état non coché a un carré ouvert. L'état coché a le carré rempli en rose avec une coche blanche. L'état indéterminé a un petit carré rose à l'intérieur de l'espace carré. Par exemple, Meubles est une catégorie parente marquée par le style indéterminé ; en dessous se trouvent les tables et les chaises, les canapés (qui sont cochés) et les meubles d'appoint.

En élargissant la liste des listes déroulantes disponibles dans React, avec R3 2021 KendoReact a ajouté le composant MultiSelectTree. Ce composant associe la structure de données hiérarchique d'un TreeView à une liste déroulante, en particulier une liste déroulante MultiSelect, afin de fournir une interface utilisateur riche pour sélectionner plusieurs valeurs et les afficher toutes dans une entrée de texte.

Pour en savoir plus sur cette nouvelle version. , consultez les Docs et démos de KendoReact MultiSelectTree.

Nouveau composant : Heatmap

Exemple de KendoReact Heatmap répliquant la visualisation des données de contribution trouvée sur GitHub. Une grille de carrés dans différentes nuances de vert montre quand la plupart des contributions ont eu lieu.

Avec R3 2021, KendoReact a également ajouté le nouveau composant React Heatmap. Ce composant de visualisation de données unique est adapté pour visualiser l'amplitude d'une valeur sur deux dimensions et est souvent appelé « carte thermique de cluster ». GitHub.

Voici un lien direct vers les démos KendoReact Heatmap pour une documentation approfondie et des exemples pour ajouter le composant à n'importe quelle application React.

Nouveau composant : Typography

KendoReact Typography Component - Vue d'ensemble montrant plusieurs styles de polices (titres, messages de réussite et d'avertissement, etc.)

De nombreux développeurs de KendoReact construisent leurs propres langages de conception basés sur KendoReact et nous voulons nous assurer que ces gens sont bien pris en charge ! Dans cette veine, nous avons ajouté le nouveau composant React Typography qui peut aider à renforcer la cohérence entre les polices utilisées dans n'importe quelle application React.

Les CSS associés aux différentes classes proviennent tous des thèmes KendoReact, il y a donc un emplacement centralisé pour contrôler et appliquer ces styles.

Voici un lien direct vers la docs du composant de typographie KendoReact pour plus de détails.

Nouveau composant : StackLayout

KendoReact StackLayout Component - Overview. Trois cartes côte à côte montrent un nom d'utilisateur et une image de profil, le nombre d'abonnés, puis l'image principale, une légende ci-dessous et Voir plus à partir des liens utilisateur.

Le nouveau composant KendoReact StackLayout permet aux développeurs de alignez facilement plusieurs éléments dans une pile de manière verticale ou horizontale. Bien que la même fonctionnalité puisse être obtenue avec certains CSS, l'équipe de KendoReact souhaitait fournir des composants d'interface utilisateur faciles à utiliser pour aider les développeurs qui préfèrent éviter d'écrire leurs propres éléments de mise en page. Avec le composant React StackLayout, un développeur React contrôle l'orientation, l'alignement, l'espacement et bien plus encore grâce à des options de configuration pratiques. : GridLayout

KendoReact GridLayout Component - Aperçu - En haut se trouvent quatre articles tendance, répertoriés deux par deux avec auteur, titre, date, durée de lecture. Vous trouverez ci-dessous des articles recommandés dans une mise en page de carte, avec les mêmes informations textuelles, plus une image pour chaque article.

Semblable au composant StackLayout, le nouveau composant KendoReact GridLayout permet aux développeurs d'organiser le contenu sur une page dans une structure de grille utilisant des lignes et des colonnes. Le React GridLayout est basé sur le CSS Grid Layout et fournit un peu d'augmentation de la productivité à tous ceux qui cherchent à éviter d'écrire leurs propres éléments de mise en page.

Voici un lien rapide vers les Démos KendoReact GridLayout pour plus d'informations .

Modèle FileManager

Modèle KendoReact FileManager

Ce n'est techniquement pas un tout nouveau composant, mais c'est quand même quelque chose qui devrait être mentionné dans cette section. Avec R3 2021, l'équipe KendoReact a mis en place un modèle prêt à l'emploi qui permet aux utilisateurs de gérer les fichiers et dossiers dans un système de fichiers. Les utilisateurs d'autres versions de l'interface utilisateur de Kendo le reconnaissent comme le composant FileManager.

Étant donné que le FileManager peut être responsable de tonnes de scénarios différents, nous ne voulions pas écrire un composant qui puisse correspondre à un sous-ensemble de ces scénarios. Au lieu de cela, nous avons rassemblé ce modèle pour permettre aux développeurs de voir comment créer le FileManager à l'aide des composants KendoReact et donner aux développeurs des moyens simples de personnaliser et de s'approprier le FileManager. Bien sûr, si vous aimez ce que vous voyez hors de la boîte, tout ce que vous avez à faire est de copier et coller le code que nous avons fourni ! .

Fonctionnalités étendues des composants

Grille : dimensionnement automatique des colonnes

Avec R3 2021, la grille de données KendoReact ajoute une fonctionnalité très demandée : le dimensionnement automatique des colonnes. La fonctionnalité fonctionne en redimensionnant automatiquement une colonne pour qu'elle s'adapte à la plus petite largeur possible afin de garder tout le texte visible lorsque l'utilisateur final double-clique sur le gestionnaire de redimensionnement de l'en-tête de colonne approprié. Cela peut également être fait à l'aide de la méthode fitColumns pour obtenir le même résultat via le code.

Consultez la démo React Data Grid Column Auto-Size ici . : Grouper et dissocier le menu par colonne

KendoReact Grid Component - Grouper et dissocier le menu par colonne

Développer les fonctionnalités disponibles pour les utilisateurs finaux de la grille React, avec le R3 2021 le menu de colonne peut désormais offrir la possibilité de grouper ou de dégrouper via le menu de colonne. Auparavant uniquement possible par glisser-déposer des en-têtes de colonne, cette nouvelle fonctionnalité offre aux utilisateurs le choix de la manière de gérer le regroupement dans leurs grilles de données. .

Grid, Gantt et TreeList : Améliorations de l'accessibilité

Illustration présentant diverses icônes associées à l'accessibilité (navigation vocale, lecteurs d'écran, etc.)

Un autre axe du KendoReact pour R3 2021 était l'accessibilité. Grâce à des tests internes supplémentaires, ainsi qu'aux commentaires des utilisateurs de KendoReact, nous avons abordé plusieurs éléments liés à l'accessibilité dans les composants KendoReact Grid, Gantt et TreeList pour cette version. La meilleure partie de ces améliorations est que tout ce qu'un développeur doit faire est de mettre à jour vers la dernière version et ils ont déjà amélioré l'accessibilité de tous leurs composants KendoReact existants ! vers la Section de documentation sur l'accessibilité de React Grid.

Des informations supplémentaires relatives à l'accessibilité peuvent être trouvées sur
la section Documents et démos de conformité à l'accessibilité de KendoReact.

TreeList : Range & Multiple Sélection de cellules

Composant KendoReact TreeList - Sélection de plage. La grille comprend des colonnes pour le nom, le poste, la date d'embauche. Six lignes de la colonne de date d'embauche ont été sélectionnées.

Quand il s'agit de sélectionner des cellules, ou une collection de cellules, une façon très intuitive de sélectionner des cellules consiste à faire glisser la souris sur les cellules qui doivent être sélectionnées. Eh bien, avec R3 2021, cela est maintenant officiellement ajouté à la React TreeList ! Non seulement cette version offrait la possibilité de sélectionner une plage de cellules en faisant glisser la souris sur une zone de la TreeList, mais les utilisateurs peuvent également sélectionner plusieurs cellules en sélectionnant une cellule à la fois. la documentation contient un exemple qui présente la différence entre les différents modes de sélection et comment les implémenter.

Gantt: Range & Multiple Cell Selection

KendoReact Gantt Component - Range Selection. La grille des tâches comprend l'ID, le titre, le début, la fin, puis les planifications. Six lignes de la colonne de date de début ont été sélectionnées.

Tout comme avec le composant TreeList, le composant KendoReact Gantt a également ajouté à la fois une sélection de cellules multiples ainsi qu'une sélection de plage.

Voici un lien direct vers le Démos React Gantt Selection pour des exemples de la façon dont vous pouvez mettre à jour la sélection dans votre composant Gantt aujourd'hui.

Info-bulle : prise en charge des éléments SVG

KendoReact Tooltip Component - Prise en charge des éléments SVG

 

Avec Les développeurs R3 2021 peuvent désormais attacher l'info-bulle React aux éléments SVG. Lorsqu'il y a des éléments SVG génériques sur une page, l'info-bulle peut facilement être attachée à ces éléments et affichée sur eux pour fournir des informations supplémentaires. pour en savoir plus.

Puce : Contenu personnalisé

Composant de puce KendoReact - Contenu personnalisé

Dernière mais non la moindre, la puce React a ajouté la possibilité pour les développeurs de créer du contenu personnalisé pour le puce, ou pilule, élément. Cela peut aider les développeurs à ajouter des icônes personnalisées, des liens ou vraiment tout type de contenu dans le composant KendoReact Chip.

Voici un lien direct vers la React Chip Custom Content docs pour plus de détails.

J'ai reçu des commentaires. ?

Avons-nous manqué un composant ou une fonctionnalité en particulier que vous recherchiez ? Nous voulons de vos nouvelles! Rendez-vous sur le KendoReact Public Feedback Portal 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 c'est maintenant votre chance d'influencer directement la feuille de route de KendoReact.

Webinaires et diffusions en direct

Vous voulez voir tout ce que j'ai mentionné ci-dessus en direct et en action ? Le mercredi 28 septembre à 11h00 HEnous organisons le webinaire Kendo UI R3 2021 release. Cette session couvrira toutes les nouveautés de R3 2021 dans React, jQuery, Angular et Vue. Jeudi 23 septembre à 10 h HE. Pour vous les fans d'Angular, nous allons découvrir l'interface utilisateur de Kendo pour Angular le vendredi 24 septembre à 10h00 HE.

Des tonnes de plaisir seront au rendez-vous, alors rendez-vous sur le Page d'inscription au webinaire Kendo UI R3 2021 pour réserver votre place et participer aux festivités !




Source link

0 Partages