Mises à jour du menu, du TimePicker et de la grille
Dans la dernière version de Telerik UI for Blazor, nous avons de nouveaux contrôles ainsi que des mises à niveau majeures de la grille, de la compatibilité avec Preview 8 et plus encore. Découvrez les nouveautés.
Avec la version 1.6.0 de l'interface utilisateur Telerik pour Blazor notre offre s'enrichit de deux nouvelles commandes dans les menus et . ] TimePicker ainsi que des améliorations majeures dans la grille! Dans cet article de blog, nous vous donnerons plus de détails sur les derniers ajouts à la famille de composants de l'interface utilisateur Telerik UI for Blazor et sur la façon de les utiliser pour améliorer votre application Blazor.
Nous avons également de bonnes nouvelles pour vous tous qui envisagez d'assister à un projet. des grandes conférences .NET de septembre – BASTA .
Nouveaux composants Blazor
Avec la version 1.6.0, nous introduisons deux nouveaux composants essentiels: Dites bonjour aux
et
. ] tags!
Nouveau composant Blazor: Menu
Les applications Blazor peuvent désormais avoir un menu élégant et une navigation intégrée sans effort. Ajoutez simplement la balise TelerikMenu et fournissez une collection de modèles à sa propriété Data.
Pour chaque élément de menu Blazor, vous pouvez contrôler la structure, l'apparence et le comportement, ainsi que le comportement à l'aide des champs suivants de la liaison de données: id
ParentId
HasChildren
Items
Texte
Icon
URL
et l'événement OnSelected
.
] Le composant Blazor Menu peut être lié aux données et afficher des informations plates ou hiérarchiques .
Telerik UI pour le menu Blazor (données plates)
Nous savons que les modèles de données peuvent avoir des propriétés qui ne correspondent pas au même nom que les champs trouvés dans les composants de l'interface utilisateur de Telerik pour Blazor. C'est pourquoi nous vous permettons de définir simplement les vôtres dans la configuration du composant de menu.Vous devez définir la relation entre les propriétés de l'élément de menu et le champ de modèle auquel le le menu est lié. Pour ce faire, utilisez les propriétés de la balise TelerikMenu principale comme dans l'exemple ci-dessous:
- IdField => Id
- ParentIdField => ParentId
- TextField => Text
@using Telerik. Blazor.Components.Menu<TelerikMenu Data = "@ MenuItems"ParentIdField = "@ nameof (MenuItem.ParentId)"IdField = "@ nameof (MenuItem.Id)"TextField = " @nameof (MenuItem.Text) ">
Pour plus d'informations sur la liaison des données aux données hiérarchiques dans la composante Menu, consultez les détails de notre documentation Blazor.
Interface utilisateur Telerik pour le menu Blazor (Données hiérarchiques)
Pour activer la navigation dans le menu Telerik Blazor, vous disposez de deux options:
- approche vous pouvez utiliser la propriété intégrée UrlField pour renseigner les URL dans les ancres
- Pour une approche plus personnalisée et plus précise, vous pouvez utiliser un modèle à générer les liens souhaités, ce qui vous permet de mieux contrôler l'apparence de chaque élément de menu
Interface utilisateur Telerik pour le menu Blazor (Orientation horizontale et verticale)
Nouveau composant Blazor: TimePicker
Avec notre version 1.2.0 nous avons introduit le . Composant Blazor DatePicker et avec cette version, nous enrichissons la suite avec le contrôle des préférences de temps. Le composant Blazor TimePicker permet de sélectionner l'heure dans une liste visuelle dans un menu déroulant ou de la saisir dans une entrée de date qui accepte uniquement les valeurs DateTime.
Vous pouvez utiliser le format de date / heure standard:
ou personnaliser le format en fonction des besoins de l'application:
Plusieurs propriétés que vous pouvez configurer pour adapter l'utilisation du composant, telles que:
Min
Max
Valeur
etLargeur
. [19659011] Si vous devez gérer avec une logique spécifique les modifications apportées à l'entrée, telles que le trait de clavier, les boutons Définir ou Maintenant du menu déroulant, vous pouvez utiliser le ValueChangedEvent .
@ utilisant Telerik.Blazor.Components. TimePickerdu dans le composant de la grille de Telerik Blazor: il suffit de définir la propriété groupable . "Vrai"
. Cela permettra à vos utilisateurs de faire simplement glisser un ou plusieurs en-têtes de colonne vers le panneau de groupe et la grille visualisera les données groupées.
Interface utilisateur Telerik pour le regroupement de la grille Blazor
Pour supprimer un réglage de groupe, cliquez sur le bouton [x] sur son indicateur. Le panneau de groupe et les données correspondantes ne seront plus associés à ce groupe.
Pour les scénarios plus complexes, vous pouvez également imbriquer des groupes et réorganiser les groupes sélectionnés dans la position souhaitée, le tout par un simple glisser d'un en-tête de colonne. 19659008] Sélection de lignes de grille
Les lignes de grille prennent désormais en charge les options de sélection simple et multiple qui peuvent être configurées en définissant les
SelectionMode
surSelectionMode = "GridSelectionMode.Single"
ouSelectionMode = "GridSelectionMode.Multiple"
(ou désactivez Sélection en définissantSelectionMode = 'GridSelectionMode.None "
)Pour suivre la sélection d'utilisateurs dans vos applications, vous pouvez utiliser . ] reliure à double sens via l'événement
SelectedItems
ouSelectedItemsChanged
.
La grille prend également en charge une option de sélection de rangée via un Colonne de la case à cocher . Pour la définir, ajoutez une
colonne TelerikGridCheckbox
dans laTelerikGridColumns
de la grille.
@Utilisez Telerik.Blazor.Components.Grid
Data = @ GridData
SelectionMode = "GridSelectionMode.Multiple"
Pageable = "true"
PageSize = "10">
En mode Sélection multiple, la sélection peut être effectuée à l'aide des approches suivantes :
- Cochez la case correspondant à chaque ligne souhaitée
- Appuyez sur la touche Ctrl et maintenez-la enfoncée, puis cliquez sur les lignes souhaitées
- . Pour sélectionner une plage, utilisez la touche Shift et cliquez sur la rangée que vous souhaitez être le dernier de la gamme
Compatibilité de l'Aperçu 8 –
Dans la perspective de la version officielle d'ASP.NET Core 3.0 le mois prochain, notre objectif est de vous fournir en permanence des versions intermédiaires de nos composants Blazor. compatible avec chaque aperçu officiel de Microsoft.
La semaine dernière, nous avons annoncé notre compatibilité totale avec les dernières modifications incluses dans ASP.NET Core 3.0 Preview 8 .
Rendez-vous à BASTA
Pour ceux d'entre vous qui envisagent d'être à Mayence à Fin septembre, l'interface utilisateur de Telerik pour Blazor fera partie de la conférence BASTA . Venez rencontrer notre équipe sur le stand de Progress Telerik pour discuter de l'avenir de Blazor et participer à notre jeu «Code for Charity».
Nous vous encourageons à assister au discours liminaire engageant et provocateur de notre responsable de l'ingénierie logicielle, Pavlina Hadzhieva: Au revoir, JavaScript côté client – Bonjour Blazor .
Découvrez l'interface utilisateur de Telerik pour Blazor 1.6.0
Si vous êtes nouveau chez Blazor, visitez la page de présentation de l'interface utilisateur de Telerik pour Blazor et inscrivez-vous pour une expérience d'essai – rien de plus facile Cliquez sur! Ensuite, il suffit de suivre les documents de démonstration de Blazor et de documentation .
Commencez mon procès maintenant
Partagez vos réactions
Nous encourageons tous nos efforts en ce sens. adoptants et fans de continuer à fournir de précieux commentaires! S'il manque des fonctionnalités ou des composants dont vous avez besoin, rendez-vous sur le portail officiel d'informations de Telerik pour Blazor et soumettez-nous vos idées.
Codage Happy Blazor de l'équipe Telerik Blazor à Progress!
Source link