La dernière version de Telerik UI pour Blazor propose de nouveaux composants natifs dans ButtonGroup et ToggleButton, des mises à jour de Grid, Chart, Treeview et More. Lisez la suite pour tous les faits saillants.
Nous sommes en juin et voici une autre version de Telerik UI for Blazor qui apporte deux nouveaux composants Blazor natifs— Button Group et Toggle Bouton – plusieurs nouvelles fonctionnalités de la grille Graphique TreeView Zone de texte et plus encore. Plongeons-nous dans la nouvelle version 2.15.0 et voyons en détail les nouveaux avantages, y compris le nouveau Grid Custom Filtering Grid Row-Click Events la prise en charge du ExpandoObject dynamique , et la liaison à DataTable tous prêts à être connectés et lus dans vos applications Blazor Server et WebAssembly!
Nouveaux composants Blazor
Composant Blazor Button Group
Présentation de ButtonGroup
Le ButtonGroup est un conteneur d'interface utilisateur pour les boutons, qui vous permet de sélectionner des instances de bouton unique ou multiple, et de répondre aux événements de sélection et de clic. Les boutons du ButtonGroup remplissent le conteneur, correspondent au style en fonction du thème choisi et fournissent les fonctionnalités communes des boutons comme les images et les icônes, ainsi que d'autres paramètres et attributs.
Pour utiliser le composant ButtonGroup dans vos applications Blazor, vous devez ajouter la balise TelerikButtonGroup et, à l'intérieur, ajouter le balises ou correspondantes qui désignent chaque bouton, comme illustré dans l'exemple ci-dessous:
Premier bouton
Deuxième bouton
ButtonGroup Selection
En utilisant le paramètre SelectionMode du composant ButtonGroup, vous pouvez activer la sélection unique ou multiple de ses instances ButtonGroupToggleButton.
ButtonGroup Customization and Styling
Vous pouvez personnaliser et styliser le ButtonGroup et ses boutons individuels en utilisant différents styles, images, sprites, icônes de police et mise en forme conditionnelle. Découvrez un exemple de transformation complète de l'apparence d'un groupe de boutons.
Événements ButtonGroup
Les boutons du composant ButtonGroup fournissent deux événements de bouton / bascule pratiques:
- OnClick se déclenche lorsque l'utilisateur clique ou appuie sur le bouton. Vous pouvez l'utiliser pour appeler une logique asynchrone telle que la récupération de données ou l'appel d'un service.
- SelectedChanged se déclenche lorsque l'utilisateur modifie l'état du bouton en cliquant dessus (ou en utilisant Espace ou Entrée). Vous pouvez l'utiliser pour appeler la logique locale du modèle de vue (applicable pour un ButtonGroupToggleButton)
Navigation clavier ButtonGroup
Le composant ButtonGroup a une navigation clavier intégrée permettant aux utilisateurs finaux de naviguer facilement dans les applications Blazor, de se concentrer et de cliquer sur les boutons à l'aide de leur clavier.
Blazor Toggle Button
ToggleButton Overview
Le ToggleButton vous permet d'effectuer des actions de bascule (telles que l'activation / désactivation) sur les deux états du composant.
Pour ajouter une interface utilisateur Telerik pour Blazor ToggleButton à votre application Blazor, utilisez la tag.
<TelerikToggleButton @ bind-Selected =
"@ IsSelected"
>
Sélectionné: @IsSelected
@code {
bool
IsSelected {
get
;
set
; }
}
ToggleButton Styling
Vous pouvez utiliser une image, une image-objet ou une icône de police dans le bouton bascule pour que vous personnalisez son apparence et permettez aux utilisateurs d'interpréter plus facilement son objectif.
Événements ToggleButton
Le composant ToggleButton expose les événements suivants pour vous permettre de gérer les clics et la sélection dans les applications Blazor.
- OnClick se déclenche lorsque l'utilisateur clique ou appuie sur le bouton. Vous pouvez l'utiliser pour appeler une logique asynchrone telle que la récupération de données ou l'appel d'un service
- SelectedChanged se déclenche lorsque l'utilisateur modifie l'état du bouton en cliquant dessus (ou en utilisant Espace ou Entrée). Vous pouvez l'utiliser pour appeler la logique locale du modèle de vue
Navigation par clavier ToggleButton
Comme la plupart des composants de l'interface utilisateur Telerik pour Blazor, le ToggleButton possède une navigation par clavier intégrée permettant aux utilisateurs finaux de se concentrer et de cliquer facilement sur les boutons à l'aide de leur clavier.
Améliorations des composants Blazor
Avec chaque nouvelle version que nous livrons avec Telerik UI pour Blazor, nous visons à donner notre amour au composant Grid et dans la version 2.15, nous avons ajouté plusieurs fonctionnalités demandées via notre portail de rétroaction .
Blazor Grid Component New Features
Grid Custom Filter
Lorsque vous travaillez avec des données, une chose est sûre: elle grandit et les utilisateurs doivent pouvoir trouver rapidement leurs informations pertinentes. enregistrements. Et parce que les filtres ne viennent pas toujours dans leur forme simple, tels que les enregistrements me montrer des données plus petites que DateTime. Maintenant, dans cette version, nous avons ajouté la flexibilité pour vous permettre de personnaliser le filtrage des données. Opérandes "title =" Telerik UI pour le filtrage personnalisé de Blazor Grid – Opérandes multiples "/>
Telerik UI pour Blazor Grid Menu de filtre personnalisé – Appliquer plusieurs opérandes
Vous pouvez appliquer autant d'opérandes logiques que nécessaire et implémenter tout filtrage personnalisé
En plus du menu de filtre personnalisé de la grille, vous pouvez également implémenter un filtrage personnalisé sur les lignes de la grille à l'aide du modèle de cellule de filtre. Interface utilisateur de Telerik pour la ligne de filtre personnalisé de la grille Blazor "title =" Interface utilisateur de Telerik pour la ligne de filtre personnalisé de la grille Blazor "/>
Interface utilisateur de Telerik pour la grille Blazor — Filtre de ligne personnalisé
Exemples de code pour personnaliser le filtrage à l'aide de la et des modèles peuvent être trouvés sur nos démos de filtrage personnalisées dédiées pour les lignes de menu et .
Événements de clic de ligne de grille
Nous avons exposé deux nouveaux événements dans la grille , afin que vous puissiez implémenter une logique métier personnalisée dans votre code qui gère les clics des utilisateurs sur les lignes de la grille.
OnRowClick et OnRowDoubleClick les événements se déclenchent lorsque l'utilisateur clique et double-clique sur une ligne de la grille , respectivement. Leurs gestionnaires d'événements reçoivent l'objet GridRowClickEventArgs fournissant le modèle de la ligne cliquée dans le champ Item ce qui vous permet d'afficher des détails, de charger des données à la demande, d'afficher des données associées et d'effectuer diverses personnalisations actions sur les lignes cliquées.
Prise en charge de la grille pour ExpandoObject
Ne disposez pas d'un modèle fortement typé de vos données. Pas de problème, l'interface utilisateur Telerik pour Blazor Grid peut facilement prendre en charge les types de données dynamiques. Consultez notre exemple de référentiel sur la façon de lier la grille à ExpandoObject dans les applications Blazor.
Lier la grille à DataTable
Pour ceux d'entre vous qui ont un backend renvoyant DataTable, vous pouvez maintenant lier la grille aux données DataTable et ont facilement toutes les fonctionnalités intégrées de Grid: tri, pagination, filtrage et même édition.
Découvrez un exemple de comment lier les applications Grid in Blazor à un DataTable . [19659050] Nouvelles fonctionnalités du composant Blazor TextBox
Paramètres supplémentaires de la zone de texte
Les dernières mises à jour du composant Textbox vous permettent de personnaliser facilement plusieurs éléments de la saisie de texte, tels que: saisie semi-automatique, espace réservé, nom, titre et TabIndex.
<TelerikTextBox Name =
"email"
PlaceHolder =
"john@smith.com"
TabIndex =
"3"
InputMode =
"email"
Id =
"email"
AutoComplete =
"on"
Width =
"180px"
>
Mot de passe de la zone de texte
La zone de texte La boîte de texte Le composant a désormais un nouveau paramètre, Password, qui, lorsqu'il est défini sur true, vous donne la possibilité de masquer les caractères dans l'entrée et de lui donner un aspect de mot de passe approprié.
Nouvelles fonctionnalités du composant TreeView Blazor
Sélection de nœuds TreeView
La sélection de nœud TreeView peut être configuré en définissant le paramètre SelectionMode sur un membre de l'énumération TreeViewSelectionMode, qui prend l'une des trois options:
- N un – désactiver la sélection de nœuds (par défaut)
- Unique
- Multiple (à l'aide des touches Ctrl ou Maj)
Événements de clic sur les nœuds TreeView
Deux nouveaux événements ont été ajoutés au composant pour permettre une flexibilité lors de la sélection et de l'utilisation des nœuds TreeView:
- OnItemClick – incendies lorsque l'utilisateur clique (ou appuie sur Entrée) sur un nœud (élément) de TreeView.
- SelectedItemsChanged – l'événement SelectedItemsChanged se déclenche lorsque la sélection est activée et l'utilisateur clique sur un nouvel élément.
Composants du graphique Blazor Nouvelles fonctionnalités
Infobulles de graphique
Vous pouvez enrichir vos graphiques Blazor avec trois options d'infobulle graphiques prêtes à l'emploi pour les points de données:
- Spécifique info-bulle pour chaque
- info-bulle commune à toutes les séries de graphiques
- Ou une info-bulle partagée qui fournit des informations résumées de tous les points de données de la catégorie survolée
Pour activer des info-bulles spécifiques pour les points de données de chaque série individuelle, vous devez inclure le < ChartSeriesTooltip > dans la balise < ChartSeries >, et définissez son paramètre Visible sur true.
Pour activer la même info-bulle pour toutes les séries de graphiques, ajoutez la balise à l'intérieur et définissez son paramètre Visible sur true.
L'interface utilisateur de Telerik UI pour le graphique Blazor permet une personnalisation complète de leur apparence: arrière-plan, couleur, etc. et du contenu qui est rendu dans l'info-bulle via des modèles / modèles partagés.
Le modèle d'infobulle du graphique et le modèle partagé vous permet de définir une logique métier personnalisée, de rendre le HTML et vous donne accès au paramètre de contexte . Dans le modèle, il fournit des informations sur le point de données actuel, telles que: CategoryIndex, SeriesIndex, SeriesName, DataItem, FormattedValue, et dans le SharedTemplate, il expose Category (rend le nom de la catégorie) et Points (une collection de données pour chaque série de données
Cliquez sur Événement sur un élément de graphique
Et pour rendre les choses plus interactives, l'interface utilisateur de Telerik pour Blazor Chart expose les événements qui vous permettent de gérer les clics des utilisateurs sur les séries de graphiques.
Consultez la Événement OnSeriesClick avec Telerik UI pour les cartes Blazor .
Télécharger Telerik UI pour Blazor 2. 1 5.0
Pour voir en action tout ce qui est mentionné dans le blog de publication, rendez-vous sur la page Telerik UI pour Blazor téléchargez la version 2.15.0 de Telerik UI pour Blazor pour pimenter vos applications Blazor. Continuez à nous dire ce qui fonctionne bien, ce qui doit changer et ce que vous aimeriez voir ensuite dans le portail dédié de commentaires Blazor ou dans la section des commentaires ci-dessous!
Merci!
Comme toujours , toute l'équipe travaillant sur Telerik UI pour Blazor chez Progress vous remercie de votre implication et de nous avoir aidés à grandir et à rendre Telerik UI pour Blazor plus grand et meilleur.
Source link