Fermer

septembre 12, 2018

La sortie R3 2018 pour l'interface Kendo est arrivée!

R3 Kendo UI


La version R3 de l'interface utilisateur Kendo est arrivée et nous avons des mises à jour à partager avec jQuery, Angular, React et Vue. Rapprochez-vous de tout ce qui est nouveau – il y en a beaucoup!

Le début de l'automne dans le nord-est des États-Unis est toujours une période excitante. Nous avons les feuilles qui passent du vert succulent du printemps et de l'été à l'orange et au jaune vifs pour lesquels cette région est connue. La température commence à devenir supportable, on met absolument du piquant à la citrouille dans et le plus excitant: on a la sortie R3 du Kendo UI!

Kendo UI Nous couvrons les bibliothèques de composants d'interface utilisateur pour jQuery Angular React et Vue.js . Tant de nouveaux composants et de nouvelles fonctionnalités à aborder! Les dernières sorties que j'ai créées pour ce méga-blog avec tout ce qui est sorti avec une interface utilisateur Kendo surlignée, ce qui pourrait être un peu difficile à naviguer. Donc, avec R3 2018, je vais utiliser cet article pour couvrir les points saillants de la version de chacun de ces produits, puis publier des articles de blog plus longs pour chaque framework. Au fur et à mesure de leur publication, je mettrai à jour ce post avec quelques liens pour vous aider dans la navigation.

Juste pour simplifier les choses, voici une table des matières rapide pour accéder au (x) framework (s) qui pourrait vous intéresser

Table des matières

  1. Mises à jour de la bibliothèque de composants jQuery
  2. Mises à jour des composants d'interface utilisateur native React
  3. Mises à jour des composants natifs de l'interface utilisateur angulaire
  4. Mises à jour des composants d'interface Vue.js

Vous voulez voir les mises à jour en action?

Mises à jour de la bibliothèque de composants jQuery

Conformité WCAG 2.1

La première chose que je veux souligner pour la bibliothèque de composants jQuery est quelque chose que je trouve incroyablement important: l'accessibilité. Avec R3 2018, le Kendo UI est entièrement compatible avec la nouvelle norme WCAG 2.1 . La conformité à l’accessibilité est l’un des principaux objectifs de la bibliothèque du Kendo UI, car tous ses composants sont accessibles immédiatement. Alors que le passage de WCAG 2.0 à 2.1 en tant que norme n’a eu lieu qu’à la fin du mois de juin, nous voulions nous assurer que notre prochaine version officielle était compatible avec ce nouveau standard, nous y voilà! Cela fait du Kendo UI l'un des rares, sinon la seule bibliothèque compatible avec cette nouvelle norme d'accessibilité.

Nouveaux composants jQuery

Un gros effort de l'équipe Kendo UI Nous nous sommes concentrés sur les deux dernières versions pour nous assurer que nous prenons en charge les éléments les plus demandés dans notre portail de commentaires qui provient principalement de l'ajout de nouveaux composants DropDown tels que release (R2 2018).

Avec R3 2018, nous abordons un autre composant important: un ComboBox contenant une structure Grid ou une table. C'est pourquoi je suis ravi de présenter le nouveau composant MultiColumnComboBox ! Cela donne aux développeurs un moyen intuitif de se lier à une liste de données et de faire en sorte que chaque élément de données affiche plusieurs valeurs, même si de nombreuses colonnes sont nécessaires. Bien sûr, le filtrage / la recherche peut être facilement effectué en tapant simplement la saisie de texte du composant.

 MultiColumnComboBox "title =" 001-MultiColumnComboBox "/></p data-recalc-dims=

De plus, nous voulions développer notre liste de composants de visualisation de données disponibles en introduisant le widget ArcGauge . Ceci est parfait pour les scénarios où vous voulez un moyen simple, efficace et élégant pour présenter une valeur ou un pourcentage de quelque chose:

 ArcGauge "title =" 002-ArcGauge "/><h3 id= Mises à jour majeures de TreeList

Beaucoup d'entre vous connaissent probablement le composant TreeList, mais dans le cas où le composant quick tl; dr est une structure hiérarchique arborescente avec la structure de colonnes d'une grille, vous obtenez des données homogènes. un bon moyen d'aligner les colonnes au fur et à mesure que les éléments sont développés.

Bien sûr, cela signifie qu'il existe de nombreuses fonctionnalités de Grid qui seraient parfaitement compatibles avec le composant. a:

Améliorations apportées aux composants de grille et à l'interface utilisateur conversationnelle

Bien sûr, ce ne serait vraiment pas une version avec quelque chose ajouté à notre composant le plus populaire: la grille. Voici une liste rapide des fonctionnalités que nous avons ajoutées pour cette version:

  • Résumés de groupes désormais disponibles dans l'en-tête de groupe (auparavant un processus de modèle manuel fastidieux)
  • Mises à jour de comportements réactifs pour une PWA!)
  • API ajouté: mise à jour de la largeur de la colonne par programmation

Un autre composant intéressant auquel nous avons ajouté une caractéristique importante est le composant Conversational UI . Plus précisément, nous avons ajouté la nouvelle fonctionnalité de la barre d'outils qui offre aux utilisateurs des moyens supplémentaires d'interagir avec leur interface de discussion avec des éléments tels que des images et de la voix. Au lieu de simplement taper du texte, vous pouvez maintenant offrir à vos utilisateurs la possibilité de télécharger des images et d'enregistrer des voix, entre autres éléments.

Matière matérielle livrée à jQuery

Nous avions initialement prévu d'ajouter le thème Material à nos composants jQuery avec la dernière version mais malheureusement il a fallu pousser les choses un peu pour s'assurer que la suite complète de composants soit thématisée – il y en a pas mal après tout!

Eh bien, la longue attente est enfin terminée, je suis content pour dire qu'avec la version R3 2018, nous avons le thème matériel prêt pour la suite jQuery!

 jquery-material "title =" 003-jquery-material "/><h3 id= Prise en charge d'AngularJS 1.7.x

Quelque chose pourrait avoir attiré quelques personnes: AngularJS a publié 1.7.x au cours de l'été pour continuer à prendre en charge AngularJS 1.x, bien que ce soit le dernière publication importante . Comme notre support pour AngularJS 1.x provient des composants jQuery, je voulais mentionner que nous supportons cette dernière version d’AngularJS pour les personnes qui ont besoin de la dernière version de l’UI Kendo pour leurs applications AngularJS.

Composants d'interface utilisateur

J'ai beaucoup de mises à jour pour les composants natifs de l'interface React! Comme cette bibliothèque est la plus jeune du groupe, nous augmentons rapidement le nombre de composants disponibles et pour R3 2018, nous n'avons certainement pas déçu!

Nouveaux composants d'interface utilisateur natifs pour React

En commençant par les nouveaux composants, voici un liste rapide des nouveaux composants que nous avons ajoutés depuis la dernière version:

Et je n'ai pas encore fini! Nous avons également ajouté plusieurs de nos composants de visualisation de données:

Nouveaux composants disponibles dans React

Bien entendu, les composants existants ont reçu de nombreuses mises à jour.

The Grid a reçu des mises à jour cruciales mises à jour sous le capot, à savoir:

Grâce à nos éléments de saisie, souvent utilisés pour les formulaires, nous avons ajouté une intégration officielle avec La ​​validation des formulaires HTML5 . Cela peut être vu sur les pages de composants individuels, comme celui-ci pour notre composant DateInput .

Pour une plongée encore plus profonde dans la version de React, attendez-vous à la publication de la version React-spécifique! Mises à jour de nos composants natifs pour interface utilisateur angulaire

Notre bibliothèque angulaire est également prête pour une tonne de nouvelles fonctionnalités!

Je commencerai par la grille, qui a récemment ajouté la possibilité d'intégrer notre composant menu menu contextuel . Nous avons également ajouté la possibilité d'utiliser le composant DateRangePicker comme moyen de filtrage . Autre nouveauté importante, nous avons réussi à améliorer considérablement les performances de la grille angulaire, en obtenant un FPS de 60 en douceur lors du défilement de grandes quantités de données! On peut voir un petit coup d’œil derrière le rideau sur la façon dont nous avons réalisé cela dans cet article .

Dans le monde de la visualisation de données, nous avons ajouté le support . exactement où les étiquettes d'un axe seront positionnées. Ceci est similaire à la manière dont les étiquettes peuvent être positionnées dans des graphiques Excel, en particulier dans les scénarios avec un axe Y négatif.

Il y a un composant majeur que je n'ai pas encore mis en place, à savoir l'implémentation Angular native du Composant Planificateur . Au moment de la rédaction de cet article, le composant n'est pas encore prêt, mais nous allons l'expédier dans quelques semaines. Un délai n'est jamais idéal, mais nous voulons nous assurer que ce composant est utilisable au moins pour certains des scénarios les plus courants lors de sa sortie initiale. Grâce à la publication de ce paquet séparé, vous n'attendez pas le R1 2019 – c'est plutôt le coin!

Pour en savoir plus sur la version Angular, nous allons suivre ce billet de blog avec un article spécifique aux widgets Angular.

Mises à jour pour le Vue Composants d'interface utilisateur .js

Wrappers de Vue.js Obtenir de nouveaux composants

Comme les Wrappers de Kendo UI pour Vue sont basés sur jQuery, nous verrons une liste très familière de la première section de cet article. Cela étant dit, jetons-y un coup d'œil.

La grande annonce ici est que les composants Vue.js sont entièrement conformes à WCAG 2.1. Ceci est une énorme nouvelle pour ceux qui cherchent à garantir que leurs applications soient aussi accessibles que possible. Le grand avantage est que tout est prêt à l'emploi sans avoir à sacrifier quoi que ce soit du point de vue de l'expérience utilisateur.

Les nouveaux composants pour R3 2018 incluent le nouveau MultiColumnComboBox qui combine la structure de la table d'une grille dans la liste déroulante d'un composant ComboBox et le composant ArcGauge le widget parfait pour un affichage efficace et magnifique des valeurs.

Mises à jour des composants Vue existants

Le composant Vue.js TreeList attire beaucoup d'attention cette version avec certaines des fonctionnalités les plus populaires mises en œuvre pour la R3 2018. Cela inclut:

La grille a également reçu quelques fonctionnalités de premier plan:

Les commentaires sont désactivés en mode aperçu.



Source link