L'interface utilisateur de Telerik pour Blazor 2.24 apporte de nouveaux composants PanelBar et Card, des mises à jour de Grid et TreeList, une intégration de démonstration de Blazor Reporting, des modèles de calendrier, un nouvel assistant Visual Studio Code Converter et bien plus encore!
Salut les développeurs, c'est Telerik R2 2021 et nous sommes ravis d'annoncer que la suite de composants Telerik UI pour Blazor a franchi une nouvelle étape avec plus de 75 composants véritablement natifs.
Bien que nous ayons continuellement livré de nouveaux composants et fonctionnalités entre janvier et mai 2021, nous sommes heureux de partager qu'il y a encore plus de goodies natifs Blazor à venir avec l'actuelle interface utilisateur Telerik pour Blazor 2.24. Les nouveaux composants PanelBar et Card sont ici, ainsi que Grid and TreeList Rows Reorder et Multi-column headers Virtualization in plusieurs composants DropDown, intégration de démonstration de Blazor Reporting, modèles de calendrier, nouveau convertisseur de code Visual Studio et plus encore.
TL; DR Telerik UI pour Blazor R2 2021
Vous trouverez ci-dessous un résumé de l'interface utilisateur R2 2021 Telerik pour Blazor contenu de la version expédiée entre janvier et mai (Telerik UI pour les versions Blazor 2.22, 2.23 et 2.24):
- Nouveaux composants: PanelBar, Form, Card, Palette de couleurs, Arc Gauge, Linear Gauge, Circular Gauge, Radial Gauge, Récapitulatif de validation, info-bulle de validation, message de validation et MediaQuery
- Nouvelles fonctionnalités de grille: En-têtes multi-colonnes, glisser-déposer de lignes, édition et navigation de type Excel, ajuster la largeur des colonnes au contenu, masquer les colonnes sur les petits appareils, gelé colonnes avec virtualisation, regroupement de colonnes dans le ColumnMenu, sélection de CheckBox uniquement, case à cocher comme éditeur par défaut pour Boolean, validation intégrée pour l'édition InCell et InLine
- Nouvelles fonctionnalités de TreeList: En-têtes multi-colonnes, glisser-déposer de lignes, édition et navigation de type Excel , masquer les colonnes sur les petits appareils, adapter la largeur des colonnes au contenu, validation intégrée pour l'édition InCell et InLine, colonnes figées avec virtualisation, sélection CheckBox uniquement, case à cocher comme éditeur par défaut pour Boolean
- Nouvelles fonctionnalités de l'éditeur: Mise en évidence , collez le nettoyage, copiez et collez des images
- Nouvelle fonction d'intervalle de temps dans les composants DateInput, DatePicker, TimePicker et DateTimePicker
- Nouvelles fonctionnalités de la fenêtre: Glissable et empilement de plusieurs fenêtres
- Nouvelles fonctionnalités du calendrier: Modèles et événement de rendu de cellule
- Nouvelle fonction de liste déroulante: Virtualisation
- Nouvelles fonctions de dialogue prédéfini : Alerte, confirmation et invite
- Nouvelle fonction DropDownList: Filtre [19659007] Prise en charge de la propriété ShouldRender dans la grille, l'arborescence, le séparateur et l'arborescence
- Traitement de document Telerik: Prise en charge du format de fichier .doc
- Démo d'intégration avec Telerik Reporting Blazor ReportViewer
- Nouveau VS Code Converter: Configuration transparente de l'interface utilisateur Telerik pour les composants Blazor dans les projets Blazor existants
Plongée dans la version 2.24 de l'interface utilisateur pour Blazor
Et si vous souhaitez en savoir plus sur les derniers ajouts à l'interface utilisateur Telerik pour Blazor 2.24.0, lisez à l'avance et découvrez en détail tous les nouveaux composants, fonctionnalités et outils qui vous aideront à accélérer le développement des applications Blazor Server et WebAssembly.
Blazor PanelBar UI Component
PanelBar Component Overview
Le nouveau Telerik Blazor PanelBar est un composant lié aux données qui rend des panneaux hiérarchiques extensibles composés de titre et de contenu. Le PanelBar prend en charge des modes d'expansion uniques et multiples, des modèles pour le rendu de contenu personnalisé, des données plates et hiérarchiques, ainsi que de nombreuses options de configuration pour son élément et la liaison de données. Comme le reste de l'interface utilisateur Telerik pour le composant Blazor, il est livré avec une prise en charge et une accessibilité intégrées de la navigation au clavier.
Interface utilisateur Telerik pour Blazor PanelBar UI Component
PanelBar Support for Flat and Hierarchical Data
Vous pouvez lier PanelBar à flat data (la collection entière de les éléments de la barre de panneau sont disponibles à un niveau) ou des données hiérarchiques (la collection des éléments enfants est fournie dans un champ du modèle de son parent).
Interface utilisateur Telerik pour Blazor PanelBar Hierarchical Data
PanelBar Templates
La définition du contenu de l'élément PanelBar se fait via templates —vous avez le flexibilité pour définir HeaderTemplate et ContentTemplate pour tous les éléments ou pour les éléments d'un certain niveau.
PanelBar Configuration
Le mode d'extension PanelBar ( ExpandMode property) peut être configuré sur simple ou multiple, ce qui permet d'étendre de nombreux panneaux. De plus, vous pouvez définir un panneau comme désactivé et empêcher toute interaction avec lui.
Telerik UI pour Blazor PanelBar Plusieurs éléments étendus
PanelBar Events
Le PanelBar expose plusieurs événements qui vous permettent de répondre à actions de l'utilisateur et implémentation d'une logique personnalisée:
- ExpandedItemsChanged – se déclenche lorsque l'état développé a changé
- OnItemClick – se déclenche lorsqu'un élément est cliqué
- OnItemRender – se déclenche lorsqu'un élément est rendu
Composant de l'interface utilisateur de la carte Blazor
Présentation des composants de la carte
Le nouveau composant de la carte est un excellent compagnon pour créer des applications Blazor attrayantes avec ses multiples fonctionnalités intégrées. Vous pouvez facilement organiser le contenu de la carte dans différentes orientations, tirer parti des variations de couleur du thème et définir une disposition de carte personnalisée telle qu'un groupe, une liste ou un jeu de cartes.
Telerik UI pour Blazor Card UI Component
Card Component Anatomy
Bien que la carte elle-même puisse être considérée comme un élément constitutif lors de l'organisation de votre mise en page, elle comporte plusieurs éléments constitutifs, ce qui en fait vraiment facile et amusant à utiliser et à personnaliser chaque partie: CardHeader, CardImage, CardBody, CardActions, CardFooter, CardSeparator, CardTitle et CardSubtitle.
Card Component Orientation
La Telerik Blazor Card vous permet de réorganiser facilement ses éléments de base en basculant entre les deux options d'orientation intégrées pour votre mise en page: horizontal et vertical.
Interface utilisateur Telerik pour les modes d'orientation de la carte Blazor
Couleurs du thème des composants de la carte
La carte Telerik Blazor offre une manière attrayante de présenter le contenu grâce à ses variations de couleurs de thème . Choisissez celui qui vous convient: primaire, secondaire, succès, erreur, clair, sombre et plus encore.
Options d'actions des composants de la carte
Les boutons d'actions de la carte peuvent être organisés horizontalement ou verticalement et disposés de quatre manières: au début, au centre ou à la fin, ou des boutons étirés qui rempliront tout le conteneur avec une taille égale.
Rendu de cartes dynamiques
En utilisant des collections de données, vous pouvez rendre dynamiquement des cartes Telerik Blazor et créer de superbes mises en page, comme indiqué dans l'image ci-dessous.
Interface utilisateur Telerik pour les cartes de données Blazor
Réduire et agrandir la carte
Le composant Telerik Blazor Card peut être transformé en une carte pliable / extensible en plaçant le corps de la carte et les actions dans le composant d'interface utilisateur TelerikAnimationContainer. Cela permet d'afficher un plus grand nombre de cartes et la flexibilité d'étendre uniquement les cartes nécessaires.
Exemple de carte Telerik UI pour Blazor Expand & Collapse
Reporting Demo Integration
] Alors que le produit et nos démos commencent et se terminent en pensant à vous, nous avons écouté vos commentaires et ajouté une démo présentant l'intégration entre Telerik UI pour Blazor et Telerik Reporting .
La démonstration de Blazor Reporting présente des vitrines l'intégration entre Grid et Report Viewer . Passez de l'onglet Grille à Rapports et voyez comment vos données de grille se transforment en un rapport avec de nombreuses fonctionnalités intégrées, telles que l'interactivité des éléments groupés et la possibilité d'exporter vers divers formats de fichiers tels que Word, Excel, PPT et plus. Le rapport est également livré avec des fonctionnalités utilisateur pratiques telles que la recherche, le zoom avant et arrière, le mode plein écran, l'impression et plus encore!
Telerik UI pour l'intégration Blazor Grid & Blazor ReportViewer
Blazor Report Designer (par Telerik Reporting Team)
Nos collègues de Telerik Reporting Team ont développé les fonctionnalités de création de rapports Blazor et, en plus de la visionneuse de rapports, ils viennent de livrer une nouvelle version vous permettant d'intégrer la fonctionnalité Web Report Designer dans vos applications Blazor. Lisez l'histoire complète dans le billet de blog dédié.
Interface utilisateur Telerik pour Blazor Grid En-têtes multi-colonnes
Grille Glisser-déposer des lignes
La grille Telerik Blazor Grid brille désormais avec une fonction de glisser-déposer de ligne qui restitue une colonne avec une poignée de glissement. En utilisant le paramètre RowDraggable vous pouvez instantanément activer reor
Interface utilisateur Telerik pour Blazor Grid Rows Drag & Drop
Nouvelles fonctionnalités de Blazor TreeList
Tout comme la grille, la Telerik Blazor TreeList a été élargie avec deux fonctions puissantes: les lignes glisser-déposer et les en-têtes multi-colonnes.
TreeList Multi-Column headers
La fonction intégrée pour définir multi Les en-têtes de colonne dans la TreeList peuvent être obtenus via les colonnes imbriquées RenderFragment de la TreeListColumn .
Lignes de glisser-déposer TreeList
Tout comme la grille, le Telerik Blazor TreeList a obtenu la fonction glisser-déposer de lignes brillantes . Vous pouvez réorganiser une ou plusieurs lignes entre différents parents dans la même TreeList ou entre différentes instances de Telerik TreeList.
Interface utilisateur Telerik pour Blazor TreeList Rows Drag & Drop
Nouvelles fonctionnalités des autres composants Telerik Blazor
Virtualisation dans plusieurs composants DropDown
Les composants Telerik Blazor Select — à savoir les AutoComplete ComboBox DropDownList ] et MultiSelect – ont reçu un coup de pouce majeur avec la nouvelle fonction de virtualisation permettant de charger des éléments à la demande en fonction de la position de défilement actuelle.
Pour tirer parti de la virtualisation sélectionnée, vous devez définir le ScrollMode ainsi que des valeurs spécifiques pour les propriétés PopupHeight ItemHeight et les propriétés PageSize qui configurent la taille de la «page» à afficher rouge / chargé sur chaque parchemin.
Vous pouvez virtualiser un grand ensemble de données locales pour des performances d'interface utilisateur ultra-rapides, et même récupérer chaque page de données à partir d'un service distant pour optimiser les requêtes et le chargement des données.
Interface utilisateur Telerik pour la virtualisation Blazor DropDownList
Filtrage dans le composant DropDownList
Avec la version actuelle, la Telerik Blazor DropDownList est améliorée avec une capacité de filtrage . À l'aide d'une entrée affichée en haut de la liste déroulante, les utilisateurs peuvent saisir un sous-ensemble d'une valeur recherchée et filtrer la source de données sous-jacente. Les opérateurs de filtrage de chaînes pris en charge incluent: Contains, DoesNotContain, EndsWith, IsContainedIn et StartsWith.
Interface utilisateur Telerik pour le filtre Blazor DropDownList
Rendu de calendrier personnalisé [19659023] Prise en charge des modèles de calendrier
Le calendrier Telerik pour Blazor prend désormais en charge le rendu personnalisé via des modèles pour les vues Mois, Année, Décennie et Siècle du composant. Dans la capture d'écran ci-dessous, vous pouvez voir le rendu personnalisé des jours dans la vue Mois en fonction de certaines conditions.
![Un calendrier simple pour avril 2021 montre la plupart des caractères en noir, mais certains jours sont bleus et d'autres jaunes. [19659105] Modèle de calendrier Telerik UI pour Blazor </p>
<h3> Calendar CellRender Event </h3>
<p> Pour appliquer un style conditionnel supplémentaire aux cellules du calendrier, vous pouvez maintenant utiliser <a href=](https://i0.wp.com/d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/calendar---templates.jpg?w=660&ssl=1)
Interface utilisateur Telerik pour Blazor CellRender Event
Prise en charge de la propriété ShouldRender dans la grille, TreeList, Splitter et TreeView
La propriété ShouldRender permet vous pouvez faire le rendu du composant après que le rappel asynchrone soit attaché à certains événements. Nous avons exposé la fonctionnalité à plusieurs événements pertinents dans les composants suivants:
- Grid – OnRowClick, OnRowContextMenu, OnRowDoubleClick, OnExpand, OnCollapse
- TreeList – OnExpand, OnCollapse – Splitter
- OnExpand, OnCollapse, OnResize
- TreeView – OnExpand, OnItemClick
Nouveau convertisseur de code Visual Studio
Reconnaissant la demande et l'intérêt croissants pour Visual Studio Code, nous avons ajouté un autre gain de temps et d'efforts Telerik. En plus de l'assistant de conversion Telerik Blazor existant pour Visual Studio avec cette version, nous avons ajouté un nouveau convertisseur de code Visual Studio, qui permet une installation et une configuration transparentes de l'interface utilisateur Telerik pour les composants Blazor dans les projets Blazor existants à partir de votre favori IDE.
Mises à jour du traitement de documents Telerik
Dans le dernier package de distribution, vous trouverez Telerik.Documents.Flow.FormatProviders.Doc NuGet qui vous permettra d'importer le format de fichier .doc, puis
Refonte des forums Telerik
Enfin et surtout, nous avons réorganisé l'un des endroits préférés que les développeurs adorent traîner – les Forums Telerik . Découvrez l'histoire complète des forums sur le pourquoi et le quoi dans le article de blog dédié .
Télécharger l'interface utilisateur Telerik pour Blazor 2.24 .0
Rendez-vous sur la page Telerik UI pour Blazor téléchargez un essai gratuit de Telerik UI pour Blazor 2.24.0, ou si vous êtes un détenteur de licence actif, vous pouvez obtenir la dernière et la meilleure à partir de la page «Votre compte» ou mettez à jour la référence de votre package NuGet Telerik.UI.for.Blazor vers la version 2.24.0 directement dans vos solutions Blazor.
Téléchargez Telerik UI for Blazor 2.24.0
] Webinaire et sessions Twitch dédiées
Assurez-vous de vous inscrire au webinaire Telerik R2 2021 et sessions Twitch en direct pour voir les nouveaux composants et fonctionnalités en action: [19659006] Telerik R2 2021 Release Webinaire le mardi 18 mai I 11 h 00-13 h 00 HE
Réservez votre place pour le webinaire
Merci!
– Votre équipe Telerik Blazor en cours
Source link