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

Au début de 2021, nous sommes ravis d'annoncer que la suite de composants Telerik UI pour Blazor a franchi une nouvelle étape avec plus de 65 composants véritablement natifs. Plongeons-nous dans l'interface utilisateur Telerik pour Blazor 2.21.0 et voyons en détail tous les nouveaux composants et fonctionnalités qui vous aideront à accélérer le développement des applications Blazor Server et WebAssembly!

Bonne nouvelle 2021 flamboyante, chers développeurs! Nous espérons qu'il vous apportera avant tout santé, inspiration et succès! Avec la première version pour 2021, l'équipe Telerik UI for Blazor présente quatre nouveaux composants: Splitter Slider Range Slider ] Loader Container plusieurs nouvelles fonctionnalités souhaitées dans la Grid TreeView TabStrip nouvelle application de démonstration Blazor et plus encore!

Nouveaux composants d'interface utilisateur Blazor natifs

Composant d'interface utilisateur Blazor Splitter

Présentation du composant d'interface utilisateur Splitter

Le composant Interface utilisateur Telerik pour Blazor Splitter vous permet de diviser la mise en page d'une page en plusieurs volets ( sections), qui peuvent être développées, réduites, redimensionnées et imbriquées. En utilisant le contrôle Splitter, vous pouvez ajouter n'importe quel type de contenu dans ses sections (y compris d'autres composants) et fournir aux utilisateurs la fonctionnalité pour ajuster la mise en page dans les applications Blazor en fonction de leurs besoins – développez une section sur laquelle ils doivent se concentrer, réduisez celles qui être utilisé plus tard ou redimensionner facilement selon leurs préférences.

Interface utilisateur Telerik pour le composant Blazor Splitter

Utilisation et personnalisation du séparateur et des volets

Le composant Splitter se compose d'un conteneur principal défini par la balise et un ou plusieurs volets de séparation définis avec les balises imbriquées et comme indiqué dans l'exemple de code ci-dessous:

 < 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 > 

Pour le conteneur principal vous pouvez définir la classe CSS, la taille, l'orientation des volets individuels , ainsi que plusieurs événements répertoriés dans la section Événements du composant Splitter.

Pour les volets individuels vous pouvez définir leur propre classe CSS, leur taille et configurer les comportements liés à leur capacité à changer sa taille et à réduire (y compris la validation de redimensionnement max et min). Des informations détaillées relatives aux fonctionnalités du Splitter peuvent être trouvées dans la documentation du composant.

Orientation du composant Splitter

L'orientation des volets séparés peut être horizontale ou verticale à l'intérieur du composant Blazor Splitter.

Telerik UI for Blazor Splitter – Horizontal & Vertical

Gestion de l'état des composants Splitter

Le composant Splitter expose deux méthodes SetState (SplitterState updatedState) et GetState () qui vous permettent d'enregistrer et de restaurer les états de contrôle. Consultez un exemple sur la façon de sauvegarder, de charger et de contrôler par programme le répartiteur Telerik pour Blazor .

Événements du composant Splitter

L'interface utilisateur Telerik pour Blazor Le composant Splitter expose trois événements pour vous permettre de gérer et d'entreprendre des actions basées sur les entrées utilisateur des applications Blazor:

• OnCollapse – se déclenche lorsqu'un volet est réduit et reçoit dans ses arguments d'événement l'index du volet qui a été réduit
• OnExpand – se déclenche lorsqu'un volet est développé et reçoit dans ses arguments d'événement l'index du volet qui a été développé
• OnResize – se déclenche pour chaque volet redimensionné une fois que l'utilisateur a fini de redimensionner un volet (après avoir relâché le bouton de la souris) et reçoit l'index et la nouvelle taille dans ses arguments d'événement

Telerik UI pour Blazor Splitter Resizing

Blazor Slider Component

] Interface utilisateur du curseur Présentation des composants

Les utilisateurs de vos applications Blazor peuvent désormais faire défiler les valeurs et en choisir une avec le nouveau composant Slider . La navigation dans la plage de valeurs définie peut être effectuée soit en faisant glisser sa poignée, soit en utilisant les flèches latérales. Le curseur offre plusieurs options de configuration et fonctionnalités:

• Valeurs min et max
• Orientation
• Position de graduation
• Modèles d'étiquettes
• Petit / grand pas
• Navigation au clavier intégrée
• Prise en charge de la globalisation
• et plus !

Interface utilisateur Telerik pour le composant Blazor Slider

Pour utiliser Telerik Slider pour Blazor, tout ce que vous avez à faire est d'ajouter la balise TelerikSlider, de la lier à une valeur et de configurer les paramètres nécessaires pour qu'elle ressemble et fonctionne comme vous le souhaitez. L'exemple de code ci-dessous ajoute un composant Slider, utilise une liaison bidirectionnelle avec une plage de 0 à 100 et visualise des graduations plus petites de 1 et des graduations plus grandes pour 0, 20, 40, 60, 100.

 < TelerikSlider   @  bind-Value  =  "@ Volume"  
      Min  =  "0"   
      Max  =  "100"   
      SmallStep  =  "1"   
      LargeStep  = [19659015] "20"   
      Largeur  =  "400px" >   [19659002]   </  TelerikSlider > 

 @code {

     int Volume {get; ensemble; } = 77; 

} 

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 .

Telerik UI pour Blazor Vertical Slider

Slider UI Component Labels Customization

Le contenu de l'étiquette Slider le long de la piste peut être facilement personnalisé à l'aide de modèles d'étiquettes. vous souhaitez appliquer une mise en forme numérique ou un style personnalisé des étiquettes, vous pouvez facilement le faire dans la balise LabelTemplate comme illustré dans l'exemple ci-dessous:

 < LabelTemplate >  
      < span   style  =  "épaisseur de police: gras; font-style: italic; ">   
      @ context.ToString (" C2 ")   
      </  span >   
   </  LabelTemplate [19659014]> 

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

Telerik UI pour Blazor Slider – Modèles d'étiquettes

Slider ValueChanged Event

L'événement 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.

Telerik UI pour Blazor Range Slider

Toutes les fonctionnalités, options de configuration, orientation et modèles d'étiquettes restent valables pour Le composant RangeSlider également. En raison de sa nature de plage, le contrôle expose 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.

Interface utilisateur Telerik pour Blazor Loader Container Component

Pour ajouter un Telerik LoaderContainer à votre application Blazor, utilisez la balise et affichez-la si nécessaire à l'aide de son paramètre Visible.

 < TelerikLoaderContainer   Visible  =  "@ LoaderContainerVisible" > </  TelerikLoaderContainer > 

Personnalisation de l'apparence du LoaderContainer