Découvrez les derniers de nos 40 composants et plus, ainsi que les nouvelles fonctionnalités, les extensions Visual Studio et bien plus encore dans Telerik UI pour Blazor.
Il est officiellement temps pour Telerik R2 2020 et nous sommes heureux de partager tous les nouveaux composants, fonctionnalités, Visual Studio et Visual Studio Code extensions que Telerik UI pour Blazor a livrés au cours des quatre derniers mois! Un an après avoir officiellement publié la première version de Telerik UI pour Blazor, nous avons maintenant franchi une nouvelle étape avec plus de 40 composants natifs prêts pour le produit Blazor qui fonctionnent à la fois dans WebAssembly (WASM) et dans les applications Blazor côté serveur.
à la boîte de dialogue MultiSelect précédemment annoncée Info-bulle ListView Pager et Case à cocher composants, ainsi que 15+ améliorations de grille avec cette version, nous avons beaucoup à offrir. Cela inclut l'expédition de deux nouveaux composants dans Tiroir Blazor et DateRangePicker de nouvelles fonctionnalités comme Exporter la grille Blazor vers Excel Sélection de la plage de calendriers Assistant de conversion de Visual Studio Programme d'installation Mac, compatibilité avec la version candidate de Blazor WebAssembly et plus encore! Comme toujours, nous avons écouté vos commentaires et inclus dans la version de nombreux éléments et fonctionnalités les plus votés. Lisez à l'avance et découvrez les nouveautés de Interface utilisateur Telerik pour Blazor !
Compatibilité avec Blazor WebAssembly Release Candidate
Nous sommes heureux de partager que Telerik UI pour Blazor est compatible avec Blazor WebAssembly release candidate et nous promettons d'être entièrement compatible avec la version officielle peu de temps après son annonce par Microsoft plus tard ce mois-ci.
Nouveau composant de tiroir Blazor
Présentation du composant de tiroir
L'interface utilisateur pour le composant de tiroir Blazor est un panneau licenciable ou visible en permanence pour naviguer dans des applications Web réactives. Il permet de changer le contenu des différentes sections de la page. 
Interface utilisateur Telerik pour composant tiroir Blazor
Pour utiliser l'interface utilisateur Telerik pour tiroir Blazor, tout ce que vous avez à faire est de ajoutez la balise remplissez sa propriété Data et placez le contenu souhaité dans la balise .
<TelerikDrawer @ ref = "@ Drawer" Data = "Data" MiniMode = "true" Mode = "@ DrawerMode.Push" @ bind-SelectedItem = "SelectedItem" >
Placez votre contenu ici… tel comme @SelectedItem? .Text
]
Drawe r Navigation
Le tiroir peut être utilisé comme un menu permettant la navigation entre les pages dans les applications Blazor. Pour utiliser le tiroir dans un tel scénario, vous devez ajouter le tiroir au MainLayot.razor de votre application, placez la balise @Body dans la balise du tiroir et fournissez une collection de modèles qui décrivent les pages que vous souhaitez
Consultez l'exemple d'utilisation du tiroir comme navigation entre les pages Blazor .
Positionnement du tiroir
Selon les exigences de l'application Blazor, vous devrez peut-être positionner le tiroir à gauche ou droit par rapport au contenu de la page. Cela peut facilement être obtenu en réglant simplement le paramètre Position du tiroir sur DrawerPosition.Right ou DrawerPosition.Left.
- Overlay ( DrawerMode.Overlay) – le tiroir se développe au-dessus du contenu du conteneur et affiche une superposition grisée dessus.
- Poussez (DrawerMode. Push) – le tiroir se dilate côte à côte au contenu du conteneur en réduisant sa largeur.
Mode mini tiroir
Lorsque le tiroir est dans un état replié, vous pouvez activer son "mini mode" ou "mini vue" qui signifie que lorsque le tiroir est réduit au minimum il l affiche uniquement l'icône de l'élément.
<TelerikDrawer @bind -Expanded = "DrawerExpanded"
Data = "@ Data"
[1945902929] MiniMode = "true"
Mode = "DrawerMode.Push"
@ bind-SelectedItem = "@ selectedItem"
@ ref = "@ DrawerRef" >
@ if (! DrawerExpanded) [19659003] {
<Icône TelerikButton = "@ IconName.Menu" OnClick = "@ ToggleDrawer" >
}
[1945902929] ] <div class = "text-info m-5" >
Sélectionnez un élément pour charger le contenu pour il
Contenu pour le le @selectedItem? .Text
@code { [19659003] public TelerikDrawer DrawerRef { get ; ensemble ; }
public DrawerItem selectedItem { get ; ensemble ; }
public bool DrawerExpanded { get ; ensemble ; } = true ;
public IEnumerable Data { get ; ensemble ; } =
nouveau Liste
[19659027] {
nouveau DrawerItem {Text = "Counter" Icon = IconName.Plus},
nouveau DrawerItem {Text = "FetchData" Icon = IconName.GridLayout},
};
Tâche asynchrone ToggleDrawer ()
{
attendent DrawerRef.ToggleAsync ();
}
[1965909898] public [19659113] classe DrawerItem
{
public chaîne Texte { get ; ensemble ; }
public chaîne Icône { get ; ensemble ; }
}
}
Personnalisation du tiroir avec des modèles [19659008] Le tiroir est, par défaut, un composant lié aux données et rend une entrée pour chaque élément de sa collection de données. Vous pouvez personnaliser son apparence via les modèles qu'il propose:
Drawer Events
Le composant Drawer expose SelecteditemChanged et ExpandedChanged événements pour vous permettre de gérer les interactions utilisateur et les changements d'état des composants:
- SelecteditemChanged – se déclenche chaque fois que l'utilisateur clique sur un nouvel élément de tiroir
- ExpandedChanged – se déclenche chaque fois que l'état du composant est modifié.
Navigation du clavier du tiroir
Le composant du tiroir a une navigation de clavier intégrée permettant aux utilisateurs finaux de naviguer, de se concentrer et de cliquer facilement sur les éléments du tiroir à l'aide de leur clavier.
Nouveau composant de sélection de plage de dates Blazor
Présentation de DateRangePicker
Le nouveau composant Blazor DateRangePicker permet aux utilisateurs de sélectionnez des périodes directement à partir d'une fenêtre contextuelle du calendrier ou modifiez les plages de dates à partir des entrées de date de début et de fin. L'intervalle de date est visualisé en temps réel dans une liste déroulante animée. Les valeurs des entrées de date et du calendrier sont synchronisées pour permettre de modifier la plage de dates choisie. 
Pour ajouter une sélection de plage de dates dans votre application Blazor, ajoutez simplement la balise TelerikDateTimePicker et configurez le composant avec les valeurs Min, Max et Format pertinentes.
<TelerikDateTimePicker Min = "@ Min" Max = "@ Max" @ bind-Value = "@ selectedTime"
[19659201] Format = "jj MMM aaaa HH: mm: ss" Largeur = "250px" >
@code {
privé DateTime? selectedTime = DateTime.Now;
public DateTime Min = nouveau DateTime (1990, 1, 1, 8, 15, 0);
public DateTime Max = nouveau DateTime (2025, 1, 1, 19, 30, 45);
]}
Événements DateRangePicker
Plusieurs événements sont disponibles pour capturer et gérer les modifications des valeurs de la plage de dates dans le composant Sélecteur DateRange:
- OnChange – se déclenche lorsque l'utilisateur appuie sur Entrée dans l'entrée, ou lorsque l'entrée perd le focus
- StartValueChanged et EndValueChanged – les deux événements se déclenchent lorsque l'utilisateur sélectionne une nouvelle plage
- ViewChanged – se déclenche lorsque le l'utilisateur modifie la vue (par exemple, passer des jours d'un mois à des mois d'une année)
Dates désactivées DateRangePicker
Lorsque vous travaillez avec des plages de dates vous pouvez également définir certaines dates comme désactivées c'est-à-dire empêcher les utilisateurs de les sélectionner comme date de début et de fin de l'intervalle. Toutefois, ces dates peuvent toujours faire partie de la sélection de période.
Pour désactiver des dates spécifiques, définissez-les simplement dans la liste des valeurs DisabledDates dans TelerikDateRangePicker, comme illustré dans l'exemple ci-dessous. @StartValue " @ bind-EndValue = " @ EndValue "
DisabledDates = " @ disabledDates "[19659014]>
@code {
[19659147] Liste disabledDates { get ; ensemble ; } = nouvelle Liste ()
{
DateTime.Today.AddDays (2),
DateTime.Today .AddDays (3)
};
public DateTime StartValue { get ; ensemble ; } = DateTime.Today;
public DateTime EndValue { get ; ensemble ; } = DateTime.Today.AddDays (8);
}
DateRangePicker Mondialisation et localisation
Le L'interface utilisateur de Blazor DateRangePicker a une localisation et une mondialisation intégrées qui permettent des formats automatiques du client tenant compte de la culture, afin que les utilisateurs voient les dates standard pour leur pays / région. Par exemple, en définissant le format sur «d», les personnes situées à différents endroits verront différents formats: MM / jj / aaaa (pour les États-Unis) ou jj / MM / aaaa (pour le Royaume-Uni). Les noms de mois et les textes des boutons sont facilement traduisibles dans n'importe quelle langue.
Navigation clavier DateRangePicker
La navigation clavier intégrée dans le composant DateRange Picker offre aux utilisateurs la possibilité d'interagir avec le composant avec le clavier.
Améliorations des composants Blazor
Exportation de la grille Blazor vers Excel
Les utilisateurs des applications Blazor peuvent désormais facilement exporter les données de la grille vers Excel en cliquant sur un bouton. Le fichier exporté conservera les paramètres de la grille, de sorte que le filtrage, le tri, la pagination, le regroupement, l'ordre des colonnes et la taille des colonnes soient appliqués aux données dans le document xlsx.
<GridCommandButton Command = "ExcelExport" [19659016] Icon = "@ IconName.FileExcel" > Exporter vers Excel
De plus, vous pouvez spécifier s'il faut exporter les pages actuelles ou toutes les pages de la grille, ainsi que le nom du fichier résultant, comme indiqué dans l'exemple ci-dessous.
<GridExcelExport FileName = "telerik-grid-export" AllPages = "@ ExportAllPages" />
Sélection de la plage de calendrier
Dans cette version, nous avons amélioré le contrôle Calendrier avec l'option de sélectionner plage de dates dans les applications Blazor (en plus de la sélection unique et multiple de dates existante).
Pour activer la sélection des plages de dates, vous devez définir le calendrier SelectionMode sur Plage et pour récupérer les dates sélectionnées par les utilisateurs dans l'application, vous pouvez utiliser la liaison bidirectionnelle pour le RangeStart (représentant la première date de la sélection) et les paramètres RangeEnd (la dernière date de la sélection), ou la gestion des paramètres RangeStartChanged et RangeEndChanged événements .
Convertir le projet Blazor en projet Telerik Blazor
Avec cette version, nous avons ajouté une nouvelle extension Visual Studio pratique pour ajouter rapidement l'interface utilisateur Telerik pour les composants Blazor dans les applications Blazor existantes (serveur et assemblage Web)
L'extensi on peut être démarré à partir du menu principal Extensions dans Visual Studio -> Telerik> Telerik UI pour Blazor> Convertir en application Telerik, ou en cliquant directement avec le bouton droit sur votre projet Blazor existant et en sélectionnant Telerik UI pour Blazor> Convertir en application Telerik. [19659291] 
Installer Telerik UI pour Blazor sur Mac
En plus du programme d'installation existant Telerik UI pour Blazor pour Windows (. msi fichier ) , avec cette version [19659321] nous avons automatisé l'installation pour utilisateurs Mac. Vous pouvez maintenant facilement configurer et profiter de l'interface utilisateur Telerik pour Blazor composants via le nouveau programme d'installation Mac [19659321] (. Pkg fichier ) .
Interface utilisateur Telerik pour Blazor Installer macOS
L'interface utilisateur automatisée pour le programme d'installation Blazor pour Windows et [19659345] plates-formes macOS fournit le nécessaire fichiers Nuget fichiers version hors ligne de Composant Telerik Blazor [19659321] démos que vous pouvez exécuter et inspecter dans votre IDE traitement de documents Nuget package fichiers et s raccourcis vers nos démos en ligne [19659321].
Telerik Blazor R3 2020 Roadmap
Nous continuerons d'étendre l'interface utilisateur de Telerik pour Blazor et nous avons déjà des plans passionnants pour les prochaines versions 2020. Si vous souhaitez avoir un aperçu de ce qui s'en vient, nous vous encourageons à continuer à utiliser la page Telerik UI for Blazor Roadmap . Non seulement vous aurez un aperçu de notre pipeline de fonctionnalités, mais vous aurez toujours la possibilité de nous aider à améliorer vos précieux commentaires. Votre contribution aide à rendre l'interface utilisateur Telerik pour Blazor plus grande et meilleure pour tout le monde.
Télécharger la dernière version de l'interface utilisateur Telerik pour Blazor
Nous tenons à remercier tout le monde pour le soutien continu et nous vous encourageons à téléchargez une version d'essai gratuite de Telerik UI pour Blazor, ou si vous êtes un détenteur de licence actif, vous pouvez simplement récupérer la dernière et la meilleure sur la page Votre compte! Partagez votre opinion avec nous sur notre portail dédié de commentaires Blazor et aidez-nous à façonner l'avenir de l'interface utilisateur pour Blazor.
Inscrivez-vous au webinaire Telerik R2 2020
pour vous inscrire au webinaire de la version Telerik R2 2020 le jeudi 21 mai 2020 de 11 h 00 à 12 h 00 HE pour un examen plus approfondi de tous les nouveaux composants et fonctionnalités Telerik de la version.
Et si vous avez besoin de plus d'interface utilisateur Telerik pour Blazor, nous avons organisé un autre excellent webinaire de plongée profonde le mardi 2 juin 2020 à partir de 11 h HE. Au cours du webinaire, " Blazor en profondeur: Full-Stack C # avec Telerik UI pour Blazor et Entity Framework ," vous apprendrez à utiliser une variété d'interfaces Telerik UI pour Blazor pour créer un app à part entière en peu de temps. Restez à l'écoute.
Happy Blazor Coding!
Source link