Interface utilisateur Telerik pour Blazor: Drawer, DateRangePicker, Excel Export

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.

Telerik UI for Blazor Positions – Left and Right

Modes d'affichage des tiroirs

Pour vous donner plus de flexibilité, le composant Drawer fournit les modes suivants pour affichage de son contenu:

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

Pour l'activer, vous devez définir le paramètre MiniMode sur true, comme illustré dans l'exemple de code ci-dessous (dans sa valeur par défaut false, le tiroir ne sera pas visible lorsqu'il sera réduit).

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

 <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);    
   
   ]}