Comment utiliser un groupe de boutons jQuery Vue dans votre application Web

Un groupe de boutons vous aide à afficher facilement une sélection d'options pour vos utilisateurs. Apprenez à utiliser facilement un composant ButtonGroup dans vos applications Web.

Dans mon dernier message nous avons créé un bouton utilisant de Kendo UI pour Vue . Dans cet article, nous allons créer une application à l'aide du composant ButtonGroup .

Le groupe de boutons aura trois boutons représentant chacun une crypto-monnaie. Lorsqu'un bouton est sélectionné, une carte apparaît affichant les prix d'ouverture, de fermeture, haut et bas de la devise. Pour commencer, nous allons initialiser notre projet à l'aide de Vue CLI. Nous utilisons l'interface de ligne de commande car elle nous donne le code standard avec lequel nous pourrons travailler et présente d'autres fonctionnalités facilitant le développement. Nous allons ajouter le composant groupe de boutons à notre modèle principal. Créez ensuite un composant de carte personnalisé pour afficher les informations de la devise. Enfin, définissez les données de la carte de devise en récupérant son API.

Mise en route

Commençons par créer un nouveau projet Vue à partir de la ligne de commande, à l’aide du modèle webpack-simple. Les commandes suivantes installeront l'interface de ligne de commande Vue, créeront un projet nommé button-group et lanceront l'application:

 $  npm   install  -g @ vue / cli
$ vue init webpack-groupe de boutons simple
$  cd  groupe de boutons
[ npm   $ installer 
$  npm  run dev

Nous allons ensuite installer les paquets npm Kendo UI nécessaires au projet.

  npm   install  --save @ progress / kendo-ui
 npm   installez  --save @ progress / kendo-theme-default
 npm   install  --save @ progress / kendo-buttons-vue-wrapper 

Nous pouvons maintenant importer ces packages dans notre fichier src / main.js . Le paquet kendo-buttons-vue-wrapper contient des enveloppes pour les composants Button ButtonGroup et ToolBar . Nous allons importer les composants du ButtonGroup et du ButtonsInstaller . Un groupe de boutons utilise deux composants: un ButtonGroup qui est un conteneur et un ou plusieurs composants ButtonGroupButton qui sont les boutons individuels. Nous allons enregistrer nos composants globalement à l'aide des boutons ButtonInstaller et ButtonGroup et ButtonGroupButton seront ajoutés à la liste des composants:

Voici la mise à jour . ] fichier src / main.js .

 import  vue  de   'vue' 
 import  app  de   '. / App.vue '
 import  ' @ progress / kendo-ui '
 import  ' @ progress / kendo-theme-default / dist / all.css '
 import   { ButtonGroup 
        ButtonGroupButton 
        BoutonsInstaller }   de   '@ progress / kendo-buttons-vue-wrapper' 

Vue .  utilisez  ( ButtonsInstaller ) 

 nouveau   Vue  ( {
  el :   '# app' 
  composants :   {
    ButtonGroup 
    ButtonGroupButton 
  } 
  render :  h  =>   h  ( App ) 
} ) 

Ajout des composants

Ensuite, nous restituera notre composant en l'ajoutant au modèle situé dans le fichier src / App.vue . Tout d'abord, nous allons supprimer tout le balisage de l'élément #app et coller le code suivant:

 < kendo-buttongroup  : index  =  " 0  " > 
   < bouton kendo-buttongroup-bouton >  Bitcoin  </  bouton kendo-buttongroup-button > [19659050] < kendo-buttongroup-button >  Ethereum  </  kendo-buttongroup-button > 
   < kendo-buttongroup-button  ]>  Dash  </  Bouton kendo-buttongroup-button > 
 </  kendo-buttongroup >  

Le premier bouton est présélectionné en définissant la propriété index sur 0 . De même, les données msg de la configuration du composant ont été supprimées et les styles ont été supprimés car ils ne seront pas utilisés. Nous allons maintenant créer le composant de carte. Pour ce faire, nous allons créer un nouveau fichier nommé Card.vue et ajouter un modèle, un script et des styles pour le composant.

Voici le contenu du fichier:

 < template > 
   < div   class  =  " carte "  > 
     < h2 >  {{label}}  </  h2 > 
     < p >  Ouvert: {{open}}  </  p > 
     < p >  Close: {{close}}  </  p > 
     < p >  Haute: {{haute}}  </  p > 
     < p >  Faible: {1965} <19659053] </  p > 
   </  div >  ]
 </  modèle > 

 < script >  
 exportation   default   {
  nom :   'Carte' 
    accessoires :   {
      étiquette :  String 
      ouvert :  numéro 
      close :  Numéro 
      high :  Nombre 
      low :  Nombre
    } 
  } 
  </  script > 

 < style   portée >  
  .card   {
   frontière :   1  px solide  # ffab00 ; 
   de couleur de fond  :   # ffab00 ; 
   border-radius :   4  px ; 
   width :   286  px [19459021
   padding :   1  em ; 
   margin-top :   1  em ; 
   text-align :  centre ; 
} 
  </  style > 

Dans App.vue nous allons importer le fichier dans le script et ajouter le composant carte à la liste des composants.

 < script >  
 import  Carte  de   './ Card.vue' 

 export   défaut   {
  nom :   'app' 
  composants :   {
    Carte
  } 
   données   ()   {
     return   {
    } 
  } 
} 
  </  script > 
 

Ajout de données pour le composant carte

Le composant carte est déclaré dans le modèle d'application situé sous le composant ButtonGroup . Ses propriétés seront définies de manière dynamique à l'aide des données info . C'est la carte utilisée:

Nous ajouterons également trois propriétés supplémentaires aux données, btc eth et dash pour stocker le données pour Bitcoin, Ethereum et Dash. Les données que nous allons utiliser proviennent de l’API Cryptopia. Voici les points de terminaison dont nous avons besoin:

 https://www.cryptopia.co.nz/api/GetMarket/BTC_USDT
https://www.cryptopia.co.nz/api/GetMarket/ETH_USDT
https://www.cryptopia.co.nz/api/GetMarket/DASH_USDT

Inside in du crochet de cycle de vie monté, nous utiliserons axios pour obtenir les données de chaque extrémité et stocker les résultats à nos données. Axios devra être installé à partir de la ligne de commande.

Nous n'utiliserons qu'une seule carte pour afficher les données. Selon le bouton sélectionné, les données affichées sur la carte changeront. Pour ce faire, nous devrons ajouter un événement onSelect au groupe de boutons et ajouter son gestionnaire à la liste des méthodes. Le gestionnaire obtiendra l'index du bouton sélectionné et attribuera à info les résultats de btc eth ou dash . . Enfin, nous allons ajouter quelques styles personnalisés à l'application.

Il s'agit du fichier mis à jour App.vue et du projet final:

Lien vers le projet: https://github.com/albertaw/kendoui-buttongroup

Résumé

Dans ce tutoriel, nous a vu comment utiliser le composant Kendo UI ButtonGroup pour Vue. Nous avons dû importer les packages de Kendo UI et enregistrer les composants ButtonGroup et ButtonGroupButton globalement dans notre application. Nous avons ensuite créé un composant de fichier unique pour la carte et l'avons inclus dans le composant d'application. Nous avons ajouté de nouvelles propriétés de données et fait une demande à une API à l'intérieur du crochet de cycle de vie monté pour initialiser les données. Et une méthode onSelect a été ajoutée et liée à l'événement select dans le composant ButtonGroup.

Dans le prochain tutoriel, nous allons utiliser le composant ListView pour Vue. Cela nous donnera l'occasion d'apprendre à utiliser le composant DataSource de Kendo UI sur lequel nous nous baserons dans les prochains articles.

Essayez vous-même l'interface utilisateur de Kendo

Vous souhaitez commencer à tirer parti des plus de 70 composants de l'interface utilisateur de Kendo prêts à l'emploi, tels que Grid ou Scheduler? Vous pouvez commencer dès aujourd'hui à essayer gratuitement Kendo UI pour Vue et commencer à développer vos applications plus rapidement.

Commencer mon essai de l'interface utilisateur de Kendo

Versions angulaire, React et jQuery

Vous recherchez des composants d'interface utilisateur prenant en charge des cadres spécifiques? Vérifiez Kendo UI pour Angular Kendo UI pour React ou Kendo UI pour jQuery .

Ressources