Fermer

août 23, 2021

Formulaires dynamiques dans Vue avec les composants natifs de l'interface utilisateur Kendo


Comment Kendo UI peut-il vous aider à concevoir et à développer facilement le formulaire parfait dans Vue ?

Avant de commencer

Ce message convient à tous les niveaux de développeurs front-end qui utilisent Vue.js, il n'est donc pas supposé être familiarisé avec les concepts et les processus d'installation pour débutants. Voici quelques prérequis que vous devriez déjà avoir avant de commencer à utiliser Vue CLI 3 via cet article.

Vous aurez besoin de :

  • Node.js 10.x ou supérieur installé
  • Le gestionnaire de packages de nœuds 6.7 ou supérieur (npm) est également installé
  • Un éditeur de code : Visual Studio Code est fortement recommandé (voici pourquoi)
  • La dernière version de Vue est installée globalement sur votre machine[19659006]Vue CLI 3.0 installé sur votre machine

Qu'est-ce que l'interface utilisateur de Kendo ?

Kendo UI est un framework d'interface utilisateur Web complet avec une collection de composants d'interface utilisateur JavaScript avec des bibliothèques pour jQuery et encore plus modernes comme Vue, React et Angulaire. Les développeurs d'interface utilisateur Kendo créent des applications hautes performances interactives et réactives à l'aide de la vaste bibliothèque de widgets d'interface utilisateur et de composants de visualisation de données. bibliothèque de votre choix. Vous gagnez du temps sans vous soucier des fonctionnalités clés de l'interface et vous concentrez plutôt sur les fonctionnalités propriétaires. Kendo UI est livré avec la prise en charge de chacun de vos frameworks Web frontaux préférés comme Vue.js avec une intégration facile à utiliser. pas besoin d'ajouter des bibliothèques supplémentaires à votre projet pour gérer les tableaux et les graphiques. Ces éléments d'interface utilisateur avancés sont également très personnalisables.

Focus accessibilité

La plupart du temps, lorsque les utilisateurs créent des interfaces utilisateur ou utilisent des bibliothèques d'interface utilisateur, ils ne tiennent pas compte de l'accessibilité des composants qu'ils créent ou des éléments qu'ils intègrent dans leurs projets. C'est un espace où Kendo UI se démarque également – ils s'assurent que chaque élément qu'ils fournissent est rendu accessible dès la sortie de la boîte. alors ouvrez votre code VS et ouvrez un nouveau terminal. Accédez au répertoire de votre choix, puis créez un nouveau projet :

vue create kendoapp

Lorsque vous avez terminé de configurer un nouveau projet Vue appelé kendoapp, testez-le pour confirmer qu'il fonctionne sans erreur.

 cd kendoapp
npm exécuter servir

Si vous allez dans le répertoire racine, le fichier main.js devrait ressembler à ceci :

import Vue from 'vue'
import App  from './App.vue'
import '@progress/kendo-ui'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$ mount('#app')

Installation

Après avoir configuré Vue, l'étape suivante consiste à installer Kendo UI sur le projet à l'aide de webpack. Ouvrez le terminal dans votre code VS et exécutez les commandes ci-dessous :

npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default

Ce que nous allons construire

Nous allons créer un formulaire de demande d'emploi de concepteur UX qui comprendra un sélecteur de couleurs, des curseurs interactifs et un mode sombre.

La démo de l'application comprend un sélecteur de couleurs, des curseurs interactifs et mode sombre

Pour commencer, vous devez installer le package d'entrées Kendo UI pour les formulaires :

npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/ kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-dropdowns @progress/kendo-vue-dateinputs @progress/kendo-drawing @progress/kendo-vue-data-tools @progress/kendo- vue-animation @progress/kendo-licensing

Oui, vous en avez besoin de la plupart et vous pouvez décider de les installer les unes après les autres. En raison de la capacité native de ces composants, lorsque vous intégrez l'un d'entre eux sans l'installer au préalable, le terminal renvoie une erreur puis vous indique exactement ce qu'il faut installer. Je pense que c'est plutôt cool.

Après l'installation, vous pouvez maintenant importer quelques composants natifs individuels comme :

MaskedTextBox

La MaskedTextBox utilise un masque pour contrôler la saisie de l'utilisateur. Grâce à cela, vous pouvez définir le format spécifique en utilisant l'option mask du composant. Chaque masque peut contenir des règles de masque et des littéraux de masque. Les littéraux de masque sont automatiquement saisis pour l'utilisateur et ne peuvent pas être supprimés. Lorsque le MaskedTextBox s'initialise, il décore l'élément avec une classe CSS de zone de texte.

NumericTextBox

Le NumericTextBox permet à l'utilisateur de modifier et de soumettre des valeurs numériques spécifiques en tapant ou en utilisant les boutons rotatifs. Il convertit un élément en une zone de texte numérique, de pourcentage ou de devise. Le type de données de conversion dépend du format spécifique. Le composant affiche des boutons rotatifs qui augmentent ou diminuent sa valeur avec une étape prédéfinie.

Sélecteur de date

Le sélecteur de date permet à l'utilisateur de sélectionner une date de l'une des manières les plus intuitives de rendre une date. Il combine les fonctionnalités des composants Kendo UI pour Vue DateInput, Calendar et TimePicker, et permet à l'utilisateur d'entrer ou de choisir des valeurs de date et d'heure. Le composant DateTimePicker fait partie de la bibliothèque Kendo UI for Vue de composants Vue UI. Il est distribué via npm sous le package d'entrées kendo-vue-date.

Slider

Le Slider permet à l'utilisateur d'augmenter, de diminuer et de sélectionner des valeurs prédéfinies en faisant glisser sa poignée le long de la piste, ou en cliquant sur les boutons fléchés latéraux. Le composant vous permet de définir des valeurs minimales et maximales, de définir son orientation horizontale ou verticale, de déterminer ses petits et grands pas et d'ajuster le format et la position de son info-bulle.

RangeSlider

Le RangeSlider affiche et permet à l'utilisateur de sélectionnez une plage de valeurs. Le wrapper RangeSlider pour Vue est un wrapper côté client pour le widget Kendo UI RangeSlider.

Configuration initiale

Template

Vous trouverez ci-dessous le bloc de code du modèle tel qu'il apparaît dans le gif ci-dessus. .

<template>
<body id="app"  v-bind:class="[isActive?'red' : 'blue' ]">
   <div>
     <div class=" col-xs-12 col-sm-6 example-col">
          <label for="fname">Prénom</libellé><br>
          <entrée   tapez [19659071]="text" id="fname" nom=[19659032]"fname" placeholder="John" style="[19659109]font-size:18px;
 largeur:160px; marge:10px;" ><br>
          <label for="lname" >Nom</libellé><br>
          <entrée[19659070]type="text" id="lname" nom[19659071]="lname" espace réservé="Doe" style ="font-size:18px;
 largeur:160px;marge:10px;" ><br>
        </div>
        <div>
            <p>Entrez le numéro de téléphone</p>
            <maskedtextbox :mask="mask" :default-value=" valeur par défaut" ></maskedtextbox>
            
        </div>
        <br><br>
        <p>Choisissez la date d'obtention du diplôme</p>
        <div class="example-wrapper">
          <datetimepicker /> 
      </div> <br>
        <div>
          <label>
            <p>Nombre de designs Dribble que vous possédez</p>
            <numerictextbox
                :default-value="2"
                :étape="2"
                :min="0"
                :max="18">
            </numerictextbox>
        </étiquette>
        </div>
        <br>
        <div class="example-wrapper">
          <p>[19659089]Évaluez vos compétences en wireframing</p>
            <curseur
                :boutons="true"
                :étape="1"
                :valeur par défaut="7"
                :min="1"
                :max="10"
            >
            <slider-label :position="1">1</ curseur-étiquette>
            <slider-label :position="3">3</ curseur-étiquette>
            <slider-label :position="5">5</ curseur-étiquette>
            <slider-label :position="7">7</ curseur-étiquette>
            <slider-label :position="10">10</ curseur-étiquette>
            </curseur>
        </div> <br> <br>
      <div>
        <p>Mode sombre</p>
          <label class=" commutateur">
            <div @click="toggleClass()">
            <input type="checkbox"> </div >
            <span class="curseur"></span >
          </étiquette>
      </div>
    </div>
  </corps>
</modèle>

Ici, vous pouvez voir que l'interface utilisateur de Kendo a une manière légèrement différente de référencer les éléments du modèle, avec des éléments comme au lieu de dire . Cependant, nous veillerons à dire à Vue d'en prendre note dans la section logique. Nous avons également lié la fonctionnalité de basculement à la balise body mais le déclencheur au bouton en bas.

Logic

Copiez le bloc de code ci-dessous dans la section scripts du fichier app.vue :

< script>
import '@progress/kendo-theme-default/dist/all.css';
import { MaskedTextBox }[19659357]from '@progress/kendo-vue-inputs';
import { NumericTextBox } from '@progress/kendo-vue- input';
import { Slider, SliderLabel } from '@progress/kendo-vue-inputs' ;
import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
export default { 
    composants: {
        'maskedtextbox': MaskedTextBox,
        'numerictextbox': Numeric TextBox,
        'slider ': Slider,
        'slider-label': SliderLabel,
        'datetimepicker': DateTimePicker
    },
     données: fonction(){
        retour {
            masque: '(999) 000-00-00-00',
            valeur par défaut: '(359) 884-12-33-21',
            estActif: vrai
              
        };
    },
méthodes:{
  toggleClass: function(){
       this.isActive = !this.isActif;
    },
  }
};
</script>

Ici, nous avons importé tous les composants nécessaires de l'interface utilisateur Kendo, puis enregistré les différents composants. Nous nous sommes également assurés de dire à Vue de référencer les composants tels qu'ils sont spécifiés dans le modèle. Vous pouvez obtenir des erreurs de linting, mais ignorez-les car la bibliothèque Kendo UI pour Vue utilise une manière légèrement différente de nommer les éléments HTML. Nous avons également ajouté une logique pour la méthode de basculement pour le mode sombre.

La section style de votre app.vue devrait ressembler à ceci :

Il est important de savoir que ce sont tous des composants natifs de Kendo. Ces composants ne dépendent pas de frameworks tiers comme jQuery. Cela les rend légers et faciles à utiliser et à personnaliser sans trop de dépendances.

Conclusion

Dans cet article, vous avez été présenté à Kendo UI pour Vue et à son utilité pour les développeurs front-end. Nous avons également vu comment configurer l'interface utilisateur Kendo pour nos projets Vue, puis créer un projet amusant en utilisant des composants d'entrée natifs. Bon piratage !




Source link