Telerik UI pour Blazor 2.18.0 – Cinq nouveaux composants et plus encore!

La nouvelle interface utilisateur Telerik pour Blazor 2.18.0 comprend cinq nouveaux composants natifs et de nombreuses fonctionnalités améliorées pour la grille, l'arborescence, le planificateur et plus encore. Découvrez tout ce qui est nouveau.

Salut les développeurs! Nouvelles passionnantes aujourd'hui, alors que nous venons de publier Telerik UI pour Blazor 2.18.0 avec une abondance de nouveaux composants natifs, y compris Masked Textbox Text Area Barre de progression ChunkProgress Bar et Radio Group, ainsi que de nombreuses nouvelles fonctionnalités et améliorations intéressantes! Les composants Grid et TreeList permettent désormais un formatage simple des colonnes, un style conditionnel de cellule et de ligne et de nouveaux événements. Le composant Scheduler a été amélioré avec une option pour rendre le contenu personnalisé et appliquer un style personnalisé à ses rendez-vous, et en plus de cela, toute l'interface utilisateur de Telerik pour Blazor est maintenant compatible avec .NET 5.0 RC2!

Explorons la version 2.18.0 contenu et découvrez en détail les nouveautés que vous pouvez intégrer dans vos applications Blazor Server et WebAssembly.

Composant Blazor Masked TextBox

Présentation du composant d'interface utilisateur Masked Textbox

Le composant Telerik Masked TextBox pour Blazor vous permet d'obtenir les entrées de l'utilisateur tout en garantissant l'entrée valide de formats standard, tels que le numéro de téléphone, le code postal, le numéro de sécurité sociale, le numéro de carte de crédit, et fournit également une option pour les formats personnalisés tels que le code produit spécifique à l'entreprise. L'entrée masquée fournit plusieurs fonctionnalités prêtes à l'emploi liées à la configuration et à la personnalisation de sa visualisation et de son comportement.

Interface utilisateur Telerik pour le composant de zone de texte masquée Blazor

Configuration et personnalisations de la zone de texte masquée

La partie Masque du composant Telerik définit quelle entrée utilisateur est autorisée et à quelles positions . Il inclut des règles intégrées spéciales qu'il reconnaît comme caractères spéciaux lorsqu'ils sont rencontrés dans le masque et détermine la manière dont l'utilisateur écrit son entrée. En plus des règles de masque, vous pouvez également spécifier des symboles statiques dans le modèle de masque connu sous le nom de littéraux . Vous pouvez les utiliser pour afficher un format plus convivial de l'entrée ou pour prédéfinir une partie de l'entrée pour votre utilisateur.

La zone de texte masquée permet une personnalisation complète par fournissant en outre des options pour spécifier un caractère d'invite littéral (par défaut pour souligner _ et fournir des conseils à l'utilisateur avant de commencer à taper), une classe CSS, un espace réservé, un index de tabulation et plus encore.

Telerik UI pour les personnalisations de zone de texte masquée Blazor

Options d'étiquette de zone de texte masquée

Vous disposez d'options pour spécifier si la zone de texte masquée L'étiquette doit être rendue au-dessus de l'entrée masquée ou sous forme d'étiquette flottante à l'aide du paramètre MaskOnFocus . Si MaskOnFocus est défini sur false (par défaut), le Label sera toujours au-dessus de l'entrée. Lorsque MaskOnFocus est défini sur true en combinaison avec le paramètre Label ou Placeholder vous pouvez facilement obtenir des étiquettes flottantes ou une interactivité d'espace réservé.

Telerik UI pour Blazor Masked Textbox Floating Label

Événements du composant Masked Textbox

Le Telerik Le composant MaskedTextbox Blazor expose deux événements pour vous permettre de gérer et d'effectuer des actions basées sur l'entrée utilisateur Applications Blazor:

• OnChange – se déclenche lorsque l'utilisateur appuie sur Entrée dans l'entrée ou lorsque l'entrée perd le focus et peut être utilisé avec une reliure bidirectionnelle
• ValueChanged – se déclenche à chaque modification (par exemple, frappe) dans l'entrée et ne peut pas être utilisé avec un bidirectionnel

Blazor Text Area Component

TextArea Présentation des composants de l'interface utilisateur [19659006] Le composant Telerik Blazor Text Area est un ajout intéressant à toute application qui nécessite une saisie de texte plus large. Il permet à l'utilisateur de fournir un texte multiligne et convient pour des informations telles que l'adresse, une brève description, des notes, des commentaires, etc. Le composant TextArea fournit des fonctionnalités intégrées de redimensionnement automatique, d'étiquette flottante et d'événements pour répondre aux actions de l'utilisateur.

Interface utilisateur Telerik pour le composant Zone de texte Blazor

Dimensionnement automatique du composant TextArea

En utilisant le paramètre AutoSize le composant d'interface utilisateur Telerik TextArea peut être facilement configuré pour redimensionner automatiquement sa hauteur lors de la saisie au clavier.

Étiquette flottante du composant TextArea [19659009] Le composant ТextArea fournit une étiquette flottante prête à l'emploi – un espace réservé avec une animation flottante vers le haut lorsque l'entrée obtient le focus. Dans les cas où vous préférez utiliser une étiquette standard attachée au contrôle, vous pouvez utiliser le paramètre Id de la zone de texte et attacher votre propre balise .

Telerik UI pour Blazor Text Area Floating Label

Personnalisations des composants TextArea

En plus des fonctionnalités mentionnées ci-dessus, il existe de nombreuses autres options de configuration de zone de texte que vous pouvez tirer parti de l'utilisation du composant dans vos applications Blazor. Il s'agit notamment de la définition d'un espace réservé, de l'index de tabulation, de la classe CSS, du titre, de la largeur, de l'activation de la saisie semi-automatique, etc.

Événements du composant TextArea

The Telerik Composant TextArea expose deux événements pour vous permettre de gérer et d'effectuer des actions basées sur les applications Blazor saisies par l'utilisateur:

• OnChange – se déclenche lorsque l'utilisateur appuie sur Entrée pour confirmer la valeur d'entrée actuelle, ou lorsque le composant perd le focus et peut être utilisé esprit h Liaison bidirectionnelle
• ValueChanged – se déclenche à chaque modification (par exemple, une frappe sur une touche) dans l'entrée et ne peut pas être utilisée avec l'enchère bidirectionnelle

Blazor Progress Bar Component

Progress Bar UI Component Overview

Le composant Telerik ProgressBar vous permet d'indiquer visuellement la progression des opérations dans les applications Blazor. La barre de progression couvre les deux scénarios: lorsque vous avez besoin d'afficher la partie de l'opération terminée ou lorsque sa fin est inconnue pour rendre l'indicateur indéterminé. Il est livré avec plusieurs fonctionnalités intégrées telles que l'orientation horizontale et verticale, des animations et des options de personnalisation des étiquettes.

Interface utilisateur Telerik pour le composant de barre de progression Blazor

Options de personnalisation d'étiquette de composant ProgressBar

L'indication de la progression visuelle d'une tâche est complétée par l'ajout d'une étiquette à côté de la visualisation. Les exigences de conception pouvant varier considérablement d'un cas à l'autre, nous nous sommes assurés que vous disposiez de nombreuses options pratiques pour vous permettre de définir facilement la position de l'étiquette, de contrôler sa visibilité ou d'y placer du contenu personnalisé . L'étiquette de la barre de progression comprend Visible et Position [19659040] paramètres ainsi que Modèles pour vous permettre d'obtenir facilement la progression souhaitée dans votre application Blazor .

Interface utilisateur Telerik pour Blazor Position des étiquettes de barre de progression

Orientation du composant de barre de progression

Le composant de barre de progression fournit des options d'orientation horizontale et verticale pour son état de progression via son option de configuration Orientation .

Telerik UI pour l'orientation verticale de la barre de progression de Blazor

ProgressBar Indeterminate State

Pour les opérations dont l'heure d'achèvement estimée est inconnue ou dont la progression ne peut pas être représentée comme une valeur spécifique, vous pouvez utiliser l'état indéterminé de ProgressBar . Lorsque vous définissez le paramètre Indeterminate sur true, ProgressBar est rempli d'une animation de mouvement fluide pour montrer que la tâche est en cours d'exécution.

Telerik UI pour Blazor ProgressBar Indeterminate State

Blazor Chunk Progress Bar Component

Chunk Progress Bar UI Component

Pour étendre davantage les options pour une indication visuelle du niveau d'achèvement des tâches, nous avons inclus un composant séparé Chunk Progress bar qui convient parfaitement aux opérations avec un nombre prédéfini d'étapes (blocs). Le composant comprend des modes vertical et horizontal, comme ainsi que l'état indéterminé.

Interface utilisateur Telerik pour Blazor C Hunk Progress Bar Component

Chunk Progress Bar Orientation

Tout comme la barre de progression mentionnée précédemment, nous avons inclus ici deux modes – modes de progression de bloc horizontal et vertical .

Telerik UI pour Blazor Chunk Progress Bar Orientation verticale

Chunk Progress Bar Indeterminate State

For opérations lorsque l'heure d'achèvement estimée est inconnue ou que la progression ne peut pas être représentée comme une valeur spécifique, vous pouvez utiliser Indeterminate state of the ChunkProgressBar.

Blazor Radio Group UI Component

RadioGroup Présentation des composants de l'interface utilisateur

Le composant Groupe de boutons radio Blazor permet à l'utilisateur de sélectionner une seule option dans une liste prédéfinie de choix représentés par des boutons radio. Le composant RadioGroup peut être lié à des types primitifs ou à des modèles de données et personnalisé en spécifiant l'ordre de disposition et la position des étiquettes. Il est livré avec une navigation au clavier intégrée, permettant aux utilisateurs de naviguer entre les boutons radio et de sélectionner les options en utilisant uniquement le clavier.

Interface utilisateur Telerik pour le composant de groupe Radio Blazor

Position et disposition de l'étiquette du composant RadioGroup

Selon le scénario de l'application, vous pouvez afficher la liste des options du composant RadioGroup dans une verticale ou dans une disposition horizontale (par défaut à la verticale), et définissez plus en détail la position des étiquettes avant ou après les boutons radio (par défaut après les boutons). Les deux personnalisations de groupe de boutons radio peuvent être facilement effectuées à l'aide des paramètres Disposition et LabelPosition .

Interface utilisateur Telerik pour Blazor Radio Group Label Position

Là encore, avec un simple paramètre ( Enabled ), vous pouvez activer ou désactiver l'intégralité du composant.

Interface utilisateur Telerik pour Blazor Radio Group – État désactivé

Événements du composant RadioGroup

Le composant UI Telerik RadioGroup expose deux événements pour vous permettre de gérer les clics et la sélection dans les applications Blazor: le standard ValueChanged et un événement OnChange qui vous permet d'utiliser la liaison bidirectionnelle.

Blazor Grid et TreeList Nouvelles fonctionnalités

Format d'affichage des colonnes Grid et TreeList et formatage des cellules et des lignes

Les composants Blazor Grid et TreeList un nouveau paramètre DisplayFormat de colonne pour vous permettre de définir facilement une chaîne au format C # , de sorte qu'il rend les valeurs avec le co style correspondant selon la culture actuelle du fil.

Dans la capture d'écran ci-dessous, vous pouvez voir le résultat du paramètre Telerik Grid Column DisplayFormat pour la colonne Price définie sur C et la devise appliquée en fonction de la culture actuelle.

Découvrez plus d'exemples sur comment appliquer le formatage de colonne dans Blazor TreeList à l'aide du paramètre DisplayFormat dans la documentation du produit.

Avec la version 2.18.0 de Telerik UI pour Blazor, l'application du formatage conditionnel de ligne et de cellule pour Grid et TreeList a été considérablement simplifié grâce aux événements OnRowRender et OnCellRender .

Le OnCellRender se déclenche sur le rendu des cellules de données Grid. Il reçoit un argument de type GridCellRenderEventArgs et expose les champs Item, Value et Class (la même chose est valable pour TreeList OnCellRender event ):

• Item – un objet vers lequel vous pouvez convertir votre modèle obtenir l'élément de données actuel
• Value – un objet qui contient la valeur qui est rendue dans la cellule Grid
• Class – la classe CSS qui sera appliquée aux cellules

The ] L'événement OnRowRender Grid se déclenche lors du rendu des lignes Grid. Il reçoit un argument de type GridRowRenderEventArgs et expose les objets Item et Class (l'événement OnRowRender TreeList est similaire):

• Item – un objet que vous pouvez convertir dans votre classe de modèle pour obtenir le courant élément de données
• Classe – la classe CSS qui sera appliquée à l'élément de ligne

Interface utilisateur Telerik pour les attributs de formatage de grille Blazor et formatage des cellules [19659083] Interface utilisateur Telerik pour le formatage des colonnes, des cellules et des lignes de Blazor TreeList "title =" Interface utilisateur de Telerik pour la mise en forme des colonnes, des cellules et des lignes de Blazor TreeList "style =" vertical-align: middle; "/>
Interface utilisateur de Telerik pour l'attribut de formatage de Blazor TreeList et formatage des cellules

Gestion de l'état de Blazor TreeList

La nouvelle fonction Telerik Blazor TreeList State Management vous permettra d'enregistrer, de charger et de modifier tous les éléments configurables par l'utilisateur de TreeList: pagination, tri, filtrage, colonne o rder, regroupement de données et plus encore. Les événements de la liste arborescente OnStateInit et OnStateChanged et les méthodes SetState et GetState .

Telerik UI pour Blazor TreeList State Management

Vous pouvez définir différents paramètres par programmation aspects de l'arborescence à partir du code, permettent aux utilisateurs de personnaliser et d'enregistrer la façon dont les données sont structurées et visualisées, ou laissez-les simplement continuer là où ils les avaient laissées.

Consultez l'article de documentation TreeList component persist state

Modèles de rendez-vous Blazor Scheduler

L'interface utilisateur Telerik pour Blazor Scheduler vient de recevoir fanci er avec son option de modèle, qui vous permet de restituer le contenu personnalisé pour ses rendez-vous. En utilisant les modèles de planificateur vous pouvez afficher n'importe quel type de contenu dans chaque rendez-vous, comme des icônes, des boutons, des heures de début et de fin et des champs personnalisés. Les modèles de rendez-vous du planificateur fonctionnent parfaitement avec d'autres fonctionnalités de rendez-vous intégrées, telles que faire glisser et redimensionner les poignées, l'icône de suppression, les flèches indiquant si le rendez-vous s'étend sur plus d'une journée.

Vous avez le choix entre deux options de création de modèles de planificateur:

• ItemTemplate – contrôle le rendu des rendez-vous normaux qui sont dans les limites d'un jour
• AllDayItemTemplate – contrôle le rendu des rendez-vous de toute la journée dans la ligne All-Day

Pour personnaliser davantage l'apparence des rendez-vous, vous pouvez utiliser l'événement OnItemRender . Il se déclenche une fois pour chaque rendez-vous, lorsqu'il sera rendu dans le planificateur, y compris les rendez-vous d'une journée entière qui s'étendent sur plusieurs jours / créneaux, et vous permet de définir la classe qui est rendue sur l'élément de rendez-vous.

UI Telerik pour modèles de rendez-vous Blazor Scheduler

Nouvelles fonctionnalités de Blazor MultiSelect

Le nouveau Le paramètre AutoClose vous permet de choisir le mode de sélection du composant MultiSelect. Lorsqu'il est défini sur true (valeur par défaut), la liste déroulante contenant les éléments se fermera automatiquement après chaque sélection d'utilisateur, sinon la liste déroulante restera ouverte jusqu'à ce que l'utilisateur clique ailleurs et que la mise au point soit modifiée.

Telerik UI pour Blazor Multiple Selection et AutoClose

Compatibilité avec .NET 5.0 Release Candidate 2

Nous sommes heureux d'annoncer que Telerik UI for Blazor 2.18 est compatible avec .NET 5.0 Release Candidate 2, et notre objectif est pour assurer une compatibilité totale avec la version officielle de .NET 5 plus tard en novembre.

Télécharger Telerik UI pour Blazor 2.18.0

Rendez-vous sur la page Telerik UI pour Blazor téléchargez un essai gratuit de Telerik UI pour Blazor 2.18.0, ou si vous êtes un détenteur de licence actif, vous pouvez récupérer la dernière et la meilleure sur la page «Votre compte» ou mettre à jour votre référence de package NuGet Telerik.UI.for.Blazor vers la version 2.18.0. directement dans vos solutions Blazor.

Merci de l'équipe Telerik Blazor de Progress!

Comme toujours, nous vous sommes reconnaissants de votre implication et de nous avoir aidés à grandir et à rendre l'interface Telerik pour Blazor plus grande et meilleure. Continuez à nous dire ce qui fonctionne bien, ce qui doit être amélioré et quel composant ou fonctionnalité vous aimeriez voir ensuite dans le portail dédié aux commentaires de Blazor ou dans la section des commentaires ci-dessous!

---