Quoi de neuf dans l'interface utilisateur de Kendo pour Vue avec R1 2022

La version R1 2022 de Kendo UI pour Vue ajoute 15 nouveaux composants d'interface utilisateur natifs pour les développeurs Vue ainsi qu'une apparence et une convivialité améliorées pour les composants existants.

La version R1 2022 de Kendo UI pour Vue est là et avec elle vient 15 composants d'interface utilisateur natifs pour Vue de nouveaux ajouts aux kits Telerik et Kendo UI Figma, ainsi que des améliorations dans les thèmes Default, Bootstrap et Material. Il y a tellement de choses à couvrir ici, alors ne perdons pas de temps et allons-y directement. Kits pour Figma"/>

En 2021, nous avons introduit les kits d'interface utilisateur Telerik et Kendo pour Figma pour aider à améliorer la productivité et la collaboration entre les concepteurs et les développeurs des équipes utilisant l'interface utilisateur Kendo.

Avec R1 2022 , nous avons introduit des composants Figma pour tous les composants Telerik et Kendo UI (les graphiques étant la seule exception).Avec cette dernière mise à jour, les concepteurs devraient avoir encore plus d'atouts à utiliser dans leurs développements, car nous avons maintenant une représentation pour tous les composants Kendo UI pour Vue Le composant graphique est le seul manquant, et ce composant sera ajouté dans une future mise à jour. ="Options de rendu du thème de l'interface utilisateur de Kendo N ew versus Old"/>

En veillant à ce que l'interface utilisateur Kendo pour Vue puisse couvrir toutes les exigences d'interface utilisateur que nos clients peuvent avoir, nous avons investi du temps dans l'amélioration de l'interface utilisateur Kendo existante pour les thèmes Vue. Cela implique de revoir tous les composants de notre bibliothèque d'interface utilisateur Vue dans le but de simplifier les thèmes et le rendu de nos composants tout en fournissant des améliorations et des options supplémentaires pour améliorer la flexibilité de nos composants d'interface utilisateur.

Ces mises à jour auront lieu tout au long de l'année et nous commencent avec R1 2022. Avec cette version, nous avons mis à jour les ButtonsInputsDateInputs et DropDowns pour offrir le thème suivant options de rendu :

• themeColor
• fillMode
• size
• shape
• arrondi

Une remarque à faire ici est que ces mises à jour incluront des modifications radicales à l'aspect visuel de Interface utilisateur de Kendo pour Angular. Pour toute personne personnalisant nos composants ou effectuant des tests de régression visuelle, nous recommandons de prendre un peu plus de temps pour examiner ces modifications.

Des mises à jour visuelles plus importantes comme celles-ci peuvent avoir des implications sous la forme de régressions visuelles qui peuvent apparaître lors de la mise à niveau d'une ancienne version vers R1. 2022. Bien que nous pensions avoir détecté et résolu de nombreux problèmes de régression visuelle lors de la préparation de la R1 2022, il se peut que d'autres problèmes soient découverts après la publication. Nous nous engageons fermement à résoudre ces problèmes le plus rapidement possible et continuerons à publier des mises à jour avec des correctifs pour nos thèmes et composants après la sortie de R1 2022.

Pour fournir plus d'informations sur ces changements et notre plan général autour de l'interface utilisateur de Kendo thèmes, nous avons récemment publié Améliorations à venir pour les thèmes de l'interface utilisateur Telerik et Kendo en 2022.

Nouveaux composants Vue

Nouveau composant : Éditeur Vue

Le premier composant que je vais mentionner aujourd'hui est le composant Kendo UI pour Vue Editor ! C'est un What-You-See-Is-What-You- Obtenez un éditeur HTML (WYSIWYG) qui permet aux utilisateurs de créer un contenu Web riche avec des barres d'outils et des outils similaires aux outils de traitement de texte, tandis que les développeurs peuvent extraire le code HTML sous-jacent afin de modifier le contenu par programme ou même d'enregistrer le contenu dans une base de données.

Découvrez la nouvelle interface utilisateur Kendo pour Vu e Editor component docs for more information.

Nouveau composant : Vue Toolbar

La suite Le composant qui a été ajouté à Kendo UI pour Vue avec R1 2022 est le nouveau composant Vue Toolbar. L'objectif principal de ce composant est d'organiser diverses options de bouton dans un élément d'interface utilisateur qui suit une expérience utilisateur similaire aux éléments d'outils et de navigation trouvés dans les applications de bureau. Le scénario le plus courant dans la bibliothèque de l'interface utilisateur de Kendo consiste à utiliser ce composant comme base du composant Filtre ou comme principal moyen d'interagir avec l'éditeur. Bien entendu, la barre d'outils Vue peut être utilisée en tant que composant autonome.

Voici un lien rapide vers la documentation des composants de la barre d'outils Vue.

Nouveau composant : filtre Vue

Le filtrage des données est une fonctionnalité courante lorsque les applications traitent régulièrement de grands ensembles de données. Bien qu'il puisse sembler simple à première vue de filtrer les données, il peut facilement devenir incontrôlable lorsqu'il est nécessaire de combiner divers opérateurs de filtre pour créer des expressions de filtre plus complexes.C'est là qu'intervient la nouvelle interface utilisateur Kendo pour le composant Vue Filter. expressions de filtre détaillées pour aider à filtrer les données afin qu'elles correspondent à un ensemble très spécifique de variables.Ces expressions peuvent être extraites du composant pour permettre aux développeurs de filtrer leurs propres données, et le composant Vue Filter peut être combiné avec d'autres composants Kendo UI pour Vue UI s, principalement la grille de données, pour fournir des capacités de filtrage avancées à n'importe quel composant. SplitButton

En ajoutant plus à la collection de types de boutons proposés dans Kendo UI pour Vue, avec cette mise à jour, nous avons ajouté le composant Vue SplitButton. Ce type de bouton a une séparation visuelle distincte entre le texte et une flèche déroulante, et lorsque vous cliquez dessus, un menu contextuel apparaît affichant des actions supplémentaires à partir d'une liste prédéfinie. ]Nouveau composant : Vue DropDownButton

Un autre bouton ajouté avec R1 2022 est l'interface utilisateur Kendo pour le composant Vue DropDownButton. Cet élément de bouton affiche initialement un bouton normal, mais, lorsque cet élément de bouton est cliqué, une liste déroulante d'éléments d'action apparaîtra à partir du bouton. Le Vue DropDownButton peut utiliser du texte, des icônes ou un mélange des deux lors de la configuration initiale du composant.

Voici un lien direct vers les Kendo UI pour les démos du composant Vue DropDownButtom.

Avec R1 2022, nous avons également ajouté la nouvelle interface utilisateur Kendo pour le composant Vue ProgressBar . Ce nouveau composant rend un élément de barre visuelle qui peut être "remplie" comme un moyen de montrer la progression vers l'achèvement d'un processus. La Vue ProgressBar peut être affichée verticalement ou horizontalement, prend en charge le rendu de gauche à droite et est simple à utiliser – la mise à jour de la progression du composant est aussi simple que de définir un seul champ pour représenter la valeur actuelle de la ProgressBar.

Nouveau composant : Vue Loader

La nouvelle interface utilisateur Kendo pour Vue Loader permet aux développeurs d'afficher une animation visuellement agréable lorsqu'une partie de leur L'application Vue est occupée. Cela peut être extrêmement utile lorsque de grands ensembles de données ou des processus chronophages se déroulent en arrière-plan, indiquant aux utilisateurs que quelque chose arrive s'ils s'accrochent et attendent.

Jouez vous-même avec ce nouveau composant en vous dirigeant vers le Kendo UI for Vue Loader component documentation.

Nouveau composant : Vue Drawer

En ajoutant à la liste croissante des éléments de navigation dans l'interface utilisateur de Kendo pour Vue, nous ajoutons officiellement le nouveau composant Vue Drawer avec R1 2022. Parfait comme navigation latérale de toute application Web axée sur le bureau ou le mobile, le composant Vue Drawer peut être un fixe permanent, ou n'apparaissent que lorsque les utilisateurs cliquent sur un élément de l'interface utilisateur pour développer l'élément Drawer, souvent un menu hamburger. Nouveau composant : Vue Stepper[19659057]Kendo UI for Vue Stepper Component – Overview" title="Kendo UI for Vue Stepper Component – Overview"/>

Lors de la décomposition de longs formulaires ou d'un processus nécessitant plusieurs étapes, comme le processus de paiement d'un site de commerce électronique, l'interface utilisateur Kendo pour Vue Stepper est le composant d'interface utilisateur parfait à utiliser. Chaque étape montre un composant Vue, ce qui signifie que les développeurs ont un contrôle total sur le contenu et les composants affichés. Les développeurs peuvent également contrôler l'apparence visuelle de chaque étape du composant Vue Stepper pour garantir une adéquation naturelle avec toutes les exigences de conception. Il est également possible d'appliquer là où il y a un flux strict de la première étape à la dernière, ou si les utilisateurs peuvent cliquer au hasard, et la validation peut se produire à chaque étape ou lorsque l'intégralité du stepper a été parcourue.

Voici un lien direct vers les Kendo UI for Vue Stepper component docs & demos.

Nouveau composant : Vue DateRangePicker

Avec R1 2022, nous introduisons également l'interface utilisateur native de Kendo pour le composant Vue DateRangePicker. Ce nouveau composant est idéal lorsque les utilisateurs doivent sélectionner une plage de dates avec une date de début et de fin claire. Merci à afficher plusieurs calendriers côte à côte, sélectionner une plage de dates est un jeu d'enfant et les développeurs peuvent facilement extraire la date de début et de fin à utiliser ailleurs dans leurs applications Vue. DateRangePicker co Démos mponent.

Nouveau composant : Vue Gauge

Ajout à la liste croissante de données visualisations proposées aux développeurs Vue, avec cette version, nous avons inclus le nouveau composant Kendo UI pour Vue Gauge. Cela inclut les composants Arc Gauge, Linear Gauge et Radial Gauge dans un seul package, vous offrant une gamme complète de types de jauge prêts à l'emploi. .

Nouveau composant : Vue Switch

Popularisé par les systèmes d'exploitation mobiles comme iOS et Android , le composant Switch est devenu l'expérience utilisateur par défaut pour basculer entre deux valeurs. Avec R1 2022, le composant Kendo UI pour Vue Switch permettra à tout développeur Vue d'ajouter cette expérience utilisateur intuitive à ses applications. Ce composant peut être personnalisé pour inclure des étiquettes personnalisées et options de style supplémentaires pour aider le composant à répondre à toutes les exigences de conception. – Vue d'ensemble" t itle="Kendo UI for Vue Tooltip Component – Overview"/>

La nouvelle interface native Kendo pour le composant Vue Tooltip est parfaite pour tous les scénarios où des informations contextuelles supplémentaires doivent être affichées lors des interactions de survol, de mise au point ou de clic des utilisateurs. Avec la possibilité de personnaliser complètement le contenu Vue Tooltip, ainsi que des options de style flexibles, ce composant peut naturellement s'intégrer dans n'importe quelle application Vue. 19659076]Nouveau composant : Vue TextArea

En continuant d'ajouter d'importants composants d'interface utilisateur liés aux formulaires, avec R1 2022, nous ont ajouté le composant Kendo UI pour Vue TextArea. Ce composant s'étend au-dessus de l'élément HTML TextArea natif et garantit une apparence et une convivialité uniformes pour tous les éléments de l'interface utilisateur dans vos applications Vue avec la prise en charge du style des thèmes de l'interface utilisateur Kendo.

Découvrez les documents et démonstrations du composant Vue TextArea ici.

Fonctionnalités étendues du composant

Tous les graphiques Vue : couleurs et design mis à jour

Une fonctionnalité supplémentaire ajoutée à l'interface utilisateur de Kendo pour Vue Charts avec R1 2022 est le panoramique optimisé et fonctionnalité de zoom. Plus précisément, avec cette version, l'équipe Vue a amélioré la convivialité lors de l'utilisation de la molette de la souris. Le zoom est désormais cohérent dans les deux sens et le point survolé reste sous le curseur, ce qui représente une grande amélioration de la qualité de vie.[19659005]Pour jouer avec cette fonctionnalité améliorée, vous pouvez vous référer aux démos de panoramique et de zoom du composant Vue Chart.

Toutes les entrées et sélecteurs Vue : accessoires d'étiquette

La plus grande amélioration de l'interface utilisateur de Kendo pour l'équipe Vue ajoutée à travers la suite pour R1 2022 est le nouveau label qui a été ajoutée à tous les composants d'interface utilisateur trouvés dans les packages Inputs et DateInputs. La propriété label a été implémentée pour faciliter l'ajout d'un élément Floating Label à chacun des composants de l'interface utilisateur dans ces packages. Auparavant, cela nécessitait du code et des efforts supplémentaires à chaque fois qu'une étiquette flottante était utilisée, nous voulions donc réduire la complexité et rendre cela plus facile pour tous les utilisateurs de l'interface utilisateur de Kendo pour Vue. Package Vue Inputs et le Package Vue Date Inputs.

Toutes les interfaces utilisateur Kendo pour les composants Vue : les types TypeScript Vue 3 sont désormais les types par défaut

Cette mise à jour concerne toute personne utilisant l'interface utilisateur Kendo pour Vue avec TypeScript Plus précisément. Avec R1 2022, nous avons mis à jour tous les composants natifs de l'interface utilisateur Vue disponibles dans l'interface utilisateur de Kendo pour Vue afin de renvoyer les types Vue 3.0 nouveaux et mis à jour par défaut.

Pour tous ceux qui utilisent déjà activement les types Vue 2 de nos composants d'interface utilisateur , ne vous inquiétez pas, ils sont toujours disponibles à l'utilisation.

Vous trouverez plus de détails en plongeant dans la principale page de documentation de l'interface utilisateur de Kendo pour Vue et en consultant la section API de vos composants préférés.

Vous avez des commentaires ?

Bien que nous ayons ajouté tant de composants d'interface utilisateur natifs à l'interface utilisateur de Kendo pour Vue au cours de l'année dernière, nous n'avons pas encore couvert l'intégralité de la bibliothèque d'interface utilisateur de Kendo. S'il nous manque un composant, ou s'il y a une fonctionnalité particulière dont vous et votre équipe avez besoin, rendez-vous sur le Kendo UI for Vue Feedback Portal pour soumettre vos idées ou voter pour des idées existantes afin de nous assurer que nous faites évoluer l'interface utilisateur de Kendo pour Vue en fonction de vos besoins !

Webinaires et diffusions en direct

Vous voulez voir tout ce que j'ai mentionné ci-dessus en direct et en action ? Le mardi 1er février à 11 h HEnous organisons le webinaire sur la version de Kendo UI R1 2022 ! Rejoignez-nous pour découvrir les nouveautés des composants d'interface utilisateur Vue, Angular, jQuery et React ! pour Angular spécifiquement le jeudi 27 janvier à 10h00 HEet nous couvrons également KendoReact sur Twitch le mercredi 26 janvier à 10h00 HE.[19659005]Des tonnes de plaisir seront au rendez-vous, alors rendez-vous sur la page d'inscription au webinaire Kendo UI R1 2022 pour réserver votre place et participer aux festivités !