Nouveautés de KendoReact avec R1 2020

La version R1 2020 de KendoReact est arrivée et apporte de nouveaux composants React UI, notamment les composants Drawer, Checkbox, Card, Avatar et Form. De plus, TreeList et Scheduler ont reçu toute une série de mises à jour.

L'équipe de KendoReact a été très occupée ces derniers mois, et le fruit de tous ces travaux peut être vu avec la dernière version: R1 2020! Voyons simplement ce qu'il y a de nouveau dans la bibliothèque d'interface utilisateur supérieure pour le développement de React!

Nouveaux composants

Nouveau composant: tiroir

Le nouveau widget KendoReact Drawer fournit un tiroir standard avec des fonctionnalités de développement et de réduction pour une expérience de navigation ultime. Le composant permet aux utilisateurs de définir des icônes et du texte pour chaque élément de navigation et est livré avec des fonctionnalités comme un mini-mode pour afficher uniquement les icônes de chaque élément afin de minimiser l'espace occupé par le composant.

Pour voir le nouveau composant React Drawer en action , dirigez-vous vers la page de documentation du tiroir KendoReact .

Nouveau composant: formulaire

Le composant KendoReact Form est un petit et package rapide pour la gestion de l'état des formulaires avec aucune dépendance. Construit à partir de zéro, ce composant a été créé sur la base des commentaires des clients et des meilleures pratiques concernant la création de formulaires. Initialement conçu pour aider à prendre en charge des composants plus avancés comme le Planificateur, avec R1 2020, nous voulions le proposer en tant que composant autonome pour que tous les développeurs React puissent l'utiliser, même s'ils finissent par ne jamais utiliser d'autres composants KendoReact.

Pour en savoir plus des exemples et des informations que vous pouvez passer à la section de documentation du formulaire KendoReact .

Nouveau composant: case à cocher

Jusqu'à présent, le style d'une case à cocher a été possible en appliquant simplement une classe CSS trouvée dans les thèmes KendoReact à un élément d'entrée HTML. Bien que cela ait bien fonctionné jusqu'à présent, nous avons réalisé qu'il y avait des inconvénients à cette approche, et qu'il manquait des intégrations plus profondes avec React. C'est pourquoi nous avons décidé de créer un nouveau composant de case à cocher autonome pour React!

Cela aidera à fournir une apparence uniforme à travers tous les éléments d'interface utilisateur dans une application React écrite avec KendoReact, et bien sûr être utilisé en interne dans nos propres composants. En plus d'être intégré à divers langages de conception, le composant Checkbox prend en charge les états vérifiés, non contrôlés, indéterminés et désactivés, ainsi que les propriétés intégrées pour gérer des éléments tels que l'étiquette d'accompagnement. Bien sûr, le composant est entièrement accessible et est conforme aux normes WCAG 2.1 et WAI-ARIA.

Cliquez ici pour accéder à la section Documentation de la case à cocher pour plus d'exemples et de code!

Nouveau composant: Carte

Le widget KendoReact 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 tels que ListView pour créer une expérience utilisateur convaincante.

Pour plus de démos et d'exemples présentant le composant Card, rendez-vous sur les documents du composant KendoReact Card !

Nouveau composant: Avatar

Les avatars représentent beaucoup de choses dans les applications 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 le composant KendoReact Avatar, les développeurs 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 plus d'exemples du composant React Avatar en action rendez-vous sur la page de documentation de KendoReact Avatar [196590008] Nouveau composant: filtre

La ​​création d'expressions de filtre peut être bien plus qu'un simple commence par et contient lié à une seule case à cocher. Bien que cela puisse fonctionner dans certains scénarios, les utilisateurs doivent souvent utiliser plusieurs filtres et les combiner de différentes manières («prix unitaire supérieur à 18 $ et produits en stock», par exemple). Cela signifie que le filtrage peut rapidement devenir assez complexe. C'est là que le composant KendoReact Filter entre en jeu, offrant une expérience utilisateur intuitive pour la création d'expressions de filtre allant de filtres simples à très complexes. Ceux-ci peuvent ensuite être utilisés avec d'autres composants KendoReact, comme la grille de données, ou être utilisés pour filtrer toute collecte de données.

Pour jouer avec le composant React Filter consultez la section de documentation de KendoReact Filter . [19659008] Mises à jour du package Data Tools

Initialement introduit avec l'inclusion du composant KendoReact Pager, le package Data Tools continue de se développer en incluant d'autres bibliothèques utiles et des composants d'interface utilisateur pour aider à gérer les collections de données – y compris le nouveau composant React Filter. [19659003] Fonctionnalités étendues du composant

NumericTextBox – Actualiser

Le NumericTextBox a été le premier composant KendoReact jamais écrit et au fil des ans, nous avons vu plusieurs exigences et scénarios au-delà de notre portée initiale du composant. C'est pourquoi nous avons consacré du temps à retravailler la NumericTextBox pour nous assurer qu'elle peut prendre en charge tous les scénarios d'expérience utilisateur que nous avons découverts pour le composant.

Scheduler – Custom Rendering

Le KendoReact Scheduler fournit une conception par défaut pour les événements et autres éléments du composant, qui change en fonction du langage de conception implémenté avec le composant. Avec la nouvelle fonctionnalité de rendu personnalisé, notre planificateur React permet de contrôler facilement l'apparence des événements, donnant aux utilisateurs la possibilité de personnaliser complètement le rendu du planificateur.

Planificateur – Navigation au clavier [19659030] Avec la nouvelle fonction de navigation par clavier, le planificateur KendoReact prend entièrement en charge la navigation et l'interaction avec ses divers éléments en utilisant uniquement le clavier comme entrée. Cela offre un potentiel pour un niveau de productivité plus élevé et aide dans les scénarios d'accessibilité où la navigation au clavier est la seule option pour l'interaction avec une application Web.

Scheduler – Accessibility

Poursuivant avec un fort engagement en matière d'accessibilité, le KendoReact Scheduler est désormais conforme aux normes d'accessibilité telles que WCAG 2.1 et WAI-ARIA. Ceci est fourni avec le composant, garantissant que tout développeur React peut augmenter le niveau d'accessibilité de son application simplement en incluant la dernière version de ce React Scheduler.

TreeList – Column Virtualization

Grâce à la nouvelle fonctionnalité de virtualisation des colonnes, le composant TreeList peut gérer des données avec de grands ensembles de colonnes à travers son ensemble de données. La virtualisation fonctionne en chargeant les données selon les besoins et en recyclant les éléments d'interface utilisateur sur la page lorsque les utilisateurs font défiler les colonnes. Cela laisse l'impression de l'ensemble de données sans la pénalité de performance de charger tout ce code HTML sur la page.

Voici un lien rapide vers la démo de virtualisation de colonnes qui montre comment l'implémenter aujourd'hui. [19659008] TreeList – Frozen Columns

L'affichage des données dans une structure de colonne est crucial pour TreeList et certaines colonnes peuvent devoir être affichées en permanence lorsque les utilisateurs défilent horizontalement. Avec la nouvelle fonctionnalité de colonnes figées (alternativement: colonnes verrouillées), la KendoReact TreeList peut facilement geler / verrouiller une colonne sur le côté gauche ou droit du composant lors du rendu initial, ou lorsqu'elle est défilée par l'utilisateur final.

Pour des exemples de code sur la façon d'implémenter des colonnes gelées ou verrouillées, rendez-vous sur cet article de documentation .

TreeList – Redimensionner et réorganiser les colonnes

En développant les fonctionnalités de colonne disponibles de React TreeList, cette nouvelle version permet aux utilisateurs finaux de redimensionner la largeur des colonnes en faisant glisser un indicateur de redimensionnement, ou même de réorganiser la séquence dans laquelle les colonnes sont affichées. Cela garantit que toute vue de leurs données peut être personnalisée et modifiée pour s'adapter à leur écran et à leurs besoins.

Comme référence rapide, cliquer ici vous amènera à la colonne TreeList redimensionnant les démos et ce lien vous amènera aux démos de réorganisation de la colonne TreeList .

TreeList – En-têtes multi-colonnes

Souvent une colonne peut nécessiter plus de contexte que simplement son nom de champ dans l'en-tête – en particulier si les colonnes sont liées d'une manière ou d'une autre. Grâce à la fonction d'en-tête multi-colonnes de KendoReact TreeList les développeurs peuvent ajouter des en-têtes parents qui s'étendent sur plusieurs en-têtes de colonne. Ceux-ci peuvent également être réorganisés et redimensionnés, représentant l'ensemble du groupe de colonnes enfants qu'ils englobent.

Nouvelle application exemple de tableau de bord de portefeuille de stock

Dans le cadre d'un effort constant ou continu pour aider les développeurs de KendoReact à être plus productifs, nous voulions prendre le temps de créer un exemple d'application qui met en évidence notre composants les plus populaires dans un scénario très demandé: un tableau de bord financier. C'est pourquoi nous avons créé l'exemple d'application du portefeuille d'actions qui fournit une interface élégante pour présenter les données de mise à jour en direct et interagir avec nos composants pour consulter l'historique de certains stocks. Pour ceux qui s'intéressent au code source de l'application Stock Portfolio, rendez-vous sur la page du référentiel GitHub .

Cet exemple comprend la grille de données KendoReact, des visualisations de données (le graphique boursier est très visible) et divers Éléments de formulaire pour aider à créer une expérience utilisateur agréable pour mettre en évidence les données financières. C'est également un excellent moyen d'apprendre les composants de KendoReact et comment ils peuvent être utilisés pour créer des applications métier.

Vous avez 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 des é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'interface utilisateur de Kendo pour l'équipe KendoReact lors de notre webinaire en direct le jeudi 23 janvier à 11 h 00 HE ! Nous couvrirons toute l'interface utilisateur de Kendo tout au long de la journée, mais la section spécifique à KendoReact commencera à 11h30 ! Les places sont limitées, alors rendez-vous sur la page du webinaire pour vous inscrire aujourd'hui et réserver votre place !