Fermer

janvier 20, 2021

Nouveautés de l'interface utilisateur de Kendo avec R1 2021


C’est toujours excitant de commencer l’année avec une nouvelle version de Kendo UI, et la version R1 2021 de Kendo UI l’est certainement! Nous avons des tonnes de nouveaux composants et fonctionnalités que nous avons réussi à ajouter à toutes nos suites de composants d'interface utilisateur natifs pour jQuery Angular React et Vue .

Petit mot avant de commencer: puisque nous couvrons tous les produits trouvés dans Kendo UI cet article sera plus un résumé de chaque produit. À la fin de chaque section, je ferai un lien vers un article de blog plus détaillé qui va un peu plus en profondeur avec des images et autres.

(Remarque: les liens vers des articles de blog individuels seront bientôt mis en ligne comme le font les articles détaillés eux-mêmes. )

jQuery

Nouveaux composants

Nouveau composant: FloatingActionButton

Trouvé dans de nombreuses applications de bureau et mobiles modernes, le composant Kendo UI pour jQuery FloatingActionButton est, à la base, un bouton flottant qui exécute une seule action. Habituellement présenté comme un bouton circulaire avec un signe plus déclenchant l'ajout d'un élément à une liste ou même la composition d'un nouvel e-mail.

Nouveau composant: BottomNavigation

La ​​nouvelle interface utilisateur Kendo pour jQuery BottomNavigation est un élément de navigation parfait pour toute application Web réactive, permettant aux développeurs de définir une rangée de boutons disponibles pour que les utilisateurs puissent naviguer.

Nouveau composant: ExpansionPanel

L'interface utilisateur de Kendo pour jQuery ExpansionPanel est un composant de mise en page qui fournit un en-tête qui peut se développer et se réduire contenu sous-jacent. Bien sûr, l'en-tête et le contenu peuvent être entièrement personnalisés pour répondre à vos besoins.

Nouveau composant: RadioGroup

S'appuyant sur l'interface utilisateur Kendo récemment introduite pour jQuery RadioButton, le composant jQuery RadioGroup aide à organiser et à contrôler plusieurs RadioButtons.

Nouveau composant: CheckboxGroup

Le composant jQuery CheckBoxGroup permet aux développeurs de contrôler facilement le comportement d'une liste de composants Kendo UI CheckBox.

Nouvelles fonctionnalités dans les composants existants

Grid – Contrôle de l'exportation sur une colonne Base

Avec R1 2021, les développeurs peuvent désormais spécifier si une colonne particulière doit être incluse chaque fois que le contenu est exporté vers Excel ou PDF. Cela se fait colonne par colonne avec les paramètres de colonne contrôlant si la colonne doit être incluse (par défaut) ou exclue.

Grille – Inclure les images dans l'exportation Excel

Une demande populaire pour l'interface utilisateur de Kendo pour jQuery Grid consiste à inclure des images lors de l'exportation vers Excel. Ainsi, avec R1 2021, nous avons présenté un article utile expliquant comment les images de différents types peuvent être exportées avec le reste du contenu de la grille.

Grille – Trier et regrouper via le menu de colonnes

Ajout à la fonctionnalité déjà étendue défini dans l'interface utilisateur de Kendo pour le menu de colonnes de jQuery Grid, les utilisateurs peuvent désormais définir s'ils veulent trier ou regrouper une colonne via le menu de la colonne.

Grid – Mise à jour de la conception du menu de la colonne

disponible immédiatement avec le menu de colonnes de Kendo UI Grid, nous avons pris un certain temps pour réorganiser l'apparence de cette partie de la grille. Par défaut, le composant Grid restituera le même aspect et la même sensation que d'habitude, mais une option de configuration permettra de passer au nouveau design.

ListView – Grouping

Une de nos demandes de fonctionnalités les plus populaires, avec R1 2021, le Kendo L'interface utilisateur pour jQuery ListView a ajouté la possibilité de regrouper des données et de fournir une expérience utilisateur pour développer et réduire lesdits groupes.

TileLayout – Ajouter et supprimer des tuiles

Avec R1 2021, le composant jQuery TileLayout inclut des fonctionnalités pour ajouter ou supprimer des tuiles après le Le composant a été initialement rendu.

Editeur: Créer une liste avec des chiffres romains

Extension des outils disponibles dans l'interface utilisateur de Kendo pour l'éditeur jQuery, avec R1 2021, toute liste ordonnée peut désormais être écrite en chiffres romains.

Editeur: outil d'alignement de table

Le nouvel outil d'alignement de table pour l'éditeur d'interface utilisateur Kendo permet aux utilisateurs d'aligner n'importe quel tableau à gauche, au centre ou à droite du contenu de l'éditeur.

Divers composants – Accessibilité améliorée

Ac La cessibilité est une partie importante de l'interface utilisateur de Kendo pour jQuery et dans le cadre de notre engagement continu à respecter les normes d'accessibilité, nous avons examiné nos composants existants et mis en œuvre des améliorations. Le plus grand impact vient des composants TileLayout, Drawer, Timeline et ScrollView qui ont tous ajouté la navigation au clavier en tant que fonctionnalité intégrée.

Pour plus d'informations

Pour voir des informations plus détaillées, ainsi que des images et des gifs, rendez-vous sur l'article de blog Quoi de neuf dans Kendo UI pour jQuery avec R1 2021 (lien à venir).

Angular

Nouveaux composants

Nouveau composant: DropDownTree

Le nouveau composant Angular DropDownTree marie le composant hiérarchique disposition des données d'un TreeView avec un DropDown. Cela permet à un élément d'entrée unique de contenir un TreeView complet avec lequel il est possible d'interagir pour sélectionner une valeur.

Nouveau composant: MultiColumnComboBox

Dans la même veine que le DropDownTree mentionné ci-dessus, la nouvelle interface utilisateur Kendo pour Angular MultiColumnComboBox fournit un DropDownList où la liste des éléments est une structure de tableau, laissant chaque élément avoir plusieurs colonnes avec des informations affichées.

Nouveau composant: TileLayout

L'interface utilisateur Kendo pour le composant TileLayout angulaire est parfait pour toute application de tableau de bord qui a besoin d'afficher plusieurs KPI avec lesquels les utilisateurs finaux peuvent interagir. Ce nouveau composant donne aux développeurs la possibilité de définir une mise en page avec une liste de tuiles contenant du contenu personnalisé basé sur des modèles angulaires. Ces tuiles peuvent être glissées et déposées pour être réorganisées, permettant aux utilisateurs finaux de découvrir leur disposition idéale.

Nouveau composant: FloatingActionButton

Popularisée par des applications Web comme gmail et d'innombrables applications mobiles, la nouvelle interface utilisateur Kendo pour Angular FloatingActionButton fournit un bouton d'action contextuelle qui peut être affiché comme un bouton flottant sur n'importe quelle page.

Nouveau composant: ExpansionPanel

Avec R1 2021, nous introduisons également le composant Angular ExpansionPanel. Ce composant fournit une zone de contenu extensible avec un en-tête toujours affiché. Le contenu de l'en-tête ainsi que le contenu peuvent être pilotés via des modèles angulaires.

Nouveau composant: TextArea

La ​​nouvelle interface Kendo pour le composant Angular TextArea élève l'élément HTML TextArea au niveau des autres interfaces utilisateur Kendo pour les composants angulaires , offrant de nombreuses fonctionnalités supplémentaires et une présentation cohérente de tous les éléments de l'interface utilisateur de vos applications Angular.

Nouvelles fonctionnalités des composants existants

Prise en charge d'Angular 11

Alors que Kendo UI for Angular a connu le jour zéro support pour Angular 11 depuis sa sortie le 11 novembre 2020 Je voulais faire une note supplémentaire sur ce support car il faisait partie de nos efforts de développement pour R1 2021!

Grid & TreeList – Responsive Pager

With R1 2021, le pager intégré qui apparaît lorsque l'interface utilisateur de Kendo pour les composants Angular Grid ou TreeList définit la pagination sur true est maintenant entièrement réactif. Cela permet au pagineur de répondre à la fenêtre actuelle lorsque le navigateur est redimensionné ou d'adhérer à la plus petite fenêtre lorsqu'il est affiché sur des appareils mobiles.

ListView – Édition intégrée

Ajout à l'interface utilisateur de Kendo pour le composant Angular ListView, avec R1 2021, ListView dispose désormais d'une fonction d'édition intégrée pour aider les utilisateurs à modifier toutes les données affichées via le composant.

ListView – Navigation au clavier et conformité d'accessibilité

En continuant avec l'interface utilisateur de Kendo pour Angular ListView, nous avons également ajouté la navigation au clavier et d'autres éléments liée à l'accessibilité, permettant à Angular ListView d'être compatible avec les normes WCAG 2.0, Section 508 et WAI-ARIA.

TreeView – Filtrage intégré

L'interface utilisateur de Kendo pour Angular TreeView comprend désormais des éléments d'interface utilisateur intégrés pour aide à filtrer les éléments disponibles dans TreeView.

Editor – Prise en charge de plus d'éléments HTML

L'interface utilisateur de Kendo pour Angular Editor a reçu une mise à jour pour permettre l'affichage d'éléments HTML supplémentaires dans le contenu, supprimant certaines restrictions de ce qui peut et ne peut pas être affiché dans l'éditeur.

Editor – Prise en charge des schémas personnalisés

Tout comme les éléments de la zone de contenu de l'interface utilisateur de Kendo pour Angular Editor, nous prenons désormais également en charge les éléments personnalisés à ajouter grâce à la prise en charge des schémas personnalisés.

Calendar and MultiViewCalendar – Classic Rendering

Pour les utilisateurs de Kendo UI pour jQuery, ou nos offres ASP.NET MVC ou ASP.NET Core qui sont passées à Angular, nous ont introduit le mode «Classic Rendering» de l'interface utilisateur de Kendo pour les composants Angular Calendar et MultiViewCalendar, permettant aux utilisateurs de conserver la même apparence dans toutes ces bibliothèques d'interface utilisateur.

TimePicker & DateTimePicker – Prise en charge de la milliseconde

Avec R1 2021 les deux TimePicker et DateTimePicker prennent en charge l'affichage des millisecondes dans leurs interfaces.

Pour plus d'informations

Pour voir des informations plus détaillées, ainsi que des images et des gifs, rendez-vous sur t o l'article du blog Quoi de neuf dans Kendo UI pour Angular avec R1 2021 (lien à venir).

React

Nouveaux composants

Nouveau composant: TileLayout

Vous recherchez un composant de tableau de bord qui permet à vos utilisateurs de faire glisser et laisser tomber les KPI? Ne cherchez pas plus loin que le nouveau composant KendoReact TileLayout. Ce composant React UI permet aux développeurs de définir une collection de tuiles qui peuvent être glissées et déposées pour réorganiser leur ordre.

Nouveau composant: DropDownTree

Le nouveau composant KendoReact DropDownTree fournit une interface DropDownList avec un TreeView interne, permettant aux développeurs d'enregistrer un tonne de biens immobiliers car une fois qu'une valeur est sélectionnée, la fenêtre contextuelle se réduira.

Nouveau composant: MultiColumnComboBox

Le nouveau KendoReact MultiColumnComboBox est un composant ComboBox où la liste des éléments est affichée dans une table de données, autorisant les éléments pour avoir plusieurs champs affichés à la fois dans une structure de colonne.

Nouveau composant: FloatingActionButton

Le nouveau KendoReact FloatingActionButton fournit un bouton d'action contextuelle qui «flotte» quelque part dans vos applications React. Les cas d'utilisation courants incluent un bouton avec un signe plus pour ajouter des éléments à une liste ou composer un nouvel e-mail.

Nouveau composant: BottomNavigation

Le composant KendoReact BottomNavigation est un excellent composant pour servir de navigation principale pour tout site Web réactif application ou PWA. Comme la navigation dans de nombreuses applications mobiles que vous utilisez aujourd'hui, le composant React BottomNavigation fournit une série d'onglets avec lesquels vous pouvez interagir pour accéder à une nouvelle page.

Nouveau composant: ListBox

Avec le nouveau composant KendoReact ListBox les développeurs disposent d'un excellent composant d'interface utilisateur pour afficher une liste d'éléments dans une zone définie pouvant être parcourue. Vous pouvez également ajouter plusieurs composants React ListBox à une page et ajouter une interface de boutons pour vous aider à déplacer un ou plusieurs éléments entre les éléments déplacés entre les ListBox.

Nouveau composant: Icon & SvgIcon

Avec R1 2021, nous introduisent également les composants KendoReact Icon et SvgIcon qui servent de composants à ajouter des icônes dans une application React. La bonne nouvelle est que cela permet aux développeurs d'accéder aux plus de 400 icônes disponibles sur KendoReact.

Nouvelles fonctionnalités des composants existants

Support React 17

Entre R3 2020 et R1 2021 React 17 est sorti. Bien qu'il ait été notoirement étiqueté comme une version sans fonctionnalités, il y avait encore des changements qui affectaient les bibliothèques de composants d'interface utilisateur comme KendoReact. Heureusement, nous avons corrigé ces changements et sommes compatibles avec React v17 depuis le premier jour.

Grille, TreeList, Editor et Gantt – Navigation au clavier intégrée

Alors que beaucoup de ces composants ont déjà eu la possibilité de naviguer à travers tous éléments via la navigation au clavier, quels raccourcis clavier utiliser et comment le développeur a dû les implémenter. Bien que cela donne beaucoup de contrôle, ce n’est pas aussi facile que de définir une seule propriété et de participer aux courses. Avec R1 2021, nous avons jeté un coup d'œil à la grille KendoReact, TreeList, Editor et Gantt et ajouté la navigation au clavier si elle n'existait pas auparavant, et mis à jour leur implémentation de navigation au clavier pour fournir des valeurs par défaut saines lorsque la navigation est activée.

Grid – Amélioration des performances dans la gestion des états pour les cellules de données

La ​​grille KendoReact a reçu quelques améliorations sous le capot avec R1 2021. Plus précisément, nous avons amélioré les performances concernant la façon dont la gestion des états est effectuée au niveau de la cellule.

Gantt – Édition [19659007] Une autre fonctionnalité fournie pour le composant KendoReact Gantt est l'édition intégrée. Désormais, les tâches peuvent être modifiées à la fois via l'interface TreeList et en interagissant avec les tâches rendues. L'édition se fait via un formulaire d'édition intégré qui apparaît dans un composant de dialogue sous forme de fenêtre contextuelle.

Avatar – Nouvelles options et design mis à jour

Avec R1 2021, nous avons également étendu le composant React Avatar pour fournir des options de configuration supplémentaires. comme mise à jour de l'apparence pour aider à rendre ce composant React aussi flexible que possible.

Scheduler – Formulaire personnalisé et éditeur de formulaire

Une grande fonctionnalité pour les fans de React Scheduler que nous avons ajouté avec R1 2021 est le possibilité d'implémenter un formulaire personnalisé et un éditeur de formulaire. Cela permet aux développeurs de prendre un contrôle total sur ce qui est exactement affiché lorsque l'interface d'édition apparaît lorsque les utilisateurs ajoutent ou mettent à jour des événements dans le planificateur.

Scheduler – Current Time Marker

Le KendoReact Scheduler a également reçu une autre fonctionnalité populaire avec R1 2021: le Marqueur de l'heure actuelle. Le nom le donne en quelque sorte, mais cela montre une ligne horizontale à travers l'interface du planificateur pour montrer l'heure actuelle sur les événements affichés.

Pour plus d'informations

Pour voir des informations plus détaillées, ainsi que des images et des gifs , rendez-vous sur le billet de blog Quoi de neuf dans KendoReact avec R1 2021 (lien à venir).

Vue

Nouveaux composants

Nouveau composant: MultiSelect

Le nouveau composant natif Vue MultiSelect permet aux utilisateurs de choisir plusieurs entrées d'une liste d'articles disponibles. Chaque élément est affiché sous forme de texte ou de jeton dans la zone de saisie MultiSelect pour afficher les éléments actuellement sélectionnés.

Nouveau composant: Fenêtre

L'interface utilisateur de Kendo pour le composant Vue Window sert de fenêtre mobile pouvant héberger une large gamme de contenu. La fenêtre Vue fournit également des fonctionnalités telles que afficher / masquer, maximiser, réduire, etc.

Nouveau composant: Time Picker

Poursuivant la tendance à ajouter des éléments de formulaire à Kendo UI pour Vue, avec R1 2021, nous avons ajouté le Vue TimePicker composant. Ce composant de l'interface utilisateur Vue donne aux utilisateurs une liste déroulante des plages horaires disponibles parmi lesquelles un utilisateur peut sélectionner.

Nouveau composant: DateTimePicker

L'interface utilisateur Kendo pour le composant Vue DateTimePicker combine le nouveau Vue TimePicker et le Vue DatePicker existant en un seul composant, permettant aux utilisateurs de sélectionner à la fois la date et l'heure du jour dans une seule interface.

Nouveau composant: Slider

Le dernier composant d'interface utilisateur natif ajouté à Kendo UI pour Vue est le curseur, offrant aux utilisateurs une interface intuitive pour la sélection une valeur en faisant glisser un gestionnaire pour aboutir à une valeur particulière. Il s'agit d'une grande amélioration UX par rapport à la saisie manuelle des valeurs.

Nouvelles fonctionnalités dans les composants existants

Grid – Navigation au clavier améliorée

L'interface utilisateur Kendo pour Vue Grid a reçu une navigation au clavier améliorée avec R1 2021. Plus précisément, nous avons ajouté des valeurs par défaut saines pour ce qui se passe lorsque les développeurs activent la navigation au clavier au lieu de compter sur le développeur pour implémenter ce qui doit se passer et quand pendant les interactions avec le clavier.

Grille – Sélectionnez les colonnes via le menu des colonnes

Avec R1 2021, l'interface utilisateur Kendo pour l'équipe Vue a également ajouté la possibilité pour les utilisateurs de sélectionner des éléments à afficher dans une colonne via une liste de cases à cocher dans le menu de la colonne.

Pour plus d'informations

Pour voir des informations plus détaillées, ainsi que des images et des gifs, rendez-vous sur à l'article de blog Quoi de neuf dans l'interface utilisateur de Kendo pour Vue avec R1 2021 (lien à venir).

Avez-vous des commentaires?

Tous les nouveaux composants et fonctionnalités énumérés ci-dessus proviennent des commentaires de nos clients. Si nous avons manqué un composant ou une fonctionnalité en particulier que vous attendiez maintenant, c'est le moment de faire entendre votre voix! Chacune des bibliothèques d'interface utilisateur pour jQuery, Angular, React et Vue possède son propre portail de commentaires public où vous pouvez créer de nouveaux éléments, ainsi que voter et commenter les éléments existants. Pour trouver chaque portail, vous pouvez soit consulter les articles détaillés mentionnés ci-dessus, soit vous rendre sur la page principale de Telerik Feedback et trouver le produit qui vous intéresse.

Rejoignez-nous pour un webinaire en direct !

C'est une version assez chargée et votre tête peut nager de tous les nouveaux détails! Pour vous aider, nous avons mis en place un webinaire sur la version 2021 de Kendo UI R1 2021 le jeudi 28 janvier à partir de 11h00 HE ! Moi-même et le reste de l'équipe de l'interface utilisateur de Kendo plongerons dans tous les composants et fonctionnalités jQuery, Angular, React et Vue que nous avons introduits avec cette version. Nous aurons également du temps dédié pour les questions et réponses, alors venez poser toutes vos questions! Pour plus de détails, rendez-vous sur notre page d'inscription au webinaire . Les places sont limitées, alors n’oubliez pas de prendre votre place dès aujourd'hui!

Save My Seat





Source link