Fermer

septembre 13, 2018

Quoi de neuf pour Angular dans la version R3 2018 de l'interface utilisateur Kendo


Découvrez les changements à venir dans la version R3 2018 de l'interface utilisateur Kendo pour Angular, y compris les nouvelles notifications, les améliorations de la grille et bien plus encore.

Dans une tentative d'épargner un roman d'un blog soulignant tous les changements chaque produit dans Kendo UI j'ai essayé de séparer les choses à des articles de blog plus consommables. Bien que vous ayez pu voir certaines de ces informations dans le post de blog je souhaitais me familiariser avec les changements survenus dans la version R3 2018 de nos composants Angular natifs!

Nouveaux composants pour Angular

En ce qui concerne les nouveaux composants, l'élément le plus important que beaucoup d'entre vous ont attendu est le composant Scheduler, que je couvrirai plus tard dans une section ci-dessous. En termes d'autres nouveaux composants, la version R3 2018 d'Angular introduit le nouveau widget Notification qui offre un moyen flexible d'afficher une fenêtre contextuelle n'importe où dans votre application.

et flexible, ce qui est bien sûr important pour tout composant d'interface utilisateur tiers! Ce qui est intéressant avec ce widget, c’est que nous avons non seulement créé une apparence par défaut pour les notifications sur tous nos thèmes, mais nous avons également créé des styles pour les types de notification les plus courants.

"warning" tapez avec notre thème par défaut:

 notification angulaire-warning "title =" notification-angular-warning "/></p data-recalc-dims=

Nous avons ici le type" error "avec le même thème:

 angular -notification-error "title =" angular-notification-error "/></p data-recalc-dims=

Ces deux options peuvent être obtenues en ajustant un seul paramètre, l'option de configuration . ] Nous fournissons également la possibilité de personnaliser le contenu de la notification en transmettant une chaîne, en utilisant un modèle Angular, ou même en rendant un composant personnalisé!

 angular-notification-templates "title =" angular-notification-templates "/ ><p data-line= Dans l'image ci-dessus, nous avons un modèle pour la notification qui rend un composant personnalisé qui contient un bouton.

Pour plus d'informations sur les utilisations de la notification, je vous recommande de consulter la section de documentation Notification .

Mises à jour de composants angulaires existants

Les widgets d'interface utilisateur dans notre suite de composants natifs Angular UI.

Je sais que vous aimez entendre parler de la grille, donc pour R3 2018, nous avons ajouté les fonctionnalités suivantes.

Menu contextuel

 "angular-grid-context-menu" /></p data-recalc-dims=

Grâce aux intégrations avec le menu contextuel Angular de l'interface utilisateur Kendo, nous pouvons maintenant fournir un menu qui nous permet d'interagir avec les éléments de la grille. . Cette démonstration fournit plus de détails.

DateRangePicker comme méthode de filtrage

 Filtrage angulaire de grille de référence "title =" filtrage par grille angulaire "/></p data-recalc-dims=

le composant DateRange que nous avons introduit avec la dernière version, nous pouvons fournir un composant de filtre qui nous permet de filtrer entre un ensemble de dates dans nos données de grille. Découvrez cette démonstration pour voir .

Mise à jour des performances avec Smooth 60 FPS pendant le défilement

Un élément HUGE que je veux mentionner en parlant de la grille est que nous avons récemment examiné comment À la suite de cette étude, nous avons mis au point une méthode qui nous permet d’atteindre 60 images par seconde tout en faisant défiler des ensembles de données volumineux. et ce que nous avons fait pour améliorer la performance dans t son grand article de blog .

State Persistance

On nous demande souvent comment préserver l'état de nos composants plus complexes, et cela inclut bien sûr la grille. Cela peut inclure les éléments sélectionnés, les filtres appliqués ou l'ordre de tri. Bien entendu, cela pourrait également être utilisé lors de la pagination entre différentes pages de la grille. Quels que soient vos besoins, consultez notre état de conservation dans la démonstration Angular Grid pour voir comment l'ajouter à votre application aujourd'hui.

Position de l'axe du graphique

Dans le monde de visualisation des données, nous avons ajouté support pour positionnement des axes qui permet aux développeurs de choisir exactement où les étiquettes d'un axe seront positionnées. Ceci est similaire à la façon dont les étiquettes peuvent être positionnées dans les graphiques Excel, en particulier dans les scénarios avec un axe Y négatif.

La meilleure façon de présenter ceci est dans les images avant et après.

Avant

 -ax-label-before-title "title =" 009-chart-axis-label-before "/></p data-recalc-dims=

Après

 010-chart-axis-label-after" title = "010-chart-axis-label- après "/></p data-recalc-dims=

Voir le différent? Beaucoup plus facile à lire lorsque l'on traite à la fois des valeurs positives et négatives.

Mise à jour sur le planificateur

Le composant Planificateur a été au centre de nos préoccupations au cours des derniers mois. L'implémentation d'un composant aussi étendu n'est pas une tâche facile, ce qui explique pourquoi le composant a eu besoin de beaucoup d'énergie pour cette version. Cependant, au moment de la rédaction de ce blog, le widget Scheduler était pas encore prêt .

Bien que je m'excuse de ne pas pouvoir vous montrer ce widget aujourd'hui, nous avons besoin d'un peu plus le temps de bien faire les choses, j'ai de bonnes nouvelles! Comme nous publions des composants dans des packages individuels et que l'équipe d'ingénierie a adopté Continuous Delivery, nous pouvons libérer le composant Scheduler à la seconde où il est prêt.

Cela étant dit, le composant Scheduler sera disponible au cours des prochaines semaines. semaines ce qui signifie que bien que vous deviez attendre un peu plus longtemps, ce ne sera pas trop long – la version du planificateur est sur le point de tomber.

Quelque chose manque? Faites-nous savoir!

Nos communiqués ne seraient pas possibles sans les commentaires des gens qui utilisent nos composants, alors assurez-vous que votre voix soit entendue! Est-ce qu'il manque quelque chose dans cette version comme un composant ou une fonctionnalité particulière? Utilisez la section des commentaires ci-dessous ou envoyez-la à notre portail de commentaires pour nous assurer que nous pouvons ajouter vos commentaires à notre feuille de route!

Webinar sur l'interface utilisateur Kendo en direct! Que diriez-vous de voir les gens travailler avec les nouveaux bits en direct? Eh bien, j'ai de bonnes nouvelles, nous avons le LIVE Webinar Kendo UI qui aura lieu le 27 septembre à 11h HE! Rejoignez moi et l'équipe de développeurs de l'interface utilisateur de Kendo a ] Webinaire où nous passons à la dernière et meilleure en ondes. Réservez votre place aujourd'hui car elle est limitée!

Save My Seat


Les commentaires sont désactivés en mode prévisualisation.




Source link