Fermer

mai 13, 2021

Telerik UI pour Blazor R2 2021 75+ composants Blazor natifs!


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 le composant Blazor PanelBar affiché avec une liste. Mes coéquipiers ont été agrandis et affichent trois personnes avec nom, titre et photo. Les projets ont été développés pour afficher le nouveau plan d'affaires, puis les prévisions de vente, qui ont une option de flèche à développer. Programmes est un autre élément non développé.

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).

 Telerik UI pour Blazor PanelBar Hierarchical Data affiche une liste similaire. Celui-ci a Boissons comme élément de premier niveau qui a été étendu pour montrer Chai, Chang et Guarana Fantastica. Chai a également été développé pour montrer l'histoire et comment faire à la maison. Condiments est un autre élément de premier niveau qui n'a pas été développé.

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.

 Amaya Coffey est agrandi pour montrer Chai, Chang, l'assaisonnement Cajon du chef Anton, la tartinade aux baies de grand-mère et le roquefort. Les deux derniers sont désactivés, donc Roquefort est vu dans un texte gris plus clair que les autres, et la barre de survol, qui est normalement saumon brillant est un rose plus pâle planant sur la tartinade aux baies de Boysen de grand-mère. Deux autres sections qui affichent des listes élargies sont: Dawson Humphrey, avec la tartinade de mûre de grand-mère (cette fois active) et le sirop d'anis; et Giulia Haworth: Mozzerella, Cheesecake, Change et Aniseed Syrup.

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.

 Deux cartes côte à côte montrent les Traditions et les Montagnes, chacune avec une petite image circulaire à côté du titre. Ils répertorient l'emplacement (à la fois en Bulgarie, en Europe), puis comportent une grande image rectangulaire qui est le corps principal de la carte. Vous trouverez ci-dessous des icônes pour aimer (cœur), commentaire (boîte de dialogue) et partager. Et le nombre de likes.

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.

 Telerik UI pour le composant Blazor Card L'orientation permet de retourner entre une carte horizontale, où l'image est une grande image rectangulaire presque carrée suivie d'un titre empilé, d'étoiles et d'un examen, et verticale, où l'image est une image verticale plus petite sur le côté des mêmes éléments empilés t à sa droite.

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.

 Une mise en page de quatre grandes cartes, disposées en deux rangées et deux colonnes. Chaque carte a une image rectagulaire horizontale, puis un titre (Comment créer des jeux pour tout le monde, comment concevoir avec lvoe, pourquoi les logos minimalistes sont les meilleurs pour les grandes entreprises, et l'argent, les goûts et les mèmes sont tous la même chose), puis un sous-titre, puis des options pour Enregistrer pour plus tard ou Ajouter aux Favoris.

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.

 Une carte rectangulaire horizontale minimale avec le titre «Rome», un texte plus petit «Capitale de l'Italie» en dessous, et une flèche extensible à la droite. On clique sur la flèche et sous la case initiale, la carte se développe pour afficher une image, quelques paragraphes, puis des boutons pour la carte et la météo.

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!

 Dans l'onglet Rapport, nous voyons un exemple de rapport avec une liste de catégories et de leurs produits, qui peuvent être élargi. Lorsqu'ils sont réduits, les produits affichent toujours le nom, le coût, la vente active vrai / faux, les noms de catégorie et la date de début de vente. Dans la catégorie Chaînes, nous voyons que la chaîne de produits a été élargie. Il montre une image d'une chaîne de vélo, la couleur, la taille, le poids et le numéro d'identification en plus de la version réduite des données, qui est également affichée.

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é.

 Telerik Reporting Blazor Report Designer "title =" Telerik Reporting Blazor Report Designer "style =" vertical-align: middle; "/></p data-recalc-dims=

Blazor Grid Nouvelles fonctionnalités

Grille en-têtes multi-colonnes

La nouvelle fonction Grille multi-colonnes en-têtes vous permet de regrouper visuellement les colonnes pertinentes sous un en-tête commun via les colonnes imbriquées RenderFragment sous GridColumn .

 Dans une grille, les informations personnelles de l'en-tête couvrent les colonnes Prénom et Nom, la société est au-dessus du nom et les coordonnées sont au-dessus des colonnes Téléphone et E-mail.

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

 Une ligne de produit est réorganisée par glisser-déposer

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.

 Une ligne est déplacée de la troisième à la sixième et supprimée.

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.

 Une liste déroulante permet à l'utilisateur de faire défiler une liste de noms numérotés, par exemple «1 Margaret Peackock». Nous voyons le nombre atteindre au moins 182.

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.

 Une barre d'en-tête indique Andorra et comporte une flèche vers le bas. Un champ de recherche indique qu'un utilisateur a tapé «il» et l'Italie est affichée en haut d'une liste qui comprend la Lituanie, la Suisse, le Royaume-Uni et la Cité du Vatican.

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 data-recalc-dims=

Calendar CellRender Event

Pour appliquer un style conditionnel supplémentaire aux cellules du calendrier, vous pouvez maintenant utiliser l'événement CellRender et appliquer une logique supplémentaire.

 Un calendrier similaire du mois d'avril, mais chaque jour affiche une petite icône météo.

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é .

 Hub des forums Telerik et Kendo UI "title =" Hub des forums Telerik et Kendo UI "style =" vertical-align: middle; "/><p align= Hub des forums Telerik et Kendo UI

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

  • Live Twitch se ssion le mercredi 19 mai I 9 – 10 h 30 HE (Blazor, WinUI, Xamarin)
  • Live Twitch session le jeudi 20 mai I 13 h 30 – 3 pm ET (Blazor, WinUI, Xamarin)
  • Réservez votre place pour le webinaire

    Merci!
    – Votre équipe Telerik Blazor en cours




    Source link