L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Telerik UI Blazor 2.22.0 – Composants de formulaire et de validation
Découvrez tout ce qui est nouveau dans la dernière version de Telerik UI pour Blazor. Du nouveau composant Form à la validation améliorée et plus encore, nous visons à vous aider à développer des applications Blazor étonnantes!
Hey Blazor et Telerik UI pour Blazor Folks, le composant natif de Blazor Form est là et nous sommes super ravi de partager avec vous les nouvelles mises à jour qui font partie de Telerik UI pour la version Blazor 2.22.0! Trois Composants de validation Grille édition et navigation de type Excel Améliorations de TreeList Fenêtre déplaçable fonctionnalités supplémentaires dans nos contrôles basés sur les entrées et bien plus encore!
Lisez à l'avance pour en savoir plus sur la version complète de Telerik UI for Blazor 2.22.0 release components and features that you can plug and play in your Blazor Server and WebAssembly apps.
New Composant Blazor Form
Présentation du composant Form
Avec le nouveau composant Telerik Form pour Blazor la génération et la gestion des formulaires sont simples grâce aux multiples fonctionnalités intégrées, aux divers paramètres et aux événements exposés. Vous pouvez facilement utiliser la génération automatique de champs ou créer votre propre mise en page spécifique à l'application Blazor. Utilisez les éditeurs personnalisés organisez-les en groupes et colonnes appliquez la validation définissez l'orientation du formulaire et plus !
Telerik UI pour Blazor Form Component
Telerik Blazor Form utilisant un modèle ou EditContext
Vous pouvez utiliser le Composant de formulaire Telerik Blazor avec un modèle ou EditContext .
Pour utiliser le composant Form avec un modèle ajoutez simplement la balise
Pour utiliser le composant Form avec un EditContext vous devez ajouter la balise
Formulaire Génération automatique de champs
Le formulaire Telerik Blazor peut générer des éditeurs basés sur les champs de modèle (à la fois à partir d'un Model et EditContext).
Interface utilisateur Telerik pour les champs générés automatiquement par formulaire Blazor
Le Les types de données suivants sont pris en charge par défaut et utilisent les éditeurs par défaut suivants:
- string → Telerik TextBox
- int, double, float, decimal → Telerik NumericTextBox
- Enum → Telerik DropDownList
- DateTime → Telerik DatePicker
- bool → Telerik CheckBox
Eléments de composant de formulaire
En plus des éditeurs par défaut du composant Form, vous pouvez également utiliser les éditeurs personnalisés définis via le FormItem . Pour utiliser des éditeurs personnalisés, vous spécifiez leur collection dans la balise FormItems (un enfant de la balise TelerikForm).
La simplicité de la personnalisation des éditeurs est fournie par les multiples paramètres exposés par le Balise FormItem: LabelText, Id, Hint , Champ, Type de champ, Classe, Modèle et plus encore!
Telerik Interface utilisateur pour les éditeurs personnalisés de formulaires Blazor
Groupes de composants de formulaires
Les champs doivent souvent être organisés de manière logique ou pour une meilleure expérience utilisateur. Vous pouvez facilement organiser les champs d'un composant Telerik Form en groupes à l'aide de la balise FormGroup qui expose les paramètres suivants:
- LabelText – définit une étiquette pour un groupe
- Columns – définit le nombre de colonnes dans un groupe
- ColumnSpacing – définit l'espace entre les éditeurs dans un groupe
Telerik UI for Blazor Form Grouping
Orientation du composant de formulaire
Le composant Form peut prendre une orientation verticale (par défaut) et horizontale . Définition de l'orientation du formulaire sur horizonal placera les étiquettes sur le côté gauche des éditeurs.
Telerik UI pour Blazor Form Orientation
Form Événements de composant
Le composant Telerik Form expose es trois événements qui vous permettent de répondre aux actions de l'utilisateur et d'implémenter une logique personnalisée.
- OnSubmit – se déclenche lorsque l'utilisateur clique sur le bouton Soumettre dans le formulaire et peut être utilisé pour déclencher manuellement la validation de EditContext et appliquer la logique personnalisée
- OnValidSubmit – se déclenche lorsque le formulaire est soumis et qu'il n'y a pas d'erreurs de validation
- OnInvalidSubmit – se déclenche lorsqu'il y a des erreurs de validation dans le formulaire lors de sa soumission
Trois nouveaux composants de validation
Pour faciliter le style et la personnalisation des messages de validation dans votre application Blazor nous avons fourni trois options: TelerikValidationMessage TelerikValidationTooltip et TelerikValidationSummary .
Ces composants ajoutent des options de personnalisation et de localisation en plus des ValidationSummary et ValidationMessage standard fournis par le framework Blazor. Les trois composants de validation Telerik peuvent être utilisés avec le formulaire Telerik ou avec tout formulaire qui fournit un EditContext .
Passons en revue les composants de validation Telerik, les fonctionnalités et les cas d'utilisation pour chacun d'eux.
TelerikValidationMessage
Le Telerik Validation Message for Blazor est applicable par champ de formulaire et étend le standard ValidationMessage fourni par le framework. Le TelerikValidationMessage inclut des fonctionnalités intégrées pour:
- Modèles – ceux-ci vous permettent de contrôler et d'afficher du contenu personnalisé avec les messages de validation de formulaire
- Classe – cela vous permet d'ajouter une classe CSS personnalisée à l'étendue, qui encapsule le message de validation
Telerik UI for Blazor Validation Message Template
TelerikValidationTooltip
Une autre façon de pointer vers une entrée non valide consiste à utiliser le composant Telerik Validation Tooltip . Il rend le message de validation sous forme d'info-bulle lorsque les utilisateurs survolent l'éditeur et apparaît comme une fenêtre contextuelle plutôt qu'un élément en ligne. [19659003] Le TelerikValidationTooltip est livré avec des options pour l'adapter comme vous le souhaitez en définissant sa:
- Position – le paramètre Position prend un membre de l'énumération TooltipPosition: Top (par défaut), Bott om, Right, Left
- Template – vous permet d'afficher du contenu personnalisé dans l'infobulle de validation
- Class – en utilisant le paramètre Class, vous pouvez ajouter une classe CSS personnalisée à la validation tooltip
Telerik UI for Blazor Validation Tooltip Position
ValidationSummary
The Telerik Validation Summary for Blazor est construit au-dessus du standard ValidationSummary fourni par le framework et vous permet de personnaliser le résumé de toutes les erreurs de validation via Templates and Class Parameter .
Telerik UI for Blazor Validation Summary Template
Nouvelles fonctionnalités et améliorations de la grille
Grid Excel-l ike Navigation and Editing
Nous avons amélioré le mode d'édition Blazor Grid InCell pour permettre une navigation et une édition fluides à travers le clavier ressemblant à l'expérience de la gestion des données dans des feuilles de calcul Excel.
En utilisant l'onglet les utilisateurs clés peuvent passer d'un éditeur de grille au suivant sur la même ligne – respectivement, avec Shift + Tab ils peut accéder à la cellule précédente. L'utilisation de Enter activera le «mode d'édition» pour une cellule focalisée ou validera les changements et ouvrira la ligne suivante dans la même colonne pour l'édition. Lorsqu'une cellule est ouverte pour modification, elle concentrera tout son contenu (à la fois avec le clavier et avec un clic de souris) afin que vous puissiez commencer à taper immédiatement.
Interface utilisateur Telerik pour l'édition de type Excel Blazor Grid
Les modifications de cellule de grille peuvent être validées de trois manières:
- Utilisation de Entrée pour valider les modifications apportées à la ligne actuelle et ouvrir la cellule sous la dernière cellule modifiée pour la modifier (utile lors de la modification de toutes les lignes, en se concentrant sur une seule colonne, toujours à la manière d'Excel)
- Utilisation de l'onglet et en naviguant jusqu'à la fin de la ligne actuelle, le focus se déplace vers la première cellule de la ligne suivante
- Naviguer à l'extérieur / cliquer en dehors de la ligne de grille actuelle
Sélection de la case à cocher des lignes de la grille uniquement
Telerik UI pour Blazor Grid Checkbox-only Selection
Grid Custom Column Menu
Avec la version 2.22.0, nous avons amélioré le menu de colonne Grille avec un modèle de sélecteur de menu de colonne qui vous permet de réorganiser et de personnaliser la liste de colonnes.
Menu de colonnes personnalisées de l'interface utilisateur Telerik pour Blazor Grid
TelerikCheckbox en tant qu'éditeur booléen par défaut
La TelerikCheckbox remplacera le booléen par défaut éditeur dans le composant Telerik Grid. Changer le précédent en
Colonnes gelées avec virtualisation de colonnes
Avec cette version, nous permettons l'intégration de deux fonctionnalités Grid populaires: les colonnes figées / verrouillées et virtualisation de colonne . Cela permettra aux utilisateurs de garder les colonnes importantes visibles tout en faisant défiler de manière transparente de grands volumes de données Grid qui utilisent la virtualisation de colonnes.
Améliorations de la fenêtre Blazor
Fenêtre déplaçable
Le composant Telerik Blazor Window est maintenant amélioré avec une fonctionnalité déplaçable. Vous pouvez déplacer la fenêtre à travers sa barre de titre, ce qui vous permet de réorganiser facilement l'écran de la manière la mieux adaptée à vos besoins. Déplacer la fenêtre est activé par défaut et vous pouvez l'arrêter en définissant le paramètre Draggable du composant Window sur false.
Si vous utilisez les valeurs «Gauche» et «Haut» pour fournir une position initiale à une fenêtre déplaçable, vous devez maintenant vous assurer de les @ lier, afin qu'ils puissent se mettre à jour.
Telerik UI pour Blazor Window Draggable
Blazor TreeList Component Enhancements
Le TreeList component est une autre donnée très utilisée dans les applications Blazor, nous essayons donc de lui donner un peu d'amour avec presque toutes les versions.
Navigation et édition de type Excel dans TreeList
Les utilisateurs travaillant avec des données hiérarchiques dans TreeList peuvent désormais bénéficier de de type Excel édition et navigation . En conservant la même logique que dans Telerik Grid, les utilisateurs peuvent naviguer dans les données en mode d'édition InCell avec Tab (ou Shift + Tab ) et passez en mode édition avec la touche Entrez .
TreeL ist Sélection de case à cocher uniquement
Il est désormais possible de configurer votre TreeList pour la sélection de ligne uniquement via une colonne de case à cocher de liste d'arbres dédiée . Ceci peut être facilement réalisé en définissant sur true le nouveau paramètre CheckBoxOnlySelection du TreeListCheckboxColumn .
TreeList TelerikCheckbox comme éditeur booléen par défaut
Avec la version actuelle, le composant TelerikCheckbox sera remplace l'éditeur booléen par défaut dans le composant Telerik Grid, permettant des styles cohérents lors de l'édition des données.
Telerik UI pour Blazor TreeList Checkbox-only Selection
Améliorations des composants basés sur les entrées
OnBlur Event
Avec la version actuelle de Telerik UI pour Blazor, un grand nombre de composants basés sur les entrées ont leur propre OnBlur [19659100] événement . L'événement OnBlur se déclenche lorsque le composant perd le focus et est maintenant exposé dans la liste de composants suivante: AutoComplete, ComboBox, DateInput, Date an d Sélecteurs d'heure, DropDownList, MaskedTextBox, MultiSelect NumericTextBox, TextArea et TextBox.
Propriété TabIndex
Nous complétons la liste des composants qui prennent déjà en charge la propriété TabIndex comme ComboBox, DateInput, Date et Date Pickers, NumericTextBox, MultiSelect et plus encore!
Téléchargez Telerik UI pour Blazor 2.22.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 une version d'évaluation gratuite de Telerik UI pour Blazor 2.22.0 à partir de la page Telerik UI pour Blazor
- Les titulaires de licence active Telerik peuvent 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.22.0 dans les solutions Blazor existantes
Merci!
Comme toujours, merci 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!
Source link