Quoi de neuf dans Kendo UI pour Vue avec R3 2021

La version R3 2021 est la plus grande version de l'interface utilisateur de Kendo pour Vue !

Cette version est massive, avec 20 nouveaux composants natifs, ou vraiment 34 nouveaux composantsy compris les différents visualisations de données. Il y a tellement de choses à couvrir ici, alors ne perdons pas de temps et allons-y. 5″ src= »https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/2021/2021-09/release-blog-post/bootstrap-5-support992d7492b62d42028c04de5993e9a1b7.gif?sfvrsn=f1003627_0″ data-displaymode= »Original »/>

Un gros problème à résoudre tout de suite est que, avec R3 2021, Kendo UI pour Vue prend officiellement en charge Bootstrap 5 ! Cela peut être automatiquement utilisé en mettant à jour les packages les plus récents et les plus performants liés à l'interface utilisateur de Kendo pour Vue (en particulier le package de thème Bootstrap).

Pour voir à quoi cela ressemble dans les composants Vue UI, sélectionnez Bootstrap dans le sélecteur de thème. sur Kendo UI for Vue docs & demos.

Mise à jour des sélecteurs de thèmes dans Docs & Demos

Lié à ce qui précède , l'équipe Kendo UI for Vue a également étendu les thèmes disponibles à choisir dans le sélecteur de thèmes de démonstration sur tous les échantillons du site de documentation Kendo UI for Vue.

En réalité, nous proposons toujours les mêmes thèmes (par défaut, Bootstrap et Material) mais cette mise à jour présente les variations de couleurs de chaque thème organisées par l'interface utilisateur Kendo pour les ingénieurs frontend de Vue. Désormais, les développeurs peuvent rapidement voir à quoi ressembleront les composants de l'interface utilisateur de Vue avec des ajustements de couleurs sans avoir à effectuer la personnalisation vous-même. hors de ces échantillons en utilisant le menu déroulant du sélecteur de thème en haut à droite de chaque échantillon. et-sentir et concevoir autour de l'interface utilisateur Kendo pour les composants Vue, avec R3 2021, nous publions le kit d'interface utilisateur Kendo pour Figma. Ce kit d'interface utilisateur Figma contient plus de 30 composants de l'interface utilisateur Kendo pour Vue en tant qu'actifs que les concepteurs peuvent utiliser dans leurs conceptions Figma. .

Nouveaux composants Vue

Nouveaux composants : Chart, StockChart et SparkLine

Auparavant uniquement disponible dans le cadre des wrappers pour Vue, avec R3 2021, je suis ravi d'annoncer la nouvelle bibliothèque native Vue Charts ! Il s'agit d'un énorme ajout à l'interface utilisateur de Kendo pour Vue, car il apporte 16 types de graphiques différents notamment Bar, Column, Area, Line, Scatter, StockChart et bien d'autres.

De plus, l'équipe Kendo UI pour Vue a également pu ajouter le composant SparkLine à cette version, fournissant un élément d'interface utilisateur élégant pour ajouter des éléments de graphique en ligne au contenu de paragraphe ou aux cellules dans une grille de données.

Il y a une tonne à déballer ici, donc la meilleure chose à faire est de passer en revue toute la documentation disponible autour de ces composants par vous-même. Rendez-vous sur l'article Kendo UI for Vue Chart Getting Started pour plus d'informations.

Nouveaux composants : dessin, générateur PDF, requête de données, date mathématique et économiseur de fichiers

Avec R3 2021, Kendo L'interface utilisateur de Vue a ajouté des bibliothèques d'aide qui fonctionnent seules mais qui sont également présentes dans les composants Vue eux-mêmes. Ceux-ci incluent :

• Vue Drawing : Une bibliothèque multi-navigateurs pour les graphiques vectoriels interactifs.
• PDF Generator : Une bibliothèque qui permet aux développeurs d'exporter une sélection, ou l'intégralité du contenu, de n'importe quelle page Web .
• Requête de données : Un package pour aider à effectuer des opérations de données en mémoire telles que le tri, le filtrage, le regroupement et l'agrégation.
• Date Math : Un package pour les manipulations de date JavaScript.
• File Saver : Un composant qui aide à enregistrer des fichiers sur la machine client.

Nouveau composant : TabStrip

La nouvelle interface utilisateur native de Kendo pour le composant Vue TabStrip affiche une collection d'onglets avec le contenu associé. L'utilisateur final peut facilement basculer entre les différentes vues en cliquant sur l'onglet pour charger le contenu associé. Auparavant uniquement disponible en tant que wrapper, il s'agit désormais d'un composant conçu à partir de zéro spécifiquement pour Vue. Composant Vue Pager – Présentation – Une bande de pagination affiche les numéros de page 1, 2, 3, 4, 5, … pour le nombre de résultats à afficher par page, actuellement défini sur 5. Ensuite, il nous indique que nous sommes sur les résultats 1 à 5 sur 200. » src= »https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/2021/2021-09/release-blog-post/vue-pager-overview.jpg?sfvrsn=e7bc876c_0″ data-displaymode= »Original »/>

Le nouveau Vue Pager natif extrait l'interface de pagination trouvée dans les composants liés aux données comme la grille de données Vue à son propre composant d'interface utilisateur dédié. À l'aide de l'interface utilisateur Kendo pour Vue Pager, les utilisateurs finaux peuvent facilement diviser et parcourir le contenu en morceaux plus faciles à gérer.

Voici un lien direct vers la Démo de présentation de Vue Pager pour plus de détails.

Nouveau Composants : formulaire, indice et erreur retour d'information. Ensuite, un espace pour le courrier électronique, défini comme facultatif. Et des boutons pour Soumettre et Effacer. » src= »https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/2021/2021-09/release-blog-post/vue-form.png?sfvrsn=433f2d27_0″ data-displaymode= »Original » data-openoriginalimageonclick= »true »/>

Les formulaires sont partout sur le Web. Qu'il s'agisse d'un formulaire pour modifier et manipuler des éléments de données dans une grille de données, ou d'un formulaire d'inscription permettant aux utilisateurs de créer un compte sur votre site Web, les formulaires sont l'épine dorsale de la plupart des applications.

Avec R3 2021, l'interface utilisateur Kendo pour Vue. L'équipe a passé du temps à étudier la meilleure façon de créer des formulaires dans Vue et a décidé de créer un composant dédié à la création de formulaires, donnant vie au nouveau composant Vue Form.

Le composant natif Vue Form est un petit package rapide pour la gestion de l'état des formulaires. sans aucune dépendance. Le formulaire Vue fonctionne bien avec l'interface utilisateur Kendo pour les composants Vue ainsi qu'avec tous les éléments d'interface utilisateur tiers, donc même si vous n'utilisez pas l'interface utilisateur Kendo pour les composants Vue, vous pouvez profiter de cette bibliothèque de formulaires efficace.

Avec le formulaire. , nous avons introduit les composants Vue Hint et Vue Errorqui peuvent être attachés aux éléments du formulaire pour fournir aux utilisateurs des astuces ou des erreurs utiles en fonction de l'état actuel de Vue Form.

Pour approfondir ce nouveau composant passionnant, rendez-vous sur la Kendo UI for Vue Form Getting Started page.

Nouveau composant : Avatar

Avec R3 2021 , Kendo UI pour Vue a également ajouté le composant natif Avatar, aidant les développeurs à afficher images, icônes ou initiales représentant des personnes ou d'autres entités. L'image ci-dessus et le nom du composant en disent long.

Voici un lien direct vers la Démo Vue Avatar Overview pour plus d'informations.

Nouveau composant : Carte

Nouveau composant : Checkbox

Lié au composant Vue Form, avec R3 2021 Kendo UI pour Vue a également ajouté le composant Vue Checkbox. Avec ce nouveau composant d'interface utilisateur, les développeurs peuvent tirer parti de la conception fournie par les thèmes d'interface utilisateur Kendo et assurer la cohérence dans l'ensemble de leur application, même pour les cases à cocher.

La case à cocher Vue prend en charge les états cochés, non cochés et indéterminés. aux démos Vue Checkbox pour voir comment vous pouvez ajouter le composant à vos applications Vue aujourd'hui.

Nouveaux composants : RadioButton & RadioGroup

En relation avec la case à cocher Vue, nous avons également ajouté les composants Vue RadioButton et Vue RadioGroup avec R3 2021 Tout comme avec la case à cocher, ces composants contribuent à la cohérence de la conception dans l'ensemble de votre application Vue.

Consultez les démos Vue RadioButton et Démos Vue RadioGroup pour plus de détails.

Nouveau composant : Label & FloatingLabel

Avec R3 2021, Kendo UI pour Vue a également ajouté les composants Vue Label et FloatingLabel, garantissant que tous les éléments de formulaire dans les applications Vue utilisant Kendo UI pour Vue sont correctement étiquetés.[1 9659006] Le composant Vue Label prend en charge l'étiquetage des éléments de formulaire ainsi que des éléments pouvant être focalisés personnalisés. Le composant peut également être associé à un autre élément d'interface utilisateur sur la page en enveloppant n'importe quel élément d'entrée de l'interface utilisateur Kendo pour Vue comme DropDownList et NumericTextBox, ou des éléments HTML comme input.

Le composant FloatingLabel permet aux développeurs d'augmenter n'importe quel élément d'entrée Vue en fournissant une étiquette qui « flotte » à l'extérieur du conteneur d'origine lorsque l'utilisateur se concentre sur l'élément. Bien sûr, il existe des intégrations avec l'interface utilisateur native Kendo existante pour les composants Vue Input comme DropDownList ou NumericTextBox.

Voici un lien direct vers Kendo UI for Vue Label Componentet pour les personnes intéressées, vous pouvez Trouvez des informations sur le Composant Vue FloatingLabel ici.

Fonctionnalités étendues des composants

Grille : navigation améliorée au clavier

Bien que l'interface utilisateur de Kendo pour Vue Data Grid dispose d'une navigation au clavier depuis quelques versions maintenant, il appartenait toujours au développeur de mettre en œuvre ce qui devrait se passer lorsque l'utilisateur final interagit avec la grille via son clavier. Bien que puissant, cela nécessitait un travail supplémentaire pour la mise en œuvre de la navigation au clavier, ce qui n'était pas idéal. permettre aux développeurs de transmettre des exigences autour de la navigation au clavier en définissant quelques options de configuration. Au lieu de plusieurs lignes de code personnalisé, les développeurs peuvent désormais définir ces options et se lancer dans la course.

Voici un lien direct vers l'article de documentation Vue Grid Keyboard Navigation qui approfondit ce sujet.[19659073]Vous avez des commentaires ?

L'interface utilisateur de Kendo pour Vue continue de fonctionner et ajoute des tonnes de nouveaux composants et fonctionnalités à chaque version. Cependant, nous n'avons peut-être pas ajouté le composant ou la fonctionnalité dont vous avez besoin, alors voici où j'ai une faveur à demander. Rendez-vous sur Kendo UI for Vue Feedback Portal pour soumettre vos idées ou voter pour des idées existantes afin de nous assurer que nous ajoutons les composants et les fonctionnalités dont vous et votre équipe avez besoin !

Avec vos commentaires, nous pouvons continuer sur la voie de notre objectif de fournir l'ensemble de composants d'interface utilisateur le plus avancé pour les développeurs Vue.

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 version . Cette session couvrira tout ce qui est nouveau avec R3 2021 dans Vue, jQuery, Angular et React.

En plus de cela, nous aurons également un Twitch livestream approfondissant l'interface utilisateur de Kendo pour Angular sur Vendredi 24 septembre à 10 h HEet nous couvrons également KendoReact sur Twitch le Jeudi 23 septembre à 10 h HE.

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