Pleins feux sur les groupes de boutons Kendo UI

Comment un groupe de boutons peut-il améliorer le parcours et l'expérience de l'utilisateur lors de la navigation sur votre site ou application? Examinons les groupes de boutons et comment ils peuvent être utilisés

Dans notre dernier opus vous avez été présenté à l'humble bouton . Dans cet épisode, vous apprendrez à propos d'un ami des groupes de boutons. Un groupe de boutons est constitué de deux ou plusieurs boutons faisant partie d'un élément plus grand. Leur unité est leur caractéristique déterminante. Plusieurs boutons peuvent être placés l'un à côté de l'autre, mais cela ne signifie pas qu'ils sont un groupe. Comme les gens debout dans la foule, il y a certaines caractéristiques qui révèlent leur association. Le lien peut être un couple tenant par la main ou des écoliers portant le même uniforme. Les groupes de boutons ne sont pas différents. Leur apparence et leur comportement les unissent tout de même. Ceci est important car, parmi les informations que les utilisateurs doivent traiter, un groupe de boutons permet de voir plus facilement quels éléments et actions sont liés

Groupe de boutons par défaut

Il existe de nombreux cas d'utilisation pour un groupe de boutons. Ce pourrait être un moyen de présenter un ensemble de liens. Il pourrait agir comme un contrôleur ou une barre d'outils. Il peut même servir à masquer et afficher le contenu de manière conditionnelle. Quel que soit le but, l'objectif principal est de fournir à l'utilisateur un ensemble d'options à sélectionner.

Imaginez que vous construisez un magasin en ligne. Notre premier exemple sera un groupe de boutons destiné à filtrer le contenu de la page. C'est le moyen le plus simple de créer un groupe de boutons avec Kendo UI :

  
  
     

  

    
 Chaussures 
    
 Tops 
    
 Bas 
  
  

Groupe de boutons de sélection multiple

Par défaut, vous ne pouvez sélectionner qu'un seul bouton à la fois. Puisque vous créez un groupe de boutons pour agir comme un filtre, il serait utile que les utilisateurs puissent sélectionner plusieurs boutons. Pour ce faire, vous définissez l'option de sélection de la méthode kendoButtonGroup . Ceci est le code mis à jour:

 $ ('# filter') .kendoButtonGroup ({
  sélection: 'multiple'
}); 

Groupe de boutons de sélection unique

Les magasins en ligne ont également des contrôles pour le tri des informations. Le tri est un bon cas d'utilisation pour un groupe de boutons qui ne permet qu'une seule sélection. Les groupes de boutons qui agissent comme des liens de navigation sont également de bons candidats pour la sélection unique. Voici un exemple de groupe de boutons dont le premier élément est présélectionné. L'option index est utilisée pour sélectionner le bouton

Ceci est le code pour le groupe de boutons:

  <-- load script and styles -->


  

    
 Prix 
    
 Prix [19659011] $ (document) .ready (function () {
      $ ('# sort'). kendoButtonGroup ({
        indice: 0
      });
    });
  

Groupe de boutons de pagination

Une autre utilisation pour notre groupe de boutons est les liens de pagination. Mais ces boutons ne sont pas bons pour nous s'ils ne font rien. Nous pouvons ajouter un gestionnaire d'événement à nos boutons en spécifiant l'option select . Dans cet exemple, le gestionnaire d'événements affiche le numéro de page.

  <-- load script and styles -->


  
 Bienvenue 
  

    
 1 
    
 2 
    
 3 
    
 4 
    
 5 
  
  

Conclusion

Beaucoup de choses que vous pouvez faire avec un groupe de boutons peuvent être réalisées avec d'autres éléments. Par exemple, un groupe de sélection vous permet de choisir une ou plusieurs options dans une liste. Bien que la fonctionnalité soit similaire à un groupe de boutons, ce qui distingue un groupe de boutons est son apparence. Il n'y a rien qui dit «cliquez sur moi» comme un bouton peut. Vous pouvez personnaliser le style des éléments HTML pour obtenir la même apparence, mais cela n'est pas nécessaire lors de l'utilisation d'un thème. Et si vous utilisez un thème Kendo UI tous vos composants ressembleront à un tout unifié. Tout ce qui reste à décider est de savoir comment vous allez utiliser vos boutons. Sera-ce dans un lecteur multimédia? Un formulaire de commande? Ou un éditeur en ligne? Aimeriez-vous en savoir plus à ce sujet? Restez à l'écoute la prochaine fois que nous dévoilerons le composant suivant

Ressources