Mise à jour d’octobre 2022 de l’interface utilisateur de Kendo

Découvrez les nouveautés de certains de nos produits JavaScript Kendo UI !

Dans le temps qui s’est écoulé depuis notre Version R3 2022l’équipe a travaillé dur pour mettre à jour nos produits, et aujourd’hui nous allons examiner Interface utilisateur de Kendo pour Angular, KendoRéagir et Interface utilisateur de Kendo pour Vue mises à jour.

Interface utilisateur de Kendo pour Angular

Nouveau composant : Angular ActionSheet

La Interface utilisateur de Kendo pour Angular Le composant ActionSheet fournit une liste d’options, ou « actions », que les utilisateurs peuvent sélectionner dans une fenêtre contextuelle modale qui apparaît en bas de l’écran des utilisateurs.

Traditionnellement, cette expérience utilisateur cible principalement les applications mobiles, mais il existe également des scénarios dans lesquels les applications qui ciblent les environnements de bureau peuvent utiliser le composant ActionSheet.

Chaque élément de la liste peut être configuré pour avoir sa propre icône, texte et événement qui se déclenche lorsque l’utilisateur interagit avec Angular ActionSheet.

Voir la démo Angular ActionSheet.

Grille de données angulaire : option de taille automatique du menu des colonnes

Avec cette mise à jour, l’interface utilisateur de Kendo pour Angular Grid a désormais la possibilité pour les utilisateurs finaux de pouvoir dimensionner automatiquement une colonne via le menu de colonne intégré, accessible à partir de l’en-tête de colonne de chaque colonne. Cela permettra à la colonne d’ajuster automatiquement sa largeur pour s’assurer qu’elle correspond au contenu disponible dans la colonne.

Voir la démo du menu de colonne de grille de données angulaire.

Graphiques angulaires : prise en charge des étiquettes dans les graphiques à puces

L’interface utilisateur de Kendo pour les graphiques angulaires a ajouté la prise en charge des étiquettes dans l’interface utilisateur de Kendo pour les graphiques à puces angulaires. Auparavant, les graphiques à puces ne prenaient pas en charge les étiquettes, mais avec cette mise à jour, les développeurs peuvent ajouter des étiquettes à n’importe lequel de leurs graphiques à puces angulaires via une simple option de configuration.

Voir la démo Angular Bullet Chart Labels.

KendoRéagir

React TabStrip : onglets déroulants

L’une des fonctionnalités les plus demandées pour le KendoRéagir Le composant TabStrip a été la possibilité de faire défiler les onglets. Eh bien, l’attente est terminée ! Avec cette mise à jour, nous pouvons annoncer qu’avec cette mise à jour, le composant React TabStrip a ajouté la possibilité de faire défiler les onglets disponibles.

Les onglets défilants sont importants dans les scénarios où le TabStrip doit avoir une largeur spécifique et le nombre d’onglets disponibles nécessite une plus grande largeur pour s’afficher.

Voir la démo des onglets défilants de KendoReact.

React Charts : nouvelle propriété de sous-titres

Les graphiques React ont ajouté la fonctionnalité de sous-titre, permettant aux développeurs de définir un sous-titre pour l’un des types de graphiques disponibles dans KendoReact. Le sous-titre fournit un élément de style unique sous le titre principal des graphiques React et peut être défini via une seule option de configuration.

Voir la démo React Charts Subtitle Property.

React Charts : prise en charge des étiquettes dans les graphiques à puces

Les graphiques à puces React ont également reçu une mise à jour avec la nouvelle fonctionnalité qui ajoute la prise en charge des étiquettes d’affichage. Grâce à cette fonctionnalité, les développeurs peuvent facilement ajouter des étiquettes à n’importe lequel de leurs graphiques à puces React, donnant aux utilisateurs des informations plus contextuelles pour les visuels avec lesquels ils interagissent.

Voir la démo React Bullet Charts Displaying Labels.

Interface utilisateur de Kendo pour Vue

Nouveau composant Vue natif : AppBar

Le nouveau Interface utilisateur de Kendo pour Vue Le composant AppBar est l’élément d’interface utilisateur parfait à utiliser comme navigation pour n’importe quelle application Vue. Conçue dans un souci de flexibilité, la Vue AppBar propose des blocs de construction pour la conception de menus et de navigations pouvant contenir des liens textuels, des barres de recherche, des icônes contenant des menus déroulants et bien plus encore. De plus, la Vue AppBar peut être configurée pour être affichée en haut de la page et disparaître lors du défilement vers le bas, ou rester constamment en haut de la page pendant que les utilisateurs défilent.

Voir la démo Vue AppBar.

Nouveau composant Vue natif : BottomNavigation

Allant de pair avec le composant Vue AppBar, le nouveau composant Kendo UI pour Vue BottomNavigation offre aux développeurs un moyen rapide de créer un élément de navigation qui sera toujours affiché en bas de n’importe quel écran.

Bien que très populaire sur les appareils mobiles, l’expérience utilisateur couverte par le composant Vue BottomNavigation peut également trouver sa place sur les applications Web axées sur le bureau.

Les éléments de navigation dans le composant Vue BottomNavigation peuvent être des icônes, du texte ou un mélange de texte et d’icônes, et ils peuvent être entièrement personnalisés à l’aide de modèles Vue.

Voir la démo Vue BottomNavigation.

Nouveau composant Vue natif : ExpansionPanel

Le nouveau composant Kendo UI pour Vue ExpansionPanel fournit une interface intuitive pour développer et réduire une zone de contenu n’importe où dans une application Vue. Chaque ExpansionPanel a une zone de titre et une zone de contenu, la zone de titre étant toujours affichée et représentant l’élément principal pour contrôler la fonctionnalité d’expansion et de réduction. La zone de contenu n’a aucune limitation, les développeurs peuvent donc fournir n’importe quel modèle Vue personnalisé pour définir le contenu.

Voir la démo Vue ExpansionPanel.

Vue TreeList : édition

Lancement d’un large éventail de fonctionnalités dans l’interface utilisateur de Kendo pour le composant Vue TreeList, l’une des fonctionnalités les plus importantes ajoutées à cette version est la fonctionnalité d’édition TreeList.

L’option d’édition intégrée permet aux utilisateurs de placer une ligne entière en mode édition, de modifier des cellules individuelles une par une ou de présenter tous les champs pouvant être modifiés dans une boîte de dialogue modale.

Voir les démos Vue TreeList Editing.

Vue TreeList : opérations sur les colonnes

Le composant Kendo UI pour Vue TreeList a également ajouté plusieurs fonctionnalités relatives au travail avec les colonnes de Vue TreeList. Ces fonctionnalités incluent :

• Redimensionnement de colonne – Permet aux utilisateurs de redimensionner la largeur d’une colonne à l’aide de gestionnaires de redimensionnement intégrés
• Réorganisation – Permet aux utilisateurs de réorganiser l’ordre des colonnes affichées
• Menu Colonne – Fournit un menu avec des actions qui peuvent être prises pour chaque colonne, y compris des éléments tels que l’affichage ou le masquage d’une colonne, le filtrage, le tri et bien plus encore
• En-têtes multi-colonnes – Permet aux développeurs de définir des en-têtes qui s’étendent sur plusieurs colonnes, ce qui peut être utile pour regrouper des colonnes et des champs associés
• Colonnes verrouillées – Également connue sous le nom de colonnes figées, cette fonctionnalité permet de verrouiller les colonnes de chaque côté de la TreeList lorsque les utilisateurs font défiler la liste des colonnes disponibles
• Virtualisation de colonne – Améliore les performances pour les scénarios où un TreeList contient une grande collection de colonnes et optimise quand et comment afficher les colonnes pour créer une expérience de défilement fluide

Voir les démonstrations d’opération de colonne Vue TreeList.

Vue TreeList : Glisser-déposer des lignes

Avec cette mise à jour, l’interface utilisateur de Kendo pour Vue TreeList a également ajouté une nouvelle fonctionnalité de glisser-déposer, permettant aux utilisateurs finaux de réorganiser l’une des lignes disponibles dans une TreeList.

La fonctionnalité de glisser-déposer de Vue TreeList peut également être utilisée pour réorganiser la hiérarchie au sein de Vue TreeList, permettant de faire glisser les lignes enfants au niveau parent ou même jusqu’au niveau racine si nécessaire.

Voir la démo Vue TreeList Row Drag & Drop.

Vue TreeList : exportation PDF

La dernière mise à jour du composant Vue TreeList que nous pouvons annoncer aujourd’hui est la nouvelle fonctionnalité d’exportation PDF intégrée. Lorsqu’elle est activée, la fonction d’exportation PDF de Vue TreeList affiche une barre d’outils avec un bouton « Exporter au format PDF » en haut du composant TreeList.

La génération de PDF peut être configurée pour exporter uniquement les données actuellement affichées ou l’ensemble des données disponibles pour le composant Vue TreeList. De plus, chaque fichier PDF peut ajouter du contenu PDF supplémentaire ainsi que des formats de papier personnalisés (y compris les paramètres de marge et de remplissage) pour garantir que le PDF généré peut répondre à toutes les exigences.

Voir la démo Vue TreeList PDF Export.

Vue Grid : article de documentation sur l’état persistant

La dernière note à ajouter à cette mise à jour est le nouvel article de documentation Vue Data Grid Persist State, qui montre comment implémenter la persistance d’état dans l’interface utilisateur de Kendo pour Vue Data Grid.

L’objectif de cet article de documentation est de montrer comment des aspects tels que l’ordre des colonnes, les préférences d’affichage, la page actuelle, les options de filtrage, etc. peuvent tous être enregistrés dans un état qui peut être rétabli ou enregistré pour la prochaine fois que l’utilisateur visualise à nouveau la page. .

Voir l’article de documentation Vue Data Grid Persist State.

Restez à l’écoute pour plus

Nous travaillons toujours à l’amélioration de nos produits, comme vous le savez, nous en reparlerons donc bientôt. 😉