Fermer

mars 29, 2019

3 façons d'implémenter les menus déroulants dans Vue à l'aide de Kendo UI


Nous allons utiliser des exemples pour illustrer trois manières différentes d’ajouter facilement des fonctionnalités de Dropdown à votre application Vue.js à l’aide de Kendo UI.

Les dropdowns sont des superpositions contextuelles basculables permettant de restituer des listes de liens et des contenus associés. Ils constituent une partie importante de la composition de l’interface utilisateur de toute application. Ils aident à gérer l’espace d’écran en empilant les options de données dans un seul élément d’interface utilisateur, permettant ainsi à l’espace disponible sur l’écran de l’application de générer davantage de contenu. Une caractéristique unique qui identifie les Dropdowns est qu’ils sont basculés en cliquant et non en survol.

Dans cet article, nous allons examiner trois manières différentes de mettre en œuvre des Dropdowns dans une application Vue à l’aide de Kendo UI. Vous pourriez demander, qu'est-ce que Kendo UI? Kendo UI est un produit développé par Progress pour faciliter le processus de création de composants d'interface utilisateur en JavaScript.

Le Kendo UI est une collection de composants d'interface utilisateur JavaScript avec des bibliothèques pour React Vue Angular et jQuery . Après avoir compris en quoi consiste l’interface utilisateur de Kendo, passons à l’édification de Dropdowns avec l’interface utilisateur.

Mise en place d’un projet Vue

Nous devons d’abord créer un projet Vue.js permettant de démontrer la mise en oeuvre de Dropdowns. . Sans plus tarder, ouvrez une fenêtre de terminal sur votre répertoire préféré et exécutez la commande ci-dessous:

 vue create dropdown  -  démo

Si vous n'avez pas installé Vue CLI dans le monde, veuillez suivre ce guide et revenez ensuite à la suite de cette leçon.

Lorsque vous avez terminé de démarrer votre application Vue, placez-vous dans le nouveau répertoire d'application Vue et démarrez le serveur de développement

 $ cd dropdown  -  démo
$ npm run serve

Ceci servira votre application Vue sur localhost: 8080 . Naviguez jusqu'à votre navigateur et vous verrez votre application Vue en direct.

Bienvenue sur votre application Vue

Ajoutez l'interface utilisateur de Kendo à votre projet

Ensuite, ajoutons Kendo UI à notre nouveau projet Vue.

  1. Le paquet Kendo UI
  2. Le paquet de thèmes par défaut Kendo UI
  3. L’emballeur Kendo UI Dropdown pour Vue

Pour ce faire, ouvrez une fenêtre de terminal dans dans le répertoire racine du projet et exécutez les commandes ci-dessous:

 // Installez le paquet kendo ui vue
Installer  $  npm   --save @ progress / kendo-ui
// Installer une enveloppe déroulante pour kendo ui  pour  vue
[ npm   installer  --save @ progress / kendo-dropdowns-vue-wrapper
// Installer le paquet de thème par défaut de kendo ui
$  npm   installer  --save @ progress / kendo-theme-default

Maintenant que nous avons tous les paquetages Kendo UI nécessaires dans notre projet, poursuivons et construisons nos menus déroulants.

1. Mettre en œuvre une liste déroulante avec la ComboBox de Kendo UI

Kendo UI possède un composant ComboBox qui permet aux utilisateurs de choisir parmi une liste d'options ou d'entrer des valeurs personnalisées à l'aide du clavier. Il fonctionne de la même manière que l’élément select habituel, mais avec davantage de fonctionnalités et de fonctionnalités. Pour ajouter notre liste déroulante avec ComboBox, ouvrez d’abord le fichier main.js et mettez-le à jour avec le code ci-dessous:

       import  Vue  de   "vue" ; 
       import  App  de   "./ App.vue" ; 
      
       import   { de DropdownsInstaller }   de   " @ progress / kendo-dropdowns-vue-wrapper "; 
      Vue .  utilisez  ( de DropdownsInstaller ) ; 
      
      Vue .  config .  productionTip  =   false ; 
       nouveau   Vue  ( {
        render :  h  =>   h  ( App ) 
      } ) .  $ mount  ( "# app" ) ;

Nous importons ici le package DropdownsInstaller et demandons à Vue d'utiliser ce package dans notre application. Ensuite, nous renommons le fichier par défaut HelloWorld.vue dans le répertoire de composants en Dropdown.vue et le mettons à jour avec le code ci-dessous:

     // src /components/Dropdown.vue

    <template[19459016eakfasts>191990905930<<div  class  =  "Bonjour" > 

         <








 Le meilleur outil 2023 pour ta croissance Instagram ! 








   


Source link