Fermer

mai 12, 2021

Nouveautés de l'interface utilisateur de Kendo pour Angular avec R2 20214 minutes de lecture



La version R2 2021 de l'interface utilisateur de Kendo pour Angular est arrivée.

Avec cette version, nous franchissons officiellement le seuil des 100 composants d'interface utilisateur tout en introduisant des fonctionnalités très demandées et des composants d'interface utilisateur qui plairont à coup sûr à tout développeur Angular. Sans plus tarder, passons directement au dernier et au meilleur de Angular avec R2 2021.

Kendo UI pour Angular Turns 100!

Bien que nous puissions normalement mesurer l'âge d'un élément par années, avec une bibliothèque de composants d'interface utilisateur, je préfère mesurer par le nombre total de composants. Je suis absolument ravi d'annoncer qu'avec R2 2021 Kendo UI pour Angular officiellement a plus de 100 composants d'interface utilisateur prêts à l'emploi pour les développeurs Angular. C'est une étape importante, et j'espère que vous vous joindrez tous à moi pour souhaiter à Kendo UI pour Angular une bonne journée de plus de 100 composants d'interface utilisateur! 🥳

Nouveaux composants angulaires

Nouveau composant: navigation par le bas angulaire

 Une boîte de réception de courrier est affichée sur un téléphone mobile. Trois aperçus de courrier électronique s'affichent, et en bas se trouve la navigation. Boîte de réception, calendrier et profil ont chacun une icône et une étiquette, et La boîte de réception est actuellement sélectionnée, affichée en rose r que le noir des deux autres.

Le composant Angular BottomNavigation sert d'élément de navigation intuitif pour toute application Web. Le plus souvent trouvé dans les applications mobiles, les applications Web réactives ou les applications Web progressives (PWA), le composant BottomNavigation est affiché en bas de l'écran, mettant en évidence les options de navigation pour l'utilisateur.

Les éléments individuels peuvent être personnalisés pour n'afficher que du texte, des icônes ou une combinaison des deux, et bien sûr avec une personnalisation CSS ou Sass supplémentaire, peuvent être faites pour s'adapter à n'importe quelle conception dont vous pourriez avoir besoin. Ce composant peut s'intégrer au routeur angulaire, faisant de Angular BottomNavigation un composant de navigation intuitif pour toute application angulaire.

Découvrez une démo de BottomNavigation en action ici.

Nouveau composant: Angular MultiSelectTree [19659013] Une barre en haut montre une barre de texte remplie de deux éléments, chacun avec un X pour la démontabilité: Canapés et Linge de lit. Sous cette barre se trouve une liste. Le mobilier est élargi pour afficher des tables et des charis, des canapés et des meubles d'appoint. Sofas a une coche, tandis que Furniture a un carré rose dans sa case à cocher, indiquant qu'un élément est sélectionné, mais pas toute la liste. De même, Decor a une boîte rose et est développé pour afficher les articles enfants Linge de lit (avec une coche) et tapis.  » title= »Kendo UI for Angular MultiSelectTree Component – Overview »/>

Poursuivant la tendance à ajouter de plus en plus de scénarios que le package Kendo UI for Angular DropDowns peut gérer, avec R2 2021, nous présentons le composant Angular MultiSelectTree. À la base, ce composant combine la structure hiérarchique de TreeView dans une liste déroulante MultiSelect, ce qui signifie que les utilisateurs peuvent sélectionner plusieurs valeurs dans une liste déroulante contenant un TreeView.

Ceci est similaire à Angular DropDownTree, introduit dans notre version précédente, mais la plus grande différence est le comportement MultiSelect. Les valeurs sélectionnées s'affichent sous forme de texte ou de jetons et peuvent être ajoutées, modifiées ou supprimées en plaçant simplement le curseur à l'intérieur de l'élément d'entrée du composant.

Pour en savoir plus sur Angular MultiSelectTree, rendez-vous sur notre site en ligne documentation et démos.

Nouveau composant: Jauge circulaire angulaire

 Un composant de jauge circulaire a un cercle gris clair et le gris est remplacé par du rose dans une animation dans le sens des aiguilles d'une montre. À l'intérieur du cercle, un pourcentage correspondant est affiché, commençant à 10% et augmentant à 90% à mesure que la bordure du cercle devient de plus en plus rose.

Le nouveau composant Angular Circular Gauge reprend le déjà populaire composant Angular Arc Gauge et crée une nouvelle visualisation de données qui couvre un cercle complet plutôt qu'un arc arbitraire. Cela inclut la prise en charge d'une étiquette centrale, des graduations et plus encore pour s'assurer que ce nouveau composant de visualisation de données peut s'adapter à n'importe quel motif que vous lui lancez.

Rendez-vous sur la page de démonstration de la jauge circulaire angulaire pour plus d'informations.

Nouveau composant: Squelette angulaire

 Une image de chargement de squelette montre la même structure de clé qu'une carte à côté, juste en gris plutôt qu'avec les détails. Le gris change de couleur, indiquant qu'il se passe quelque chose.

Avec la nouvelle interface utilisateur Kendo pour le composant Angular Skeleton, les développeurs peuvent améliorer les performances perçues de leurs applications en créant des éléments et des formes d'espace réservé qui représentent le contenu concerné. à charger. Cela donne aux utilisateurs l'impression que quelque chose se charge à peu ou pas de frais, car il ne s'agit que de HTML et de CSS sous la forme de tout ce qui est sur le point d'être affiché.

Pour cette version initiale, nous couvrons quelques formes telles que des lignes, des rectangles et cercles pour donner aux développeurs Angular une base solide pour créer leurs propres éléments de chargement.

Voici un lien rapide vers les Démos du composant Angular Skeleton .

Caractéristiques des composants étendus

Grille angulaire: Colonnes collantes et Sticky Rows

 Dans une grille, l'utilisateur fait défiler vers la droite. La première colonne, Catégorie, est verrouillée en place. La troisième colonne, En stock, se verrouille à la deuxième place une fois qu'elle se heurte à la catégorie. Les autres colonnes continuent à défiler.

Alors que la grille angulaire a la capacité de verrouiller des colonnes depuis un certain temps, avec R2 2021, nous étendons cette fonctionnalité pour créer des colonnes «collantes» [19659030] et lignes. Pour ceux qui ne sont pas familiers, un élément «collant» fait référence à un élément qui peut être verrouillé à un moment donné, mais qui peut devenir une colonne ou une ligne normale après les interactions de l'utilisateur.

Pour les colonnes, être collant signifie que la colonne, lorsqu'elle est défilée, persistera sur le côté gauche ou droit (partout où d'autres colonnes verrouillées peuvent être placées, le cas échéant). Si vous faites défiler dans l'autre sens, la colonne se déverrouillera et sera replacée dans sa position d'origine.

Pour les lignes, nous cherchons plutôt à coller la ligne en haut ou en bas de la vue actuelle de la grille, ce qui permet aux lignes de être coincé dans une zone pendant que les utilisateurs continuent de faire défiler, mais cela finira par être une ligne normale une fois que les utilisateurs reviendront sur sa position d'origine.

Avec R2 2021, l'interface utilisateur Kendo pour Angular Data Grid prend en charge les colonnes et les lignes persistantes. , vous permettant de profiter de cette fonctionnalité pour le défilement horizontal et vertical.

Regardez la démo Angular Grid sticky columns et la Angular Grid sticky rows demo .

Angular Grille: regroupement persistant

Avec R2 2021, nous avons continué à offrir plus d'options prêtes à l'emploi pour la persistance l'état de la grille angulaire en permettant de conserver l'état développé ou réduit des groupes pendant les opérations de données (pagination, tri, filtrage, etc.). Alors que cela était auparavant possible en gardant manuellement une trace de l'état des groupes, cela peut maintenant être suivi par la table de données angulaire elle-même via des options de configuration simples.

Pour les personnes intéressées, voici la Démonstration de l'état de persistance de la grille de données angulaire .

Grille angulaire: accessibilité améliorée

Un autre effort qui Nous avons choisi R2 2021 pour approfondir la conformité d'accessibilité de la grille de données angulaire.La conformité de l'accessibilité étant l'une des principales priorités de Kendo UI pour Angular, nous voulons continuer à nous améliorer dans ce domaine afin que tout le monde utilise notre interface utilisateur angulaire. com

Plus précisément, nous avons trouvé des améliorations que nous pourrions ajouter pour cette version en utilisant le Filter Menu Filter Row Column Menu ainsi que la Checkbox Column . Cela inclut l'ajout d'une prise en charge supplémentaire pour la navigation au clavier dans le menu Filtre et le menu Colonne. Au-delà de cela, nous avons également pris en charge plusieurs rapports de bogues autour des problèmes d'accessibilité pour une amélioration générale de l'accessibilité à tous les niveaux.

Pour d'autres éléments liés à l'accessibilité, vous pouvez vous diriger vers Kendo UI for Angular Accessibility section de la documentation .

Angular Editor: ProseMirror Plugin Support

 Dans un éditeur de texte, du texte est mis en surbrillance et une info-bulle avec une loupe apparaît.

Pendant que nous continuer à ajouter nos propres outils et fonctionnalités à l'interface utilisateur de Kendo pour Angular Editor, nous voulons également que nos développeurs puissent étendre ce que nous avons déjà construit, ou trouver des plugins tiers à ajouter à leurs implémentations. Comme l'interface utilisateur de Kendo pour Angular Editor est basée sur ProseMirror, avec R2 2021, nous avons ajouté la possibilité d'intégrer n'importe quel plugin ProseMirror dans l'interface utilisateur de Kendo pour Angular Editor.

Pour plus d'informations sur la façon d'ajouter vos propres plugins ProseMirror, voici la section de démonstration appropriée de Kendo U pour Angular Editor .

Angular Editor: Prise en charge des espaces réservés

En parlant des fonctionnalités de l'éditeur, nous avons également ajouté la prise en charge de l'attribut d'espace réservé dans l'interface utilisateur de Kendo pour Angular Editor. Cela permet aux développeurs de définir un message stylisé initial dans le contenu de l'éditeur lorsqu'un utilisateur n'a pas encore fourni son propre texte, donnant le contexte utilisateur quant à ce qui est attendu dans la zone de contenu de l'éditeur.

Voir le Angular Editor pour commencer docs pour plus d'informations

Tous les DropDowns angulaires: diverses améliorations

 Sous «Sport favori», une barre de recherche contient deux éléments: le baseball et le cricket. Ci-dessous, ces deux éléments sont cochés dans une liste alphabétique des autres sports qui ne sont pas cochés: basket-ball, hockey sur gazon, football, etc.

Poursuivant la tendance à ajouter des fonctionnalités recherchées dans les composants existants, nous est passé et a fourni des améliorations dans tous les DropDowns angulaires. Cela inclut:

  • Post-événements d'ouverture et de fermeture
  • Liaison d'objet enfant
  • Sélection de la case à cocher de groupe
  • Mise au point programmatique sur les éléments

Comme cela couvre sept composants au total, le moyen le plus simple de vérifier tous ces éléments Les améliorations consistent à accéder à la section de démonstration du package Kendo UI for Angular DropDowns et à accéder aux DropDowns applicables que vous utilisez aujourd'hui.

Angular PDF Generator: Export Any SVG

While the Kendo UI for Angular PDF Generator a été en mesure d'exporter certains éléments SVG jusqu'à présent, principalement nos propres graphiques angulaires, avec R2 2021, nous avons ajouté la possibilité d'exporter n'importe quel élément SVG générique dans le cadre de la génération PDF. Cela signifie que si votre HTML inclut un élément SVG personnalisé, il sera présent et affiché dans le fichier PDF exporté comme tout autre élément HTML.

Pour voir comment vous pouvez exporter des éléments SVG au format PDF, consultez ce dans la documentation Angular PDF Generator .

Angular Calendar: Multiple Date Selection

 Dans un simple calendrier général d'avril 2021, certaines dates sont mises en évidence par un encadré rose: 3, 5, 15, 19, 26, 30.

Avec R2 2021, le calendrier angulaire prend désormais en charge divers modes de sélection de plusieurs dates. Cela peut être fait sur une plage, ou en sélectionnant plusieurs jours individuels dans l'interface de Kendo pour le calendrier angulaire.

Rendez-vous sur les démos du calendrier angulaire pour jouer avec la nouvelle fonction de sélection de dates multiples. .

Angular TreeView: Cochez / décochez la directive pour les nœuds enfants et retardez l'événement nodeDrag

 Les éléments parents Meubles et Décor ont tous deux été développés - ils ont chacun une petite pointe de flèche vers le bas à gauche. Sous les meubles se trouvent des éléments enfants en retrait: Tables et chaises, canapés, meubles d'appoint. Sous Décor, les éléments enfants sont le linge de lit (surligné d'un carré rose), les rideaux et stores et les tapis.

L'interface utilisateur Kendo pour Angular TreeView a également reçu une certaine attention avec cette version. Avec R2 2021, nous avons ajouté la directive check / uncheck pour aider à sélectionner ou désélectionner les nœuds enfants avant que leur parent ne soit développé en fonction de l'état du parent.

Nous avons également ajouté la possibilité de retarder l'événement nodeDrag pour aider personnalisez l'expérience lors du glisser-déposer de nœuds.

Pour plus d'informations, vous pouvez vous référer à Kendo UI for Angular TreeView docs and demos .

Angular DateInputs: Support for Two-Digit Years & Accessibility Améliorations

 Kendo UI pour Angular DateInputs - Prise en charge des années à 2 chiffres

Pour conclure la publication, le paquet Angular DateInputs a également reçu quelques mises à jour. L'une des plus grandes améliorations de la qualité de vie est la prise en charge de la saisie des années à deux chiffres. Cela permet aux utilisateurs de taper «21» et de le faire traduire automatiquement en «2021». Vous pouvez également personnaliser le siècle auquel les DateInputs seront par défaut. Donc, si vous écrivez une application sur les diverses invasions normandes ou les activités de l'Empire byzantin au 11ème siècle, vous pouvez avoir le paramètre DateInputs par défaut sur «10XX».

Cela affecte tous les composants DateInput, alors accédez à la Kendo UI for Angular DateInputs package docs and demos section pour voir cela en action avec votre composant Angular DateInput préféré.

Refonte des forums de la communauté Telerik et Kendo UI

Enfin, nous avons remanié l'un des endroits préférés que les développeurs adorent traîner – les Forums communautaires Telerik et Kendo UI . Découvrez l'histoire complète de pourquoi et de quoi dans le article de blog dédié .

Vous avez des commentaires?

C'est tout un tas de nouveaux composants et fonctionnalités réunis dans une seule version. Nous travaillons déjà d'arrache-pied avec la prochaine version, mais vous avez maintenant la chance Si nous avons manqué un composant ou une fonctionnalité que vous attendiez, faites-le nous savoir en accédant à Kendo UI for Angular Feedback Portal et votez pour votre commentaire préféré ou soumettez le vôtre.

Kendo UI for Angular est passé à plus de 100 composants grâce aux commentaires continus de nos clients, et nous voulons continuer à fournir la meilleure bibliothèque possible pour vous et vos équipes – et nous utilisons les commentaires que nous entendons de vous pour conduire toutes nos versions.

Webinaires et diffusions en direct

Vous voulez voir tout ce que j'ai mentionné ci-dessus l ive et en action? Eh bien, ai-je de bonnes nouvelles pour vous. Le jeudi 20 mai, à 11 h HE nous organisons le webinaire sur la version Kendo UI R2 2021. Cette session couvrira tout ce que j'ai mentionné ici ainsi que des informations sur jQuery, React et Vue.

En plus de cela, nous aurons également un Twitch plongeant plus profondément dans l'interface utilisateur de Kendo pour Angular et KendoReact le mardi 18 mai de 9 h 00 à 10 h 30 HE et mercredi 19 mai de 13 h 30 à 15 h 00 HE .

Des tonnes de Vous aurez du plaisir, alors rendez-vous sur la page d'inscription au webinaire Kendo UI R2 2021 pour réserver votre place et participer aux festivités.

Réservez votre place pour le webinaire




Source link

0 Partages