Interface utilisateur Telerik pour Blazor 2.7 – MultiSelect, Grid, WebAssembly 3.2

C'est toujours en janvier mais notre deuxième version de Telerik UI pour Blazor est là! Découvrez le nouveau composant MultiSelect, la prise en charge WASM, les améliorations de la grille et bien plus encore.

Nous sommes heureux d'annoncer la deuxième version de Telerik UI pour Blazor pour 2020 et de vous présenter le grand nombre d'interfaces utilisateur de janvier

Plus tôt ce mois-ci nous avons publié la bibliothèque de traitement de documents (DPL), la navigation au clavier, l'accessibilité, le composant de saisie semi-automatique, le visualiseur de rapports pour Blazor (grâce à Telerik Reporting Team) et le planificateur amélioré. Dans la version 2.7.0, nous avons étendu l'interface utilisateur de la bibliothèque Blazor avec un tout nouveau composant MultiSelect, de nombreuses améliorations de la grille telles que les agrégats de colonnes, les modèles de pied de page et d'en-tête de groupe, le modèle d'en-tête de colonne, nouvelle application Web progressive intégrée au-dessus de Blazor WebAssembly

Lisez la suite et découvrez tout sur les nouveaux ajouts dans la version 2.7.0.

Notre objectif est de continuer à fournir des composants d'interface utilisateur natifs et prêts pour la production qui prennent en charge les deux Blazor. modèles d'hébergement: Serveur et WebAssembly (WASM). Nous nous sommes assurés que la version 2.7.0 est compatible et prend en charge la première version d'aperçu de Blazor WebAssembly 3.2.0.

Pour vous aider à démarrer avec Blazor WebAssembly nous avons créé un article détaillé décrivant les étapes nécessaires pour configurer et exécuter votre première solution. Et pour ceux d'entre vous qui ont des projets existants, vous devez suivre quelques étapes pour les mettre à niveau vers la version 3.2.0 Preview 1 décrite dans l'article officiel de Microsoft .

Nouveau composant Blazor MultiSelect

Présentation

Le nouveau composant Blazor UI MultiSelect affiche une liste d'options et permet plusieurs sélections dans cette liste. Il fournit des suggestions au fur et à mesure de la frappe, prend en charge la personnalisation du comportement, de l'aspect et de la convivialité grâce au recoupement de données, aux événements et au réglage des dimensions et modèles .

Interface utilisateur Telerik pour composant Blazor MultiSelect

Liaison de données

Le composant MultiSelect peut être lié à une simple collection de valeurs de chaîne

 < TelerikMultiSelect   Data  =  "@ Options"   @  bind-Value  =  "@ TheValues"   /> [19659024] Ou modèle de données avec juste une ligne de code: 

 < TelerikMultiSelect   Data  =  "@ Options"   @  bind-Value  = [19659018] "@ TheValues"   TextField  =  "StringRepresentation"   ValueField  =  "MyValueField"   /> 
 Filtrage
 Pour les cas comportant un grand nombre de valeurs de liste ou nécessitant une recherche plus rapide et simplifiée des valeurs, vous pouvez définir le paramètre de filtrage   du composant. De cette façon, le composant MultiSelect filtrera les suggestions disponibles en fonction de l'entrée utilisateur actuelle.
 Pour activer le filtrage, définissez le paramètre Filtrable sur true.
 < TelerikMultiSelect   Data  =  "@Roles"   @  bind-Value  =  "@ TheValues"   Filtrable  =  "true"  
    Placeholder  =  "Tapez 'de' pour voir le filtrage"   ClearButton  =  "true  /> 
 De plus, vous utilisez la propriété MinLength pour contrôler le moment où la liste de filtres apparaîtra.
 < TelerikMultiSelect   Data  =  "@ Roles"   @  bind-Value  =  " @TheValues ​​"  Filtrable  = " true "  MinLength  = " 2 " 
   Placeholder  =  "Tapez 'de' pour voir le filt ering "  ClearButton  = " true "  /> 
 L'opérateur de filtrage par défaut du filtre est " commence par " et   ignore le boîtier .  Vous pouvez facilement définir un opérateur différent via le paramètre FilterOperator qui prend un membre de l'énumération Telerik.Blazor.StringFilterOperator comme indiqué dans l'exemple ci-dessous:
 < TelerikMultiSelect   Data  = [[19659018] "@ Roles"   @  bind-Value  =  "@ TheValues"   Filtrable  =  "true"  
    FilterOperator  =  "@ StringFilterOperator.Contains"   /> 
 Modèles
 Vous pouvez personnaliser le composant MultiSelect et ses éléments en utilisant des modèles. Les options suivantes sont disponibles:
 Modèles d'en-tête - gère le rendu de l'en-tête pop-up d'un MultiSelect
 Modèles de pied de page - gère le rendu du pied de page pop-up d'un MultiSelect
 Modèles d'élément - gère la façon dont les éléments de liste d'un MultiSelect sont rendus
 Interface utilisateur Telerik pour modèles Blazor MultiSelect 
 Événements
 Vous plusieurs événements   sont disponibles pour capturer et gérer les modifications des valeurs dans le composant MultiSelect:
  OnRead  - se déclenche lors de l'initialisation du composant et du filtre utilisateur
  ValueChanged  - se déclenche lors du changement de sélection de l'utilisateur
  OnChange  - se déclenche uniquement lorsque l'utilisateur appuie sur Entrée ou brouille l'entrée (par exemple, clique à l'extérieur du composant)
 Prise en charge du clavier
 Comme tous autre Tel interface utilisateur erik pour les composants Blazor, le MultiSelect prend en charge la navigation clavier   qui permettra une navigation facile et une interaction avec les valeurs de liste du composant.
 Nouvelles fonctionnalités de Blazor Grid
 Agrégats de colonnes, modèles d'en-tête et de pied de groupe
 "Une grille sans regroupement n'est pas une grille", a déclaré un client sage une fois. Eh bien, nous avons décidé d'améliorer le regroupement dans cette version et d'ajouter  des agrégats de colonnes ainsi que des modèles d'en-tête et de pied de groupe  qui vous permettront d'afficher facilement les totaux de vos données de grille et de mettre en évidence des valeurs dignes d'attention.
 The Telerik L'interface utilisateur de Blazor Grid prend en charge plusieurs fonctions d'agrégation intégrées:
 Moyenne
 Nombre
 Max
 Min
 Somme
 L'activation des agrégats est simple: 1, 2, 3:
 la propriété Groupable de la grille à true
 Sous la balise définissez la fonction d'agrégation appropriée à un fichier dans la balise 
 Utilisez le résultat agrégé dans les modèles pris en charge
 Vous pouvez utiliser des agrégats dans le modèles suivants:
  GroupFooterTemplate  d'un GridColumn - un pied de page dans la colonne respective qui s'affiche lorsque la grille est groupée.
  GroupHeaderTemplate  d'un GridColumn - un en-tête dans le respectif colonne qui s'affiche lorsque la grille est regroupée par cette colonne. Le champ Valeur dans le contexte contient la valeur de groupe actuelle.
 Voici un exemple de code sur la façon d'implémenter des agrégats de colonnes de grille et des modèles de groupe:

 < TelerikGrid   Data = @ GridData  Groupable  =  "true"   Pageable  =  "true"   Hauteur  =  "650px" >  
  ]   < GridAggregates >   
    < GridAggregate   Champ = @ nameof (Employee.Team )  Aggregate  =  "@ GridAggregateType.Count"   />   
    < GridAggregate   Champ = @ nameof (Employee.Salary)  Aggregate  =  "@ GridAggregateType.Max"   />   
    <[[19659015] GridAggregate [19659019] Champ = @ nameof (Employee.Salary)  Aggregate  =  "@ GridAggregateType.Sum"   />   
   [19659149] </  GridAggregates >   



  


               




    < GridColumns >   
   < GridColumn   Field = @ nameof (Employee.Name)  Groupable  =  "false"   />  
    ]  < GridColumn   Field = @ nameof (Employee.Team)  Title  =  "Team" >   

  ]   < GroupFooterTemplate >   
    Membres de l'équipe: < strong > @ context.Count </  fort >   
    </  GroupFooterTemplate >   
    < GroupHeaderTemplate >   
    @ context.Value @ * le texte par défaut que vous obtiendrez sans le modèle * @   
    <  <[19659015] span > Taille de l'équipe: @ context.Count </  span >   
    </  GroupHeaderTemplate [19659017]>   
    </  GridColumn >   
   </  GridColumns >  
   </  TelerikGrid > 
 Interface utilisateur Telerik pour agrégats de colonnes Blazor et H eader Template 
 Column Header Template
 À l'aide de la balise vous pouvez définir un contenu personnalisé dans les en-têtes de colonne de la grille Blazor au lieu du texte du titre. À l'aide des modèles d'en-tête de colonne, vous pouvez styliser les en-têtes, visualiser des images ou même ajouter différentes actions via des boutons.
 < TelerikGrid   Data  =  "@ MyData"   Hauteur  =  "300px"   Pageable  =  "true "  Triable  = " vrai "  FilterMode  = " @ GridFilterMode.FilterMenu ">  
   [19659149] < GridColumns >   
    < GridColumn   Champ  =  "@ (nameof (SampleData) .Name)) ">   
    < HeaderTemplate >   
    Employé < br   /> < fort > Nom </  fort >   
    </  HeaderTemplate >   
    </  GridColumn >   
    < GridColumn > [  
    < HeaderTemplate >   
    < span [19659016] class  =  "k-display-flex k-align-items-center" >   
    < TelerikIcon   Icon  =  "@ IconName.Image"   />   
    Image d'employé   [19659002]    </  span >   
    </  HeaderTemplate >   
    </  GridColumn >   
    </  GridColumns >   
   </  TelerikGrid > 
 Nouvel exemple d'application PWA de Blazor WebAssembly
 Les applications Web progressives (PWA) sont en plein essor dans le monde du Web contemporain. Pourquoi? Eh bien, les PWA sont des applications Web qui utilisent des capacités Web modernes pour offrir une expérience semblable à une application à ses utilisateurs. Il peut être installé sur ordinateur de bureau et mobile, il fonctionne hors ligne et possède de jolies fonctionnalités comme les notifications push et bien plus encore.
 Bien que dédié un  article de blog détaillé sur la construction de Blazor PWA nous je voulais partager avec vous la nouvelle  application de démonstration financière conçue sous Blazor WebAssembly PWA .
 
 Telerik PWA construit sur Blazor WebAssembly 
 Téléchargez Telerik UI pour Blazor 2.7.0
 Rendez-vous sur la  la page Telerik UI pour Blazor  et téléchargez le 2.7.0 version de Telerik UI pour les composants natifs de Blazor. Faites-nous savoir quelle suite vous aimeriez voir dans la suite dans la section des commentaires ci-dessous ou notre portail dédié de commentaires  Blazor !
 Au nom de l'équipe Telerik Blazor at Progress - merci pour votre enga active continue gement et soutien!
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
Articles similaires