L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Nouveautés de l'interface utilisateur de Kendo pour Angular avec R2 2021
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
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.
Nouveau composant: Jauge circulaire angulaire
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
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
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
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
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
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
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
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.
Source link