Telerik UI Blazor 2.23.0 — Jauges, ColorPalette, MediaQuery!

Jetons un coup d'œil aux nouveaux composants polyvalents et mis à jour dans l'interface utilisateur Telerik pour Blazor ce mois-ci.

Hey Blazor et l'interface utilisateur Telerik pour les gens de Blazor,

C'est le moment de la sortie, et ce mois-ci, l'interface utilisateur Telerik pour Blazor apporte Jauges de toutes formes et formes— Linéaire Circulaire Radial et Arc . Outre les ajouts à l'interface utilisateur de visualisation de données, nous avons également livré les composants Media Query et Color Palette . L'équipe Telerik UI for Blazor s'est également concentrée sur la mise en œuvre de certains des éléments les plus votés du portail de commentaires, ce qui apporte une multitude de nouvelles fonctionnalités pour les composants existants tels que Editor Window ] Sélecteurs de date et d'heure Form et les améliorations obligatoires Grid qui font partie de chaque nouvelle version.

Lisez l'article de blog de la version de mars ci-dessous pour en savoir plus sur le contenu 2.23.0 complet, que vous pouvez brancher et lire dans vos applications Blazor Server et WebAssembly.

Nouveaux composants Blazor

Blazor Gauges

Les composants de jauge sont des indicateurs visuels populaires pour des quantités telles que les ventes, les niveaux de stock, la température ou la vitesse, et ils sont généralement mieux adaptés pour présenter une seule valeur de données qu'un graphique. Les jauges sont parfaites pour visualiser les informations d'état en utilisant la couleur pour leur axe des valeurs. Par exemple, les plages acceptables ou inacceptables peuvent être colorées en rouge, jaune et vert pour représenter les états bas, moyen et élevé.

Confirmant le besoin de jauges dans les applications Blazor – à la fois en tant que composants autonomes et tableaux de bord avec des jeux de jauges comparant plusieurs valeurs de données en un coup d'œil – nous sommes heureux d'ajouter différentes options de jauge

Blazor Circular Gauge Component

Le dernier ajout à la bibliothèque d'interface utilisateur de visualisation de données Telerik se trouve le composant de jauge circulaire Telerik Blazor . Il a des fonctionnalités et des fonctionnalités similaires à la jauge d'arc bien connue, mais visualisant les valeurs sous la forme d'un cercle complet et élégant.

Interface utilisateur Telerik pour le composant de jauge circulaire Blazor

La jauge circulaire dispose de plusieurs options de configuration pour gérer la couleur, la taille, le modèle d'étiquette central, l'angle de départ et la direction . En plus de cela, vous pouvez ajustez également l'échelle avec des graduations majeures et mineures, des étiquettes et plus encore.

Telerik UI pour les options d'échelle de jauge circulaire Blazor

Composant de jauge linéaire Blazor

Pour les cas où vous avez besoin de présenter des valeurs numériques sur une échelle de plages de manière linéaire, vous pouvez compter sur le composant de jauge linéaire Telerik Blazor ]. Comme tous les composants de jauge Telerik, il est livré avec plusieurs fonctionnalités intégrées pour configurer et personnaliser les différents éléments d'une jauge: taille, classe CSS, orientation, pointeurs, étiquettes, plages et échelle.

Telerik UI pour Blazor Linear Gauge Component

Les pointeurs Linear Gauge (également appelés marqueurs) peuvent être complètement transformé pour répondre aux exigences spécifiques en utilisant leurs propriétés exposées pour la forme, la couleur, l'opacité, la taille, la marge et plus encore. />

Interface utilisateur Telerik pour jauge linéaire Blazor Plusieurs pointeurs personnalisés

Vous pouvez fournir une ou plusieurs instances de plage d'échelle linéaire et personnaliser leur valeur de début et de fin, leur couleur et leur opacité via les paramètres exposés.

Telerik UI pour les plages de jauge linéaire Blazor

La jauge linéaire prend en charge à la fois verticale et horizontale comme indiqué dans l'image ci-dessous.

Interface utilisateur Telerik pour la jauge linéaire horizontale Blazor

Composant de jauge radiale

Si vous recherchez un format radial de représentation de valeurs numériques, alors l ' Telerik UI pour la jauge radiale Blazor est le bon choix.

Interface utilisateur Telerik pour le composant Jauge radiale Blazor

La jauge radiale est dotée de plusieurs options de configuration pour sa taille, classe CSS, sc ale, plages, étiquettes et pointeurs . Il vous permet d'obtenir facilement l'apparence et le comportement souhaités pour votre application Blazor.

Interface utilisateur Telerik pour les plages d'échelle de jauge radiale Blazor

Telerik UI for Blazor Radial Gauge Multiple Pointers

Arc Gauge Component

Le composant Telerik for Blazor UI Arc Gauge affiche une plage de valeurs qui est représentée par un arc. La différence entre les jauges Arc et Radial est que dans ArcGauge, la valeur est représentée par une plage de valeurs sur l'arc au lieu d'un pointeur indiquant une valeur spécifique.

Vous pouvez personnaliser l'étiquette du centre de la jauge d'arc à l'aide de modèles et afficher des informations personnalisées relatives à la valeur présentée.

Interface utilisateur Telerik pour la jauge d'arc Blazor Gabarit central

Les options d'échelle de jauge d'arc sont également entièrement personnalisables – vous pouvez définir les graduations majeures et mineures, les couleurs, l'angle de début et de fin, les couleurs, la direction et plus encore.

Interface utilisateur Telerik pour l'échelle personnalisée Blazor Arc

Composant Blazor ColorPalette

Présentation de ColorPalette

Apportez de la couleur et vibrez à vos applications Blazor avec e e nouveau composant Palette de couleurs . Le composant fournit une liste de mosaïques de couleurs qui peuvent être prédéfinies ou personnalisées, et expose plusieurs propriétés, événements (OnChange, ValueChanged et OnBlur) et une liaison bidirectionnelle pour l'interaction. Comme le reste des composants Telerik Blazor, il est livré avec une navigation et une accessibilité au clavier intégrées. La ColorPalette est parfaitement adaptée lorsqu'un ensemble limité de couleurs doit être disponible pour les utilisateurs.

Telerik UI pour Blazor Composant Palette de couleurs

Préréglages ColorPalette

Le composant Palette de couleurs Telerik Blazor est livré avec un ensemble de jeux de couleurs prédéfinis qui peuvent être définis avec une seule propriété et présentés à vos utilisateurs.

Telerik UI pour Blazor Color Palette Color Presets

Custom ColorPalette

Si vous devez adapter le palette de couleurs standard, vous avez la possibilité de fournir votre propre jeu de couleurs (toute couleur CSS valide) au composant Palette de couleurs Blazor.

Interface utilisateur Telerik pour la palette de couleurs Blazor personnalisée

Personnalisations de la disposition ColorPalette

The ColorPalette Le composant permet de personnaliser la mise en page de sa taille, de ses colonnes, de sa largeur et de sa hauteur.

Interface utilisateur Telerik pour Disposition personnalisée Blazor

Composant Blazor Media Query

Le nouveau composant Blazor Media Query apporte une grande valeur et facilite le développement du rendu réactif des composants de l'interface utilisateur. Il vous permet d'obtenir des indicateurs dans votre code C # qui correspondent aux requêtes multimédias CSS sans écrire de code JavaScript. En fonction de la taille de la fenêtre du navigateur, vous pouvez facilement modifier les paramètres des composants, rendre différents composants ou empêcher le rendu des composants à l'aide du composant MediaQuery.

Nouvelles fonctionnalités du composant Blazor Grid

Masquer les colonnes de la grille sur les petits appareils

Et juste après l'introduction du composant MediaQuery, c'est le moment idéal pour présenter les avantages qu'il apporte lorsqu'il est intégré à Grid. Vous pouvez créer une mise en page Blazor Grid réactive et basculer la visibilité des colonnes en fonction de la résolution .

Interface utilisateur Telerik pour Blazor Grid Masquer les colonnes sur les petits appareils

Avec le composant MediaQuery, vous pouvez facilement ajouter des indicateurs pour définir le paramètre Grid column Visible en fonction de la taille de l'écran et masquer des colonnes de grille spécifiques sur des appareils de plus petite résolution. [19659009] Ajuster la largeur de la colonne de la grille au contenu

La ​​largeur de la colonne de la grille peut facilement s'adapter à son contenu en double-cliquant sur la bordure de redimensionnement dans l'en-tête de la grille. La colonne adaptera automatiquement sa largeur au contenu de ses données, en-tête et pied de page.

Interface utilisateur Telerik pour Blazor Grid Ajuster la largeur de colonne au contenu

* Remarque: la même fonctionnalité pour fitt La largeur de colonne en fonction du contenu est également disponible pour le composant TreeList .

Validation des modes d'édition Grid InLine et InCell

Avec la version actuelle, nous avons ajouté une fonctionnalité de validation intégrée au Modes d'édition InCell et Inline . Basée sur DataAnnotationValidator et incluant notre Telerik Validation Tooltip la nouvelle fonctionnalité apporte une solution prête à l'emploi simple et élégante pour les champs non valides.

Telerik UI pour Blazor Grid Inline Edit Validation

* Remarque: La fonction de validation intégrée est également disponible pour le Composant TreeList InCell et Mode d'édition InLine .

Nouvelles améliorations du composant de fenêtre Blazor

Boîtes de dialogue prédéfinies Blazor

L'interface utilisateur Telerik pour Blazor fournit des alternatives de style de thème correspondant à la confirmation standard , alertes et boîtes de dialogue d'invite. Les trois options de boîtes de dialogue prédéfinies comprennent:

• Alerte— convient aux erreurs qui doivent attirer l'attention des utilisateurs et empêcher les interactions avec l'interface utilisateur
• Confirmer— confirmation simple boîte de dialogue avec les options OK et Annuler
• Invite – autorise la saisie utilisateur et la renvoie sous forme de chaîne lorsque les utilisateurs appuient sur OK, et null lorsqu'ils appuient sur Annuler

Elles sont toutes appelées par des méthodes simples à attendre, vous pouvez donc interrompre l'exécution logique en attendant la réponse de l'utilisateur.

Telerik UI pour Blazor Predefined Dialogues

Empilement de fenêtres

Avec la nouvelle fonction Z-index d'empilage les applications Blazor amèneront n'importe quelle fenêtre focalisée au premier plan.

Telerik UI pour Blazor Stacked Windows

Nouvelles fonctionnalités des composants de Blazor Editor

Outil de surlignage de Blazor Editor

Les outils intégrés Telerik Blazor Editor ] Sont maintenant développés avec BackColor et ForeColor, qui permettent la personnalisation de la couleur de fond et de la couleur du texte. À l'aide de la palette de couleurs déroulante prête à l'emploi, les utilisateurs peuvent facilement mettre en évidence les zones de texte ou modifier la couleur de la police dans les applications Blazor.

Telerik UI for Blazor Editor Highlighting Tool

Blazor Editor Coller les options de nettoyage

Le composant Telerik Blazor Editor fournit désormais diverses options intégrées pour nettoyer le contenu HTML collé afin que les utilisateurs puissent désormais librement copier et coller du contenu de MS Word vers l'éditeur et produire un résultat de qualité en un rien de temps.

Interface utilisateur Telerik pour Blazor Editor Options de nettoyage de collage

Les paramètres de nettoyage de collage incluent la conversion de listes MS Word en listes HTML, la suppression des commentaires, des attributs, des styles, etc. La liste complète des fonctionnalités et du comportement des paramètres de collage de l'éditeur se trouve dans la documentation des fonctionnalités.

Prise en charge de l'éditeur Blazor pour coller des images

En plus du copier-coller du contenu texte, l'éditeur vous permet de faire de même avec les images.

Telerik UI pour Blazor Editor Collage d'image

Veuillez noter qu'il existe certaines limitations implicites par la politique de sécurité du navigateur, qui peut être contournée en suivant les directives décrites dans la documentation .

Améliorations des sélecteurs de date et d'heure

Tous les composants du sélecteur de date et d'heure de Telerik Blazor (à savoir : DateInput TimePicker DatePicker and DateTimePicker ) affichent désormais une option de configuration pour l'étape utilisée pour incrémenter ou décrémenter chaque valeur de date ou d'heure .

Telerik UI pour Blazor DateInput Step Interval

En fonction du composant de sélection utilisé, vous pouvez configurer les valeurs de date ou d'heure pour r chacun des segments disponibles: Année, Mois, Jour, Heure, Minute et Seconde.

Telerik UI pour Blazor DateTimePicker Step Interval

Les étapes que vous définissez contrôlent la liste des dans l'élément déroulant et les valeurs changent à partir du clavier lorsque l'utilisateur appuie sur les flèches «Haut» ou «Bas».

Telerik UI pour Blazor TimePicker Step Interval

Form Component Disabled Items

Le Blazor Form component que nous avons expédié il y a quelques semaines a reçu une amélioration de l'option de configuration pour désactivé éléments. Ils peuvent être configurés via le paramètre

1. Enabled du FormItem (a priorité)
2. Editable (false) data annotation attribute of the model

Telerik UI pour Blazor Form Disabled Items

Télécharger Telerik UI pour Blazor 2.23.0

Nous vous encourageons à essayer la dernière et la meilleure de Telerik UI pour Blazor et dites-nous ce que vous en pensez!

• Pour tous les nouveaux utilisateurs de Telerik UI pour Blazor, vous pouvez télécharger un essai gratuit de Telerik UI pour Blazor 2.23.0 à partir de la page Telerik UI pour Blazor
• Telerik active détenteurs de licence — vous pouvez récupérer la dernière version sur la page "Votre compte" ou mettre à jour directement la référence du package Telerik.UI.for.Blazor NuGet vers la version 2.23.0 dans les solutions Blazor existantes

Merci

—Votre Telerik Blazor Team at Progress