Fermer

janvier 21, 2021

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


La version R1 2021 de l'interface utilisateur de Kendo pour jQuery est arrivée et elle apporte plusieurs nouveaux composants d'interface utilisateur tels que les composants FloatingActionButton et BottomNavigation, ainsi qu'une multitude de fonctionnalités pour les composants existants.

La version R1 2021 de Kendo UI for jQuery est là pour démarrer l'année en beauté. Passons directement à tous les nouveaux composants et fonctionnalités qui sont arrivés avec la version actuelle de la R1 2021!

Nouveaux composants jQuery

Nouveau composant: FloatingActionButton

 Interface utilisateur Kendo pour jQuery - Bouton d'action flottant "title =" Interface utilisateur Kendo pour jQuery - Floating Action Button "/></p data-recalc-dims=

Initialement popularisé par Material Design, mais maintenant trouvé à peu près partout, le Floating Action Button est un bouton contextuel qui exécute une action sur une page s'adapte à la fois aux applications de bureau et aux applications Web réactives. nouveau composant Kendo UI Floating Action Button, tout développeur jQuery peut profiter de cette expérience utilisateur moderne dans toutes ses applications.

Au-delà du bouton individuel, qui peut être stylé et personnalisé avec quelques options de configuration, le bouton d'action flottant jQuery fait également du sport la possibilité de définir un «numéro abrégé», ou des éléments d'action contextuels supplémentaires, qui s'animent au-dessus du bouton d'origine plus grand. Tout comme le bouton d'action principal, ces sp Les boutons de numérotation eed peuvent être personnalisés pour s'adapter à n'importe quel design.

Pour un meilleur aperçu de la façon dont la nouvelle interface utilisateur Kendo pour jQuery Floating Action Button peut s'intégrer à vos applications aujourd'hui consultez nos démos ! [19659009] Nouveau composant: BottomNavigation

 Kendo UI pour jQuery Bottom Navigation Component "title =" Kendo UI for jQuery Bottom Navigation Component "/></p data-recalc-dims=

Avec R1 2021, nous ajoutons également la nouvelle interface Kendo pour jQuery Bottom Navigation component. Il s'agit du composant d'interface utilisateur idéal pour tout type de navigation pouvant devoir s'étendre sur les ordinateurs de bureau et les appareils mobiles, offrant aux utilisateurs un moyen rapide et intuitif d'interagir avec une navigation toujours présente au bas de la page. J'ai peut-être déjà donné cela, mais le composant est entièrement réactif et peut s'adapter à la fenêtre actuelle.

Vous avez un contrôle total sur les icônes et le texte associés à chaque bouton et l'intégration à toute sorte de configuration de routage est un jeu d'enfant grâce aux diverses options de configuration et événements proposés par le composant.

Pour un meilleur aperçu du nouveau composant jQuery BottomNavigation, consultez nos démos en ligne .

Nouveau composant: ExpansionPanel

 Kendo UI pour jQuery Expansion Panel Component "title =" Kendo UI pour jQuery Expansion Panel Component "/></p data-recalc-dims=

En plus de notre liste croissante de composants axés sur la mise en page, le nouveau composant Kendo UI ExpansionPanel fournit un moyen rapide et facile de créer du contenu qui peut être développé et réduit. Le composant est divisé en deux parties: l'en-tête, qui est toujours affiché, et la zone de contenu, qui est affichée ou masquée selon que le jQuery ExpansionPanel a été développé ou coll évité. Comme pour tous nos composants, le type de contenu exact qui entre dans chacun de ces domaines est entièrement personnalisable en fournissant des modèles d'interface utilisateur Kendo.

Pour voir plus de la nouvelle interface utilisateur Kendo pour le composant ExpansionPanel de jQuery, vous pouvez trouver nos démos ici .

Nouveau composant: RadioGroup

 Kendo UI pour jQuery RadioGroup Component "title =" Kendo UI pour jQuery RadioGroup Component "/></p data-recalc-dims=

Le nouveau composant jQuery RadioGroup s'ajoute aux versions précédentes Composant RadioButton de l'interface utilisateur de Kendo. Chaque fois que deux ou plusieurs boutons radio doivent être utilisés dans une liste, vous devriez utiliser la nouvelle interface utilisateur Kendo pour le composant jQuery RadioGroup pour vous aider à gérer les options sélectionnées, la validation et la disposition des boutons radio.

Pour voir le composant jQuery RadioGroup en action rendez-vous sur nos démos en ligne .

Nouveau composant: CheckboxGroup

 Kendo UI pour jQuery CheckBoxGroup Component "title =" Kendo UI pour jQuery CheckBoxGroup Componen t "/></p data-recalc-dims=

Semblable au composant RadioGroup ci-dessus, la nouvelle interface utilisateur Kendo pour le composant jQuery Checkbox Group s'appuie sur le composant jQuery Checkbox existant et fournit des options utiles pour gérer au moins deux cases à cocher associées.

Consultez l'interface utilisateur de Kendo pour les démonstrations en ligne du composant jQuery CheckboxGroup ici !

Fonctionnalités étendues des composants

Grille – Contrôlez l'exportation sur une base de colonne

La grille de données de l'interface utilisateur Kendo a eu la possibilité d'exporter du contenu vers divers formats de fichiers comme Excel et PDF depuis un certain temps et avec R1 2021, nous améliorons encore davantage! Vous pouvez maintenant définir si une colonne doit ou non faire partie du fichier exporté. Cette configuration est effectuée colonne par colonne pour vous offrir une flexibilité ultime.

Découvrez à quoi cela ressemble en vous rendant sur pour accéder à cette démo en ligne de Kendo UI Grid .

Grid – Inclure des images dans Excel Export

En parlant des améliorations d'exportation pour la grille de données jQuery, avec R1 2021, nous avons également introduit un exemple prêt à l'emploi montrant comment exporter des images à partir de la grille d'interface utilisateur de Kendo lors de l'exportation sous forme de fichier Excel.

Pour voir à quoi ressemble le code vous pouvez vous référer à cet article de documentation sur l'interface utilisateur de Kendo pour jQuery Grid .

Grille – Trier et regrouper via le menu de la colonne

Poursuivant nos améliorations de la grille, dans R1 2021 le Kendo UI Grid a également ajouté des éléments d'interface utilisateur supplémentaires pour aider à trier et à regrouper les colonnes via le menu des colonnes. Cela peut être activé via deux options de configuration et donne aux utilisateurs finaux encore plus d'options pour interagir avec les colonnes de la grille de l'interface utilisateur de Kendo via le menu de la colonne.

Pour voir cela, toutes les nouveautés de l'interface utilisateur de Kendo pour jQuery Grid Column Rendez-vous sur cette démo en ligne .

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

 Kendo UI pour jQuery Grid - Mise à jour de la conception du menu des colonnes "title =" Kendo UI pour jQuery Grid - Mise à jour du menu des colonnes Design "/></p data-recalc-dims=

Avec toutes ces nouvelles fonctionnalités, nous devions certainement réfléchir à la manière dont nous pourrions potentiellement améliorer l'expérience utilisateur globale. Ainsi, avec la dernière mise à jour de Kendo UI Grid, nous avons également ajouté une option de configuration pour passer une nouvelle conception de menu de colonne améliorée.

Pour voir cette nouvelle conception de menu de colonne améliorée, vous pouvez consulter cette démo en ligne de Kendo UI Grid .

ListView – Grouping

 Interface utilisateur Kendo pour le composant jQuery ListView - Regroupement "titl e = "Kendo UI pour jQuery ListView Component - Grouping" /> <br data-recalc-dims= L'interface Kendo pour jQuery ListView a également reçu une grosse mise à jour avec R1 2021, ajoutant spécifiquement le regroupement. À l'instar d'autres composants liés aux données tels que la grille de données, toutes les données liées à l'interface utilisateur de Kendo ListView peuvent désormais être regroupées dans n'importe quel champ défini.

Pour voir le regroupement ListView en action, consultez cette démo en ligne .

TileLayout – Ajouter et supprimer des tuiles

 Interface utilisateur Kendo pour jQuery TileLayout Component - Ajouter et supprimer des tuiles "title =" Interface utilisateur Kendo pour jQuery Composant TileLayout - Ajouter et supprimer des tuiles "/></p data-recalc-dims=

The Kendo L'interface utilisateur pour jQuery Le composant TileLayout est déjà un composant très populaire, bien qu'il ne soit disponible que pour une seule version et avec cette popularité, les commentaires de tous nos utilisateurs. L'une des fonctionnalités les plus demandées pour le TileLayout est la possibilité d'ajouter et de supprimer des tuiles après le rendu initial du composant. Ainsi, avec R1 2021, nous avons ajouté la possibilité pour les développeurs de modifier la collection de tuiles en étant en mesure d'ajouter et de supprimer des tuiles dynamiquement.

Pour voir comment ajouter et supprimer des tuiles de votre Composant Kendo UI TileLayout ents, rendez-vous sur cette démo .

Editor: Créez une liste avec des chiffres romains

 Kendo UI pour jQuery Editor Component - Créer une liste avec des chiffres romains "title =" Kendo UI for jQuery Composant éditeur - Créer une liste avec des chiffres romains "/></p data-recalc-dims=

L'éditeur a également reçu un peu d'amour avec R1 2021. Plus précisément, nous avons ajouté la possibilité de créer des listes avec des chiffres romains. Auparavant, des listes similaires étaient construites en utilisant des nombres comme 1-3, mais avec ce nouvel outil, vous pouvez apporter de la fantaisie en énumérant les éléments comme I, II, III, IV, etc.

Cette démo de Kendo UI Editor présente tous les outils disponibles et inclut la nouvelle interface en chiffres romains.

Editor: Table Aligning Tool

 Kendo UI for jQuery Editor Component - Table Aligning Tool "title =" Kendo UI for jQuery Editor Component - Table Aligning Tool "/></p data-recalc-dims=

Une autre fonctionnalité ajoutée à l'interface utilisateur de Kendo pour jQuery Editor est la possibilité d'aligner les tableaux HTML dans le contenu de l'éditeur. Cet outil permettra aux utilisateurs d'aligner rapidement et facilement n'importe quel tableau sur le à gauche, au centre ou à droite du document de l'éditeur.

Pour voir comment fonctionne ce nouvel outil d'alignement de table pour l'éditeur d'interface utilisateur Kendo, rendez-vous sur les démos en ligne de l'éditeur jQuery .

Divers Composants – Accessibilité améliorée

Nous nous efforçons toujours de nous assurer que nous sommes aussi essible autant que possible avec Kendo UI, avec R1 2021, nous avons également introduit diverses améliorations d'accessibilité dans plusieurs de nos composants. Le plus grand impact vient avec les composants ScrollView, Drawer, Timeline et TileLayout, tous ajoutés à la navigation par clavier intégrée.

Nous voulons vos commentaires!

Avons-nous oublié un composant ou une fonctionnalité jQuery dont vous avez besoin dans vos applications Web? N'hésitez pas à ajouter un commentaire dans la section commentaires ci-dessous ou à ajouter votre demande spécifique dans notre Kendo UI pour le portail de commentaires jQuery . Notre feuille de route est guidée par les commentaires que nous avons de votre part, alors assurez-vous de fournir tous les commentaires! Peut-être avez-vous voulu me poser une question à moi-même ou à l'équipe de Kendo UI pour jQuery? Eh bien, rejoignez-nous pour le webinaire sur la version 2021 de Kendo UI R1 2021 le jeudi 28 janvier à partir de 11h00 HE ! Nous allons couvrir tout ce que j'ai mentionné ici et saupoudrer de questions-réponses comme nous pouvons tout au long de la session. 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 Place





Source link