Créer un formulaire de connexion animé en mode angulaire à l'aide de Kendo UI

Dans cet article, nous allons créer une page de connexion animée pour une application angulaire utilisant des composants Kendo UI. Nous allons apprendre à utiliser TextBox à partir des composants Input, qui fournissent une étiquette flottante et à ajouter un effet de zoom de Kendo UI pour jQuery.

De nos jours, créer un produit accrocheur est l’un des traits les plus courants de des applications Web. Cela peut être orienté vers la création de meilleures conversions ou pour attirer les utilisateurs à acheter, cliquer et afficher des éléments sur un site Web. Les animations aident à atteindre tous ces objectifs et plus encore.

Dans cet article, nous allons explorer davantage les composants de l'interface de Kendo pour Angular et créer une page de connexion animée. Nous utiliserons les composants d'entrée de Kendo UI pour Angular et les combinerons avec un composant d'interactivité d'interface utilisateur de Kendo UI pour jQuery afin d'obtenir la page suivante:

Mise en route

Avant de commencer à créer la page de connexion, vous devez d'abord télécharger et installer Angular CLI globalement sur votre ordinateur. Cela vous aidera à créer une nouvelle application angulaire sans trop de problèmes. Exécutez la commande ci-dessous à cet effet:

 npm   install  -g @ angular / cli

Créer une application angulaire

Maintenant que vous avez installé Angular CLI, commençons par créer une nouvelle application angulaire pour cette démonstration. Exécutez la commande suivante dans le terminal à partir de l’un de vos dossiers de projets:

 ng new kendo-login-form

La commande précédente créera une nouvelle application Angular dans un dossier nommé kendo-login-form . Vous pouvez vous déplacer dans le projet nouvellement créé avec la commande ci-dessous et lancer l'application:

 // change le répertoire
 cd  formulaire kendo-login
    
// Démarrer l'application
ng servir

Vous pouvez rencontrer une erreur avec le message ci-dessous sur votre console:

 ERREUR  dans  node_modules / rxjs / internal / types.d.ts  ( 81,44 ) : erreur TS1005:  ';'  attendue.
node_modules / rxjs / internal / types.d.ts  ( 81,74 ) : erreur TS1005:  ';'  attendue.
node_modules / rxjs / internal / types.d.ts  ( 81,77 ) : erreur TS1109: expression attendue.

Ceci est un numéro connu sur GitHub et il est dû au manque de compatibilité entre la version actuelle de TypeScript sur votre machine et rxjs . La solution rapide consiste à supprimer le dossier node_modules . Ouvrez maintenant le fichier package.json et dans l’objet des dépendances, modifiez les rxjs en supprimant ^ :

   "dépendances" :   {
    . ... 
     "rxjs" :   "6.0.0"  
     "zone.js" :   "^ 0.8.26" 
  } 

Enregistrez le fichier et exécutez à nouveau la commande npm install . Une fois le processus d'installation terminé, vous pouvez lancer l'application avec ng serve .

Ceci compilera votre application et démarrera le serveur de développement. Pour afficher la page par défaut de cette application angulaire, accédez à à l'adresse http: // localhost: 4200 à partir de votre navigateur préféré et vous verrez ceci:

Installation du composant d'entrée angulaire

L'interface de ligne de commande angulaire prend en charge l'ajout de packages via la commande ng add . Nous allons donc l’utiliser pour ajouter des composants d’entrée angulaire Kendo UI. Utilisez cette commande pour cela:

 ng add @ progress / kendo-angular-input

Les composants d'entrée de Kendo UI peuvent généralement être utilisés pour restituer des champs de saisie HTML permettant aux utilisateurs de saisir facilement des données pour n'importe quelle application angulaire. Certains de ces champs d'entrée incluent TextBox, TextArea, NumericTextBox, Slider, etc.

Après avoir installé le paquet kendo-angular-input nous pouvons maintenant utiliser le InputsModule . comme importé automatiquement dans notre application, comme indiqué ici dans le document ./ src / app.module.ts :

    
 ... 
 import   { InputsModule  }   de   '@ progress / kendo-angular-input' ; 
 import   { NavigateurAnimationsModule }   de   '@ angular / platform -browser / animations '; 
    
    
@  NgModule  ( {
. . 
  importations :   [
    NavigateurModule 
    InputsModule 
    NavigateurAnimationsModule
  ] 
  ... 
 ) 
 export   classe   AppModule   { } 

Composant d'entrée angulaire Kendo UI dans Action

Pour rendre le composant Input dans la vue, il suffit d'inclure le sur notre page. De plus, nous allons envelopper les éléments avec un composant TextBoxContainer afin de donner à l'élément d'entrée une étiquette flottante. Remplacez le contenu du fichier ./ src / app / app.component.html par le suivant:

 // ./src/app/app.component.html
    
 < div   class  =  " fluide de conteneur "    id  =  " authentification emballage  " > 
   < div   id  =  " message de bienvenue "  > 
     < h4 >  Connectez-vous pour continuer  </  h4 > 
   </  div > 
   < div   id  =  " wrap "  > 
     < img   src  =  " https://bit.ly/2udBml1 "    alt  =  " photo de profil "  > 
   </  div > 
   < div   class  =  " row "  > 
     < div   class  =  " col-xs-12 col-sm-12 col-md-12 "  > [19659083]
       < Le conteneur kendo-textbox-container   floatingLabel  =  " Nom d'utilisateur "  > 
         < input   kendoTextBox   type  =  " email "    /> 
       </  kendo-textbox-container > 
     </  div > 
     < div   class  =  " col-xs-12 col-sm-12 col-md-12 "  > [19659083]
       < kendo-textbox-container   floatingLabel  =  " Mot de passe "  > 
         < entrée   kendoTextBox   type  =  " mot de passe "    /> 
       </  kendo-textbox-container > 
     </  div > 
     < div   class  =  " col-xs-12 col-sm-12 col-md-12 "  > [19659083]
       < button   class  =  " submit-btn btn btn-success "  >  Connexion  </  bouton > 
     </  div > 
   </  div > 
 </  div > 

Ici, nous avons ajouté les composants d'entrée, les avons enveloppés d'un composant de zone de texte et avons également défini un floatingLabel pour chacun.

Ajouter l'effet de zoom

Afin de compléter la page de connexion animée ici, nous allons également inclure un effet de zoom en ajoutant les fichiers CDN suivants pour jQuery et Kendo UI dans le fichier ./ src / index.html . Remplacez le contenu du fichier index.html par ceci:

    
  
 < html   lang  =  " en "  > 
 < head > 
   < meta   charset  =  " utf-8 "  > 
   < titre >  KendoAngularLoginForm  </  titre > 
   < base   href  =  " / "  > 
   < meta   name  =  " viewport "    content  =  " width = périphérique- width, initial-scale = 1  " > 
   < link   rel  =  " icon "    type  =  " image / x- icon  "   href  = "  favicon.ico  " > 
   < link   rel  =  " feuille de style "    href  =  " https: // kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"[19459013 />
   < link   rel  =  " feuille de style "    href  =  " https: // kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css"[19459013hootingde19659018]
   < link   rel  =  " feuille de style "    href  =  " https: // kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.mobile.min.css"[19459013hootingde19659018]
   < link   rel  =  " feuille de style "    href  =  " https: // stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"1919909017>
 </  head > 
 < body > 
   < app-root >   </  app-root > 
    
   < script   src  =  " https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js "  >    </  script > 
   < script   src  =  " https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js  ] " >    </  script > 
 </  body > 
 </  html > 
 

Mettez à jour le composant d'application

Remplacez le contenu du composant d'application en ajoutant le code suivant:

    
 import   { Composant  OnInit }   à partir de   '@ angular / core' ; 
 déclarer   var  $ :   any ; 
 déclarer   var  kendo :   any ; 
@  Composant  ( {
  sélecteur :   'app-root' 
  templateUrl :   './ app.component.html' 
  styleUrls :   [ './ app.component.css' ] 
] ) 
 classe   de classe   de composant AppComponent   19659060] OnInit   {
   constructeur  ()   { } 
   ngOnInit  ()   {
     $  ( document ) .  ready  ( function   ()   {
       $  ( "[#19659291]. wrap img ") .  survol  ( fonction   ()   {
        kendo .  fx  ( ceci ) .  zoom  ( "in" ) . . startValue  ( 1 ) .  endValue  (
   1.5 ) .  play  (). 19659018]; 
      }   function   ()   {
        kendo .  fx  ( ceci ) .  zoom  ( "out" ) . . endValue  ( 1 ) .  startValue  (
   1.5 ) .  play  (). 19659018]; 
      } ) ; 
    } ) 
  } 
} 

Une fois l'application chargée, nous avons ajouté un effet de zoom à l'image de l'utilisateur sur le formulaire de connexion en survol.

Enfin, ajoutez les styles suivants à la feuille de style de l'application, comme indiqué ici:

 // ./src/app /app.component.css
    
#authentication-wrapper  {
   width :   300  px ; 
   text-align [19659018]:  center ; 
   background :   # c6cac6 ; 
} 
 # wrap   {
   de bord de fond :   20  px ; 
} 
 #wrap  img  {
   largeur :   82  px ; 
   bottom :   65  px ; 
} 
 # message de bienvenue   {
   margin : [19659398] 20  px ; 
   rembourrage :   20  px ; 
} 
 .submit-btn   {
   largeur :   74% ; 
   marge :   20  px  0 ; 
} [19659441] Tester l'application 
 Maintenant, démarrez à nouveau l'application en exécutant  ng serve  à partir du terminal situé dans le répertoire de l'application. Une fois l'application créée et diffusée sur  http: // localhost: 4200 vous verrez ceci: 

 Conclusion 
 Dans cet article, nous avons utilisé les composants de Kendo UI pour inclure champs de saisie pour notre application angulaire. Nous avons également appris à tirer parti de Kendo UI pour ajouter une sorte d'animation à un formulaire de connexion. 
 J'espère que vous avez tiré des leçons de cet article et que les composants de Kendo UI seront testés pour vos applications Web Angular. N’hésitez pas à lire la  documentation officielle  pour avoir une idée des autres fonctionnalités impressionnantes offertes par Kendo UI.