Liste déroulante ou bouton ? Les deux : Telerik DropDrownButton pour Blazor

Rationalisez votre interface utilisateur en plaçant les actions des boutons secondaires dans une liste déroulante. Découvrez comment personnaliser le style des boutons et définir des icônes individuelles pour chaque option d’action.

Bouton DropDown pour Blazor est la combinaison parfaite des fonctionnalités qu’un bouton ordinaire a à offrir avec les capacités d’un composant déroulant.

Il s’agit d’une option idéale pour fournir à l’utilisateur final de votre application .NET Blazor une interface utilisateur simple permettant d’afficher les options cachées parmi lesquelles choisir en un seul clic. Les scénarios typiques d’utilisation d’un tel composant incluent :

• Quand nous devons ajouter des options dans les barres d’outils pour les utilisateurs finaux
• Pour fournir des fonctionnalités sous forme de boutons autonomes, comme le bouton Enregistrer sous dans une boîte de dialogue Enregistrer

Ce composant simple mais extrêmement utile fait désormais partie de Progress Interface utilisateur Telerik pour Blazor suite et comprend :

• API de personnalisation riche
• Événements pour les scénarios avancés
• Plus de 18 thèmes prédéfinis avec possibilité de les personnaliser
• Navigation au clavier
• Accessibilité et prise en charge RTL

Maintenant, voyons-le en action ! 👇

Ajout de Telerik DropDownButton à une application Blazor

Si c’est la première fois que vous ajoutez un composant Telerik, vous devez préparer votre application .NET Blazor. Pour utiliser Telerik UI pour Blazor, vous devez :

Tout d’abord, préparez l’environnement

Tous les détails peuvent être trouvés dans Documentation Telerik.

Ensuite, vous êtes prêt à ajouter le TelerikDropDownButton

Ajouter un <TelerikDropDownButton> balise votre page HTML similaire au reste de l’interface utilisateur Telerik pour les composants Blazor :

<TelerikDropDownButton >
</TelerikDropDownButton>

Cela suffit pour afficher le bouton, mais cela ne sera pas utile à ce stade, non ? 😊

Pour lui donner l’apparence qu’il devrait avoir, nous pouvons configurer son contenu en définissant le <DropDownButtonContent> et nous ajoutons les choix que nous devons afficher lorsque le bouton est cliqué avec le <DropDownItems> étiqueter. Continuons avec ça.

Ajout de contenu déroulant

Afin d’ajouter du contenu à la zone déroulante du Telerik DropDownButton, vous devez utiliser sa balise DropDownContent. Il est de type objet, vous pouvez donc ajouter n’importe quel autre composant comme contenu de la liste déroulante. Le contenu peut être du texte brut, du HTML ou un autre composant.

Exemple:

<TelerikDropDownButton>
  <DropDownButtonContent>Paste</DropDownButtonContent>
</TelerikDropDownButton>

Ajout d’éléments TelerikDropDown

Pour ajouter des éléments déroulants ou des « boutons secondaires », définissez-les simplement dans la balise DropDownButtonItems comme ceci :

<TelerikDropDownButton>
…
  <DropDownButtonItems>
    <DropDownButtonItem  >Paste</DropDownButtonItem>
    <DropDownButtonItem  >Paste as HTML</DropDownButtonItem>
    <DropDownButtonItem  >Paste MarkDown</DropDownButtonItem>
    <DropDownButtonItem  > Set Default Paste </DropDownButtonItem>
  </DropDownButtonItems>
</TelerikDropDownButton>

Les éléments ci-dessus sont très utiles, mais nous pouvons néanmoins les améliorer et étendre leurs fonctionnalités en :

• Ajout d’une image ou d’une icône en définissant le Icon attribut
• Définir leur Enabled attribué à false si nous voulons qu’un élément soit désactivé pour une raison quelconque.
• Manutention OnClick événement

Note: Le Icon, OnClick et Enable les attributs peuvent également être attribués au DropDownComponent lui-même.

Voici la définition complète du composant :

<TelerikDropDownButton  Icon="@SvgIcon.Clipboard"  OnClick="@(() => OnButtonClick("Paste"))">  
  <DropDownButtonContent>Paste</DropDownButtonContent>  
  
  <DropDownButtonItems>  
    <DropDownButtonItem  Icon="@SvgIcon.ClipboardText"  OnClick="@(() => OnItemClick("Paste  Text"))">Paste  Text</DropDownButtonItem>  
    <DropDownButtonItem  Icon="@SvgIcon.ClipboardCode"  OnClick="@(() => OnItemClick("Paste  as HTML"))">Paste  as HTML</DropDownButtonItem>
    <DropDownButtonItem  Icon="@SvgIcon.ClipboardMarkdown"  OnClick="@(() => OnItemClick("Paste  Markdown"))">Paste  Markdown</DropDownButtonItem> 
    <DropDownButtonItem  OnClick="@(() => OnItemClick("Set  Default  Paste"))">Set  Default  Paste</DropDownButtonItem>  
  </DropDownButtonItems>  
  <DropDownButtonSettings>  
  <DropDownButtonPopupSettings  MaxHeight="500px"  MinWidth="150px">  
    </DropDownButtonPopupSettings>  
  </DropDownButtonSettings>  
</TelerikDropDownButton>

Examinons ensuite les attributs en détail.

Ajout d’icônes

Le <TelerikDropDownButton> et <DropDownButtonItem> fournir un Icon paramètre qui vous permet d’ajouter une icône au bouton principal et à tous les éléments d’action secondaires.

Le Icône Le paramètre est de type objet et il accepte :

• Une propriété de la classe statique SvgIcon
• Un membre de l’énumération FontIcon
• Une chaîne qui est une classe CSS pour une icône personnalisée

Événement OnClick

Le bouton principal et les boutons secondaires offrent le OnClick événement, qui se déclenche lorsque l’utilisateur clique ou appuie sur le bouton. Chacun d’eux exécute un OnClick gestionnaire.

L’exemple ci-dessus exécute le gestionnaire d’événements suivant :

private  void  OnItemClick(string item)  
  {  
    Console.WriteLine($"User clicked {item} option");  
  }

Maintenant, jouons avec l’apparence 🎨

Prise en charge et style des thèmes avec ThemeBuilder

Telerik DropDownButton est livré avec 18 variantes prédéfinies du Thèmes intégrés par défaut, Bootstrap, Fluent et Material. Vous pouvez facilement en choisir un et le modifier ou en créer un nouveau avec Progress Générateur de thèmes.

Dans notre exemple, nous définirons le thème sur Bootstrap avec des variations de couleurs nordiques.

Le Bouton déroulant fournit les mêmes paramètres d’apparence que le modèle standard Composant bouton. Nous pouvons définir :

• Mode de remplissage à contour
• Arrondi au plein
• Taille à grand
• ThèmeCouleur à la couleur marquant les états de « réussite » pour avoir une apparence et une sensation complètement différentes

<TelerikDropDownButton  FillMode="outline"  
  Rounded="full"  
  Size="lg"  
  ThemeColor="success”>  
  ...
</TelerikDropDownButton>

Explorez plus d’options de style avec le démo d’apparence.

La fenêtre contextuelle déroulante peut également être personnalisée en utilisant son DropDownButtonPopupSettingscomme ce qui est montré ci-dessous :

<TelerikDropDownButton  Icon="@SvgIcon.Clipboard"  OnClick="@(() => OnButtonClick("Paste"))">  
  ...  
  <DropDownButtonSettings>  
    <DropDownButtonPopupSettings  MaxHeight="500px"  MinWidth="150px">  
    </DropDownButtonPopupSettings>  
  </DropDownButtonSettings>  
</TelerikDropDownButton>

Plus de fonctionnalités : accessibilité, RTL et prise en charge du clavier

Accessibilité et RTL

L’interface utilisateur Telerik pour Blazor DropDownButton est livrée avec une prise en charge intégrée de droite à gauche (RTL) et offre un rendu de droite à gauche. En définissant le EnableRtl paramètre du TelerikRootComponent à trueTelerik DropDown va changer de direction :

<TelerikRootComponent  EnableRtl="true">  
  @Body  
</TelerikRootComponent>

Navigation au clavier

Par défaut, la KeyboardNavigation est activée et nous permet d’utiliser les touches ci-dessous comme décrit :

• Entrer ou Espace – Si la fenêtre contextuelle est ouverte, active l’élément actuellement sélectionné et ferme la fenêtre contextuelle. Si la fenêtre contextuelle est fermée, elle exécute l’action par défaut du DropDownButton.
• Alt + Flèche vers le bas – Ouvre l’élément contextuel.
• Alt + Flèche vers le haut – Ferme l’élément contextuel.
• Échap – Ferme l’élément contextuel.
• Flèche vers le haut – Met l’accent sur l’élément précédent dans la liste.
• Flèche vers le bas – Se concentre sur l’élément suivant de la liste.
• Maison – Se concentre sur le premier élément de la liste lorsque la fenêtre contextuelle est ouverte.
• Fin – Met en avant le dernier élément de la liste lorsque la fenêtre contextuelle est ouverte.
• Languette – Déplace le focus en dehors du composant.

Plus de ressources et de démos

Comme vous l’avez vu, ce simple composant d’interface utilisateur est en fait très puissant. Voyez-en plus dans Interface utilisateur Telerik pour les démos Blazorjouez avec directement dans Telerik REPL pour Blazor et Documentation Telerikou personnalisez avec Générateur de thèmes.

Essayez maintenant

Vous pouvez consulter vous-même l’interface utilisateur Telerik pour Blazor : téléchargez-le gratuitement maintenant, jouez avec et partagez vos commentaires et vos idées avec l’équipe Telerik sur Portail de commentaires Telerik ou Forums Telerik.

Essayez l’interface utilisateur Telerik pour Blazor

Bon codage !