Telerik UI Blazor—Assistant, Stepper, StackLayout, GridLayout

Quatre nouveaux composants, de nouvelles fonctionnalités par rapport à celles existantes et des améliorations de notre grille et de notre liste d'arbres : la version 2.25.0 de l'interface utilisateur Telerik pour Blazor a beaucoup à offrir.

Hey Blazor et l'interface utilisateur Telerik pour les gens de Blazor,

19659003]C'est à nouveau l'heure de la sortie, et ce mois-ci, l'interface utilisateur Telerik pour Blazor apporte quatre nouveaux composants : WizardStepperStackLayout et GridLayout : nouvelles fonctionnalités des composants Blazor existants, telles que le  Regroupement de ressources du planificateur le regroupement en composants déroulants ainsi que  multiple Grid et TreeList améliorations qui sont presque une tradition pour chaque nouvelle version de l'interface utilisateur Telerik pour Blazor !

Lisez l'article de blog de la version de juin 2021 pour en savoir plus sur le contenu complet 2.25.0, que vous pouvez brancher et jouez dans vos applications Blazor Server et WebAssembly !

Composant d'interface utilisateur Blazor Wizard[19659008]Présentation du composant Wizard

Sûrement l'un des points forts de la version 2.25.0 est le composant d'interface utilisateur Telerik Blazor Wizard ! À l'aide de l'assistant, vous pouvez facilement effectuer des processus en plusieurs étapes et simplifier la saisie de l'utilisateur en exposant un seul formulaire à la fois. Chaque étape de l'assistant peut avoir son propre contenu (formulaire ou autre HTML), une validation de formulaire facile à intégrer pour les données d'entrée, une navigation au clavier et un indicateur de progression indiquant le nombre d'étapes restantes pour atteindre l'objectif final du processus. Chacune des étapes permet une configuration, une localisation et une personnalisation supplémentaires.

Telerik UI for Blazor Wizard UI Component

Wizard Component Configuration

Par défaut, la hauteur du composant Wizard est dynamique et remplira la largeur de son conteneur, en fonction de son contenu. Cependant, width et height sont exposés en tant que paramètres configurables. Et ce n'est que le début de ce que vous avez à portée de main. 😊 L'assistant vous permet de configurer presque tous les aspects de celui-ci :

• StepperPosition – permet la configuration de la position du stepper : haut (par défaut), bas, gauche, droite
• Value – l'étape actuelle index
• ShowPager – configurer la visibilité du pager de l'assistant
• WizardButtons – si spécifié, vous permet de définir des boutons personnalisés ; sinon, l'assistant affiche les options de bouton par défaut
• WizardSettings – wrapper des paramètres de l'assistant où vous pouvez injecter les paramètres spécifiques du stepper (Linear et StepType)
  • StepType – étape avec indicateurs et étiquettes, ou simplement étiquettes
  • Linear – spécifie le flux linéaire des étapes de l'assistant (nécessite l'achèvement de l'étape précédente avant de passer à la suivante)

Et plus !

L'interface utilisateur Telerik pour les options de configuration de l'assistant Blazor

Le composant Assistant utilise en interne un autre nouveau composant, le Stepper (examiné en détail dans la section suivante). Nous nous sommes assurés que vous ayez le contrôle des principales propriétés du stepper interne et des options de personnalisation complètes de chacune des étapes de l'assistant : ContentIconIconClassImageUrlFacultatifDésactivéTexteLabel et Valide.

Intégration et validation du formulaire de l'assistant

Le composant Telerik Wizard permet une intégration et une utilisation fluides du composant Telerik Blazor Form dans son contenu, offrant ainsi une option élégante pour la saisie de l'utilisateur et l'avantage de en validation de formulaire. Découvrez cette démoqui montre comment restreindre facilement le passage à l'étape suivante de l'assistant lorsque la validation du formulaire n'est pas satisfaite.

Interface utilisateur Telerik pour l'intégration de formulaire de l'assistant Blazor

Options des boutons du composant Assistant

Le composant Assistant propose trois options de bouton par défaut : Suivant, Précédent et Terminé.[19659003]Au cas où vous auriez besoin de définir des boutons personnalisés, cela est possible en remplaçant les boutons de l'assistant via le paramètre WizardButtons .

Wizard Component Events

Le composant Wizard expose les événements suivants qui sont déclenchés lorsque :

• ValueChanged – après qu'une étape a changé
• OnFinish – lorsque le bouton "Terminé" de l'assistant est cliqué
• OnChange – avant une étape a changé

Blaz ou Composant d'interface utilisateur Stepper

Présentation du composant Stepper

Le nouveau Composant Telerik Stepper for Blazor est un contrôle d'interface utilisateur riche en fonctionnalités qui guide les utilisateurs à travers une séquence d'étapes logiques et visualise leur progression. Le Stepper est parfait pour guider les utilisateurs à travers des processus tels que l'application, le panier, la réservation ou la configuration.

Le composant est livré avec des options de personnalisation complète des icônes, des étiquettes, des indicateurs, de l'orientation, de la navigation au clavier intégrée et de la prise en charge de la localisation. d'étiquettes. Bien qu'il puisse être utilisé en tant que composant autonome, il fait également partie intégrante du composant Wizard.

horizontal et vertical—qui peuvent être facilement définis via la propriété Orientation.

Interface utilisateur Telerik pour l'orientation verticale Blazor Stepper

Personnalisation de Stepper via des modèles

Vous pouvez contrôler entièrement le rendu et les styles du étapes des composants. À l'aide de l'option fournie pour les modèles d'étapesvous pouvez personnaliser les indicateurs et les étiquettes de pas à pas selon vos besoins. De plus, vous pouvez définir des icônes dans les indicateurs d'étape et configurer les différentes options fournies par les paramètres IconIconClassImageUrl et SpriteClass .

Interface utilisateur Telerik pour les modèles Blazor Stepper

État et validation des étapes

Le Le composant Stepper expose Disabled et Optional parameters qui vous permettent respectivement de désactiver une étape ou de la marquer avec une étiquette facultative. De plus, vous pouvez ajouter une logique de validation pour chaque étape et, en fonction de son résultat, afficher une icône de réussite ou d'erreur (dans l'indicateur d'étape ou dans le cadre de l'étiquette d'étape).

Telerik UI for Blazor Stepper States

Blazor StackLayout et GridLayout UI Components

Dans cette version, nous introduisons deux composants bien connus du monde du bureau dans une saveur Web Blazor—le StackLayout et le GridLayout. Notre objectif avec ces deux composants est de soutenir les développeurs qui passent du développement de bureau à la création et à l'organisation de mises en page Web de manière familière en empilant des composants d'interface utilisateur dans des applications Blazor.

StackLayout UI Component

Utilisation du composant StackLayout pour Blazor vous pouvez facilement organiser ses éléments internes horizontalement ou verticalement dans une pile. Il représente un conteneur flexible d'une seule ligne et prend en charge les panneaux de pile imbriqués, de sorte que vous pouvez créer des mises en page plus complexes.

Telerik UI pour le composant d'interface utilisateur Blazor StackLayout

Configuration du composant d'interface utilisateur StackLayout

Le Le composant StackLayout expose les options de configuration suivantes : width & heightorientationspacinghorizontal alignvertical align et CSS class.

GridLayout UI Component

Pour des dispositions de mise en page plus complexes, vous pouvez compter sur le GridLayout componentqui offre un système de disposition en grille flexible avec des lignes et des colonnes. Il est basé sur le système bien connu CSS Grid Layout et permet aux éléments d'être configurés par ligne et colonne spécifiques et peut s'étendre sur eux.

Telerik UI for Blazor GridLayout UI Component

GridLayout UI Component Configuration

Le GridLayout permet la configuration à plusieurs niveauxà savoir :

• Grid – Classe CSS, espacement des lignes et des colonnes, alignement vertical et horizontal et collections de lignes, colonnes et éléments
• Grid Layout Row – hauteur de ligne
• Colonne de disposition de grille – largeur de colonne
• Élément de disposition de grille – Classe CSS, définition de la ligne et de la colonne de l'élément, étendue de ligne et étendue de colonne

Composant d'interface utilisateur de grille Blazor—Nouveau Caractéristiques

La grille Telerik a été le premier n Composant Blazor ative dans le produit en 2019 (même lorsque l'interface utilisateur Telerik pour Blazor n'était pas encore un produit, mais juste une expérience audacieuse).

Au cours des deux dernières années, il a considérablement mûri et comprend désormais plus de 100 fonctionnalités , tels que la virtualisation (colonnes et lignes), les en-têtes multi-colonnes, les lignes par glisser-déposer, le regroupement avec charge à la demande et bien d'autres encore !

Telerik UI for Blazor Composant de grille — Hier et maintenant

Dans la version 2.25.0 actuelle, nous ajoutons plusieurs nouvelles fonctionnalités pour la faire briller encore plus :

Passer le contexte aux boutons de commande

Avec cette nouvelle fonctionnalité, vous aurez un option disponible pour appliquer des boutons de commande de ligne de grille conditionnels en fonction des propriétés d'un élément de ligne. Ceci sera réalisé en ajoutant le contexte (élément de ligne actuel) au paramètre ChildContent actuel.

Navigation au clavier avec virtualisation des colonnes

La fonctionnalité permet des capacités de navigation au clavier dans les grilles avec des colonnes virtuelles configurées. Les utilisateurs peuvent facilement naviguer dans les plages de colonnes virtuelles (sous-ensembles de colonnes d'une ligne donnée) et modifier les éléments sans toucher à la souris.

Alignement du contenu des cellules de la grille

Un nouveau paramètre TextAlign est introduit dans les colonnes de grille liées qui vous permet d'aligner le contenu des cellules de la grille. Le paramètre sera de type ColumnTextAlign enum et accepte les valeurs « right », « left » et « center », qui à leur tour attache les styles text-alignt:right/left/center à la colonne de la grille.[19659088] L'interface utilisateur Telerik pour l'alignement des cellules de la grille Blazor affiche toutes les différentes options d'alignement pour sa colonne.  » src= »https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/grid—alignment-of-grid-cell-valuesd536b6a0f4a8494ba3282010b42af22d.jpg?sfvrsn=19effc6_0″ data-displaymode= »Original »/>
L'interface utilisateur Telerik pour l'alignement des cellules de la grille Blazor

Les nouvelles fonctionnalités de Blazor TreeList

Toutes les fonctionnalités mentionnées ci-dessus pour le composant Grid également été appliqué à la TreeListà savoir :

• TreeList Pass Context to Command Buttons
• Alignement du contenu des cellules TreeList
• Navigation au clavier avec virtualisation de colonne

Scheduler Component Resource Grouping

Le composant d'interface utilisateur de Telerik Blazor Scheduler fournit désormais une fonctionnalité de regroupement de ressources intégrée (pour une ou plusieurs ressources), qui peut être activée via la balise SchedulerGroupSettings. Les groupes de ressources du planificateur peuvent avoir une orientation verticale ou horizontale.

Interface utilisateur Telerik pour le planificateur Blazor. Regroupement de ressources

Nouvelle fonctionnalité de listes déroulantes : Regroupement

Dans la version précédentenous avons ajouté une fonctionnalité de virtualisation à nos composants déroulants (AutoCompleteDropDownListMultiSelect et ComboBox), et dans cette version, nous étendons leurs fonctionnalités avec le regroupement.

Pour activer le regroupement dans des composants déroulants, définissez le paramètre GroupFieldet le composant affichera un en-tête persistant avec le nom du groupe et répertoriera tous les éléments correspondants dans un conteneur pouvant être fait défiler.[19659102] L'interface utilisateur Telerik pour Blazor MultiSelect Grouping montre Sélectionnez un produit avec une liste déroulante déroulante séparée par catégories, et l'en-tête de catégorie reste affiché jusqu'à ce que la catégorie suivante soit défilée. Ainsi, « Boissons » s'affiche pendant que l'utilisateur fait défiler un tas d'options de boissons, puis « Confections » apparaît lorsque nous avons dépassé les boissons.  » src= »https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/multiselect—groupinge9e2548d40114495b2252c41c657adc9.gif?sfvrsn=85f310d1_0″ data-displaymode= »Original »/>

Interface utilisateur Telerik pour le regroupement Blazor MultiSelect.

Méthode FocusAsync dans plusieurs composants

Enfin, nous avons ajouté la Méthode FocusAsync à plusieurs composants pertinents à partir des entrées de texte, des sélecteurs de données et de temps, des listes déroulantes, des boutons et catégories de cases à cocher (Saisie semi-automatique, Zone de texte, Zone de texte, Éditeur, Palette de couleurs, pour n'en nommer que quelques-unes). La méthode est une fonctionnalité développée en relation directe avec une demande d'un client dans le portail de commentaires Telerik Blazor.

Téléchargez l'interface utilisateur Telerik pour Blazor 2.25.0

Nous vous encourageons à essayer les dernières et les meilleures de Interface utilisateur Telerik pour Blazor et dites-nous ce que vous en pensez !

• Pour tous ceux qui découvrent l'interface utilisateur Telerik pour Blazor, vous pouvez télécharger un essai gratuit de l'interface utilisateur Telerik pour Blazor 2.25.0 à partir de la page Interface utilisateur Telerik pour Blazor.
• Les titulaires de licence active Telerik peuvent récupérer la dernière version à partir de la page "Votre compte" ou mettre à jour directement la référence du package Telerik.UI.for.Blazor NuGet vers la version 2.25.0 dans les solutions Blazor existantes.

Merci !

– Votre équipe Telerik Blazor chez Progress