Interface utilisateur Telerik pour Blazor R1 2021 – Splitter, curseurs et plus encore!

 < TelerikSplitter   Width  =  "100%"   Hauteur  =  "100%"   Orientation  =  "@ SplitterOrientation.Horizontal" >  
      < SplitterPanes >   
      <[19659012] SplitterPane   Taille  =  "100px"   Min  =  "50px"   Max  =  "150px"   Repliable [19659014] =  "vrai" >   
      < div > barre latérale gauche. Peut être réduit et redimensionné entre 50 et 150 pixels. </  div >   
      </ [19659012] SplitterPane >   
      < SplitterPane   Repliable  =  "false" [19659014]>   
      < div > volet de droite - contenu. Vous ne pouvez pas réduire ce volet pour qu'il soit toujours visible. </  div >   
      </  SplitterPane >   
      < SplitterPane   Collapsed  =  "true"   ] Réductible  =  "true"   Redimensionnable  =  "false"   Taille  =  "100px" >   
      < div > Troisième volet initialement réduit et non redimensionnable. </  div >   
      </  SplitterPane >   
      </  SplitterPanes >   [19659002]      </  TelerikSplitter > 

Orientation des composants de l'interface utilisateur du curseur

En fonction du scénario de votre application, vous pouvez facilement configurer le curseur avec une orientation horizontale ou verticale .

D'autres exemples liés aux étiquettes personnalisées de Blazor Slider peuvent être trouvées dans la documentation du composant.

Slider ValueChanged se déclenche chaque fois que le paramètre Value change, ce qui se produit lorsque:

• L'utilisateur clique les boutons latéraux d'augmentation / diminution
• Après que l'utilisateur cesse de faire glisser la poignée
• Lorsque l'utilisateur clique sur la piste de curseur

Blazor Range Slider Component [19659005] Présentation du composant d'interface utilisateur du curseur de plage

Pour étendre les capacités de sélection de valeurs du curseur, nous avons livré un composant RangeSlider dédié pour Blazor qui couvre les scénarios nécessitant des sélections de plage.

deux événements (au lieu de juste ValueChanged comme c'est le cas avec le Slider) comme suit:

• StartValueChanged – se déclenche lorsque le l'utilisateur déplace la plage inférieure du curseur
• EndValueChanged – se déclenche lorsque l'utilisateur modifie la plage supérieure du curseur

Les deux événements se déclenchent chaque fois que le paramètre Value correspondant change, c'est-à-dire après que l'utilisateur arrête de faire glisser la poignée ou lorsqu'ils cliquent sur la piste.

Blazor Loader Container Component

LoaderContainer UI Component Overview

Le nouveau LoaderContainer component est un excellent ajout pour les opérations de longue durée et votre B l'application lazor peut signaler visuellement qu'un processus se déroule en arrière-plan. Le conteneur de chargement fournit un indicateur animé, un panneau et une superposition que vous pouvez facilement configurer en termes d'apparence: couleur, taille, positionnement et texte.

Personnalisation de l'apparence du LoaderContainer

s'assure que l'apparence de LoaderContainer est entièrement personnalisable grâce à un ensemble riche d'options de configuration telles que:

• OverlayThemeColor – null (transparent), dark, light
• LoaderPosition – top, start, end

The Chargeur Container utilise le composant Loader précédemment publié en interne pour fournir l'indicateur animé, il existe donc plusieurs paramètres d'apparence partagés que vous pouvez utiliser pour styliser l'indicateur de chargement, à savoir:

• Type – Pulsing, InfiniteSpinner , ConvergingSpinner
• Taille – petit, moyen (par défaut), grand
• ThemeColor – Primaire, Secondaire, Tertiaire, Succès, Info, Avertissement, Erreur, Sombre, Clair, Inverse

Blazor Loader Modèles de contenu vous avez un contrôle total sur le rendu du balisage. Vous pouvez facilement définir un conteneur de chargeur personnalisé, modifier l'indicateur de chargeur par défaut ou mettre en œuvre votre propre panneau.

UI pour les composants Blazor prenant en charge l'indicateur de chargement intégré peut être trouvée dans la page de documentation dédiée.

Intégrations personnalisées avec LoaderContainer

Le conteneur Loader peut être facilement intégré dans n'importe quel scénario et n'importe quel composant personnalisé à portée de main— animation de chargement avec des données lourdes dans Blazor Grid processus de longue durée lors de la soumission d'un formulaire et plus encore!

Nouvelles fonctionnalités des composants Blazor UI

Nouvelles fonctionnalités de Blazor Grid

Grid Multi-Checkbox Filter

Avec cette version, nous étendons les options disponibles pour Filtrage des données de grille et ajout d'un filtre multi-cases à cocher – également appelé filtrage de type Excel . Le nouveau filtre multi-cases à cocher permet de filtrer les valeurs de la grille en affichant une liste de cases à cocher dans le menu d'en-tête de la grille qui correspondent aux valeurs uniques d'une colonne de grille.

Pour activer le filtrage de la liste de cases à cocher dans la grille, vous devez définir le FilterMode paramètre à Telerik.Blazor.GridFilterMode.FilterMenu et FilterMenuType à Telerik.Blazor.FilterMenuType.CheckBoxList. Des exemples de filtres de cases à cocher Data Grid et de filtrage lors de l'utilisation d'OnRead peuvent être trouvés dans la page de documentation.

Telerik Blazor Grid prend désormais en charge le chargement de groupes à la demande privilégiant les scénarios avec un grand nombre de groupes dans les données et permettant l'emplacement plus rapide et plus facile d'un groupe particulier. Initialement, les groupes apparaîtront réduits par défaut et les lignes enfants correspondantes pour le groupe ne seront chargées qu'une fois que l'utilisateur aura développé un groupe donné.

peuvent être combinés avec la virtualisation de lignes pour une amélioration des performances des données lourdes avec un grand nombre de groupes.

Chargement d'animations dans la grille

Dans la version actuelle 2.21.0 nous avons également amélioré la grille pour nous assurer que l'expérience utilisateur lors de l'exécution d'opérations de données lourdes est excellente. Lorsque l'interface utilisateur Telerik pour Blazor Grid détecte une opération de données asynchrone à exécution lente pendant que l'utilisateur travaille avec (modifie les enregistrements ou effectue la pagination, le tri, le filtrage et le regroupement.), la grille de données affiche un indicateur de chargement .

Interface utilisateur Telerik pour animation de chargement de grille Blazor

TreeList Multi- Filtre à cases à cocher

Nous avons ajouté un filtre à plusieurs cases à cocher à un autre composant fortement chargé en données: TreeList. Le nouveau filtre à cases à cocher permet de filtrer les valeurs de colonne TreeList en affichant une liste de cases à cocher dans le menu d'en-tête correspondant aux valeurs uniques d'une colonne spécifiée.

Nouvelles fonctionnalités de Blazor TreeView

Sélection de la case à cocher TreeView

Le composant Telerik Blazor TreeView fournit désormais une prise en charge intégrée de cases à cocher, autoriser g utilisateurs pour sélectionner un ou plusieurs éléments . La fonctionnalité est livrée avec plusieurs propriétés pour obtenir les éléments de l'arborescence cochés / non cochés, assurez-vous que la case à cocher du nœud parent reflète l'état de ses nœuds enfants, configurez le mode de sélection des cases à cocher (aucun, unique, multiple) et des événements pour vous permettre de gérer les éléments sélectionnés avec facilité. Si vos utilisateurs préfèrent travailler principalement avec le clavier, ils peuvent bénéficier de la navigation au clavier intégrée et la sélection des cases à cocher peut facilement être effectuée en utilisant simplement la touche «Espace».

du composant TabStrip vous pouvez ajouter n'importe quel contenu HTML en incluant d'autres composants Blazor dans l'en-tête de l'onglet. Si vous avez seulement besoin d'ajouter du style à l'en-tête de l'onglet TabStrip, vous pouvez utiliser le paramètre Class du TabStripTab pour définir votre CSS personnalisé (voir la section suivante pour plus d'informations sur le paramètre CSS Class ).

Interface utilisateur Telerik pour CSS spécifique au composant Blazor

Prise en charge du clavier pour le téléchargement, l'arborescence et le planificateur

Avec la version de janvier 2021, nous avons ajouté la prise en charge du clavier intégré pour plusieurs composants favoris— Upload TreeList et Scheduler .

Nouvelles fonctionnalités de Telerik Document Processing: WordsProcessing support pour les contrôles de contenu

Nous avons mis à jour et pour ceux d'entre vous qui utilisent le traitement de documents Telerik dans leurs applications Blazor! Les contrôles de contenu ou les balises de document structurées (SDT) permettent aux utilisateurs d'ajouter une sémantique spécifique au document: restreindre la saisie, modifier l'édition havior, etc. Habituellement, les contrôles de contenu sont utilisés pour créer un modèle qui vous permet de remplir des données spécifiques par interaction avec le document (à l'aide de cases à cocher, d'options prédéfinies, de calendriers). Avec la dernière version de la bibliothèque RadWordsprocessing, nous avons introduit la prise en charge de cette fonctionnalité, et vous pouvez désormais créer et manipuler les contrôles de contenu à l'intérieur d'un document.

New Blazor Sample Solution Blazing Coffee

Nous nous sommes assurés qu'avec le nombre croissant d'interfaces utilisateur pour les démos Blazor, nous ajoutons de nouvelles applications qui présentent l'utilisation et les scénarios de divers composants Blazor.

Comme beaucoup d'entre vous ont demandé de pouvoir accéder au code source et de jouer avec l'application de démonstration Blazing Coffee (grâce à notre coéquipier et gourou de Blazor Ed 😊) avec cette version, nous l'ajoutons officiellement en tant qu'exemple d'application de Blazing Coffee .

L'application de démonstration Blazing Coffee montre comment une application .NET à pile complète peut être créée avec ASP.NET Core, Blazor WASM et Telerik UI pour Blazor. Dans la démo, vous pouvez voir des composants d'action tels que: Drawer, Grid, DropDownList, DateRangePicker, Chart, Upload, Tooltip et plus encore! En outre, l'exemple d'application présente l'utilisation de la mondialisation et de la localisation, l'authentification, l'autorisation ainsi que l'application de thèmes clairs et sombres. Assurez-vous de le vérifier sur notre page du hub de démos de Blazor .

Téléchargez Telerik UI pour Blazor 2.21.0

Rendez-vous sur Telerik UI pour Blazor page téléchargez un essai gratuit de Telerik UI pour Blazor 2.21.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 NuGet Telerik.UI.for. Référence du package Blazor à la version 2.21.0. directement dans vos solutions Blazor.

Session Twitch spéciale et webinaire

Assurez-vous de vous inscrire au webinaire sur la version Telerik R1 2021 le mardi 26 janvier | De 11 h 00 à 13 h 00 HE ou rejoignez la session en direct d'une journée complète sur Twitch le vendredi 29 janvier, de 8 h 00 à 17 h 00 HE pour voir le les composants et fonctionnalités nouvellement sortis en action et obtenez des idées sur la façon de les utiliser dans vos projets. Examinez de plus près toutes les nouvelles fonctionnalités de la version.

Réservez votre place pour le webinaire

Merci de l'interface utilisateur Telerik pour Blazor Team at Progress!