Interface utilisateur Telerik pour Blazor – Notification, barre d'outils, graphique radar!

Dans la dernière version de Telerik UI pour Blazor, nous sommes ravis de partager que nous fournissons désormais plus de 60 composants Blazor natifs! Lisez tout sur les nouveautés, y compris les composants de notification et de barre d'outils, les graphiques radar et plus encore.

Salut les développeurs, des nouvelles plus intéressantes sur Blazor car nous venons de livrer l'interface Telerik UI pour Blazor 2.20.0 avec plusieurs nouveaux composants et fonctionnalités— Composants de notification et Toolbar trois Radar Chart Series Grid export to CSV TreeView drag and drop et plus encore! En plus de la compatibilité de Telerik UI pour Blazor avec la version officielle .NET 5.0 que nous avons annoncée il y a deux semaines, nous sommes heureux de partager avec vous une autre étape importante de 60+ composants Blazor véritablement natifs !

Passons en revue le contenu de la version 2.20.0 et voyons en détail les nouveaux composants et fonctionnalités que vous pouvez incorporer dans vos applications Blazor Server et WebAssembly!

Blazor Notification Component

Notification Component Overview

] Le composant Telerik Blazor Notification offre plusieurs options pour afficher les messages aux utilisateurs dans les applications Blazor – mises à jour d'état, avertissements, invites ou tout type d'informations personnalisé. Le contrôle de notification est livré avec plusieurs paramètres, propriétés et modèles intégrés qui vous permettent de personnaliser entièrement son apparence, y compris la position, l'animation, la taille, la couleur, le contenu personnalisé et plus encore.

Telerik UI pour Blazor Notification Component Themes

Notification Component Animations

] L'apparence du composant Notification peut être animée en définissant le paramètre AnymationType sur l'une des nombreuses options disponibles: Fondu (par défaut), PushUp, PushDown, SlideIn, ZoomIn et plus. Vous pouvez contrôler davantage la durée de l'animation en définissant son paramètre AnimationDuration. [19659011] Couleurs prédéfinies du composant de notification

Il existe plusieurs options de couleur prédéfinies que vous pouvez appliquer à vos notifications Blazor via le paramètre ThemeColor: Primaire, Secondaire, Tertiaire, Succès, Info, Avertissement, Erreur, Sombre, Clair et Inverse.

Vous pouvez également définir vos propres couleurs et styles personnalisés en fonction des exigences de conception, des thèmes et des préférences personnelles.

Positions des composants de notification

The Notification posit L'ion peut être ajusté à l'aide des propriétés VerticalPosition et HorizontalPosition . La position verticale peut être définie en bas (par défaut) ou en haut, et la position horizontale peut être définie à droite (par défaut), à gauche et au centre.

Modèles de composants de notification

Utilisation de la fonction de modèle de la notification composant vous pouvez personnaliser le balisage des éléments HTML rendus dans vos notifications. D'autres exemples de personnalisation du contenu des notifications rendues dans les applications Blazor sont disponibles dans la documentation en ligne du produit.

Afficher et masquer les notifications

Le composant Notification peut être ouvert / affiché en utilisant le Afficher méthode de sa référence. Pour masquer les notifications, vous avez deux options à portée de main :

• Fermeture automatique d'une notification (par défaut) – en définissant la durée pendant laquelle elle reste visible via le paramètre CloseAfter.
• Fermeture manuelle d'une notification – vous pouvez également offrir à l'utilisateur la possibilité de choisir quand fermer une notification en utilisant un bouton de fermeture. Dans ce cas, vous devez définir le paramètre Closable sur true (sa valeur par défaut). Si vous définissez également CloseAfter sur 0, la notification restera visible jusqu'à ce que l'utilisateur la rejette explicitement.

Blazor ToolBar Component

ToolBar Component Overview

Le composant Telerik Blazor ToolBar UI représente un conteneur pour les boutons, les boutons bascule, les groupes de boutons et les éléments de modèle de barre d'outils pouvant contenir du HTML et des composants personnalisés. Nous utilisons déjà le composant ToolBar dans notre propre composant Telerik Blazor Editor et vous pouvez maintenant l'utiliser aussi!

Interface utilisateur Telerik pour le composant Blazor ToolBar

Outils pris en charge par ToolBar

Les outils pris en charge par dans le contrôle ToolBar comprennent: ToolbarButton, ToolbarToggleButton, ToolbarButtonGroup, ToolbarTemplateTemplateItemplate ainsi que ToolBarSpacer et ToolbarSeparator qui vous permettent de mieux organiser la disposition de la barre d'outils.

Interface utilisateur Telerik pour le composant Blazor ToolBar – Outils pris en charge

Navigation au clavier intégrée ToolBar

Le composant ToolBar est livré avec une navigation au clavier prête à l'emploi qui permet une navigation facile à travers ses éléments contenus en utilisant uniquement le clavier.

Blazor Radar Chart Series

La série Telerik Blazor Radar Chart permet de visualiser des données multivariables – chaque variable a son propre axe, tous les axes sont joints au centre du Radar (également connu sous le nom de Spider Chart ). Utile lorsque vous avez besoin de comparer différentes entités dans un même visuel, également utile si vous avez besoin de comparer le changement de combinaison de variables. Les graphiques radar sont utiles dans les cas où vous devez effectuer une comparaison entre deux éléments ou plus sur une gamme de caractéristiques — comparaison de produits, analyse des compétences des employés, etc.

Avec la version 2.20, nous avons inclus trois séries de cartes radar — Radar Line, Radar Colonne de zone et radar. Comme tous les autres types de graphiques inclus dans l'interface utilisateur Telerik pour la suite Blazor les nouveaux graphiques Radar sont liés aux données, incluent des options pour visualiser une info-bulle lors du survol des points de données, prennent en charge les modes de rendu canevas / SVG et

Radar Line Chart

La ​​série Blazor Radar Line Chart est représentée par des lignes reliées par des points de données sur les différents axes. Elle est utile pour analyser différentes métriques de plusieurs entités dans un même visuel.

Carte de zone radar

Dans la série Carte de zone radar Blazor les points de données sont reliés par des segments de ligne droite qui entourent une zone remplie. Dans l'exemple ci-dessous , la zone de code couleur de chaque employé permet de corréler et de contraster visuellement les classements de chaque compétence d'employé.

Telerik UI pour Blazor Radar Area Chart Series

Radar Column Chart

La série Blazor Radar Column Chart est représentée sur le graphique sous forme de colonnes de données dont la hauteur varie en fonction de à leur valeur. Plus la colonne de la variable particulière est la plus proche du bord du graphique, plus sa valeur est élevée, et inversement – plus la colonne de la variable particulière est proche du centre du graphique, plus sa valeur est basse. [19659046] Interface utilisateur Telerik pour Blazor Radar Column Chart "title =" Telerik UI pour Blazor Radar Column Chart "style =" vertical-align: middle; "/>
Telerik UI pour Blazor Radar Column Chart Series

Blazor Grid Export en CSV

En plus de l ' exportation de la grille vers Excel avec la version actuelle, nous avons ajouté la possibilité d'exporter les données de la grille dans les applications Blazor au format CSV avec un clic sur un bouton . Vous pouvez choisir d'exporter la page de grille actuelle ou toutes les données de la grille, tout en préservant les opérations de données appliquées sur la grille: ordre des colonnes, tri, filtrage ou regroupement.

T Interface utilisateur elerik pour Blazor – Exporter la grille au format CSV

Blazor TreeView Drag & Drop

Le TreeView component prend désormais en charge la fonctionnalité Drag and Drop, qui vous permet de déplacer un nœud dans le même TreeView ou entre différents Instances de composant Telerik TreeView. La fonction de glisser-déposer Telerik Blazor TreeView peut être facilement activée en définissant le paramètre Draggable sur true et en utilisant l'événement OnDrop pour gérer les opérations de glisser-déposer et les modifications de la source de données.

Interface utilisateur Telerik pour Blazor TreeView Drag and Drop

Légende du graphique Titre personnalisé

Vous pouvez désormais appliquer plusieurs options de personnalisation au titre de la légende Telerik Blazor Chart . Vous avez un contrôle total sur la bordure, la position, l'alignement, le remplissage, la couleur d'arrière-plan de la légende du graphique, etc.

Navigation au clavier de l'éditeur [19659024] L'interface utilisateur Telerik pour Blazor Editor prend désormais en charge la navigation au clavier prête à l'emploi qui permet une navigation facile dans la barre d'outils et la zone de contenu à l'aide du clavier uniquement.

Télécharger l'interface utilisateur Telerik pour Blazor 2.20.0 [1 9659003] Téléchargez une version d'évaluation gratuite de Telerik UI pour Blazor 2.20.0 à partir de la page Telerik UI pour Blazor ou si vous êtes un titulaire de licence actif, vous pouvez obtenir la dernière et la meilleure sur la page "Votre compte" ou mettez à jour votre référence de package NuGet Telerik.UI.for.Blazor vers la version 2.20.0. directement dans vos solutions Blazor.

Merci!

Merci comme toujours de la part de l'interface utilisateur Telerik pour l'équipe Blazor de Progress. Veuillez nous laisser vos commentaires sur notre portail dédié aux commentaires de Blazor ou dans la section des commentaires ci-dessous!