Fermer

novembre 26, 2018

Créer une application à faire avec les boutons et les entrées de Kendo UI en angulaire


Qu'est-ce qu'un bouton sans formulaire? Qu'est-ce qu'une liste de tâches sans éléments à faire? Nous répondrons à ces questions philosophiques et à d’autres questions relatives à la forme dans cette quatrième vidéo de la série Angular et Kendo UI Unite.

Nous allons commencer l’application à faire en utilisant nos merveilleux boutons Kendo UI en tant que tâches à effectuer individuellement. articles. Nous ajoutons ensuite l’entrée de la zone de texte de Kendo UI et nous obtenons le bon fonctionnement de notre application Tâches!

Bonjour à vous tous. Je m'appelle Alyssa Nicoll et je souhaite de nouveau la bienvenue à Angular et à Kendo UI Unite. Si vous êtes nouveau dans la série, je vous suggère de consulter le premier post ou ou de regarder la série de vidéos sur lesquelles sont basés ces posts! Dans cet article, nous allons passer en revue une application à faire que j'ai créée et l'étoffer un peu plus. Nous allons utiliser Kendo UI pour Angular et une entrée pour Kendo UI pour créer simplement cette application de tâches à faire. Dans les prochains articles, nous ajouterons quelques extras supplémentaires pour vous aider un peu plus.

Suivez le code trouvé ici!

J'ai donc déjà créé le composant de tâches à effectuer pour notre application. J'ai généré avec ng générer un composant to-do . Une fois à l'intérieur de celui-ci, j'ai créé un tableau de tâches à faire, qui contient un objet avec les éléments portant le nom de chaque tâche.


 import {Component, ViewEncapsulation} from '@ angular / core';
@Composant({
  sélecteur: 'todo',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.scss'],
 
})
classe d'exportation TodoComponent {
  todos = [
    {
      item: 'Take dog to vet',
    },
    {
      item: 'Get oil change',
    },
    {
      item: 'Finish super hard puzzle',
    },
    {
      item: 'Pack for Denver',
    },
    {
      item: 'Create to-do app',
    }
  ];
  …
  }

J'ai également effectué une fonction add todo et une fonction remove todo.


 addTodo (entrée: HTMLInputElement) {
    this.todos = [{ item: input.value }, ...this.todos];
    input.value = '';
  }
  removeTodo (todo, i) {
    this.todos.splice (i, 1);
  }

J'attrape littéralement la tâche à faire et la colle dans un nouveau tableau, tout en utilisant l'opérateur spread sur le tableau pour le diffuser à l'intérieur du nouveau tableau à côté du nouvel élément de tâche. Et mettre tout cela à égalité avec this.todos. this.todos = [{ item: input.value }, ...this.todos];

Ensuite, bien sûr, vous effacez la valeur d'entrée de sorte qu'une fois que vous avez fini de taper et que vous appuyez sur "entrée", le nouvel élément de tâche à faire sera effacé. sur cette valeur d'entrée. input.value = '';

Ensuite, remove, todo supprimera simplement cette tâche du tableau. Donc, si nous revenons à notre composant d'application, nous pouvons voir ici que nous n'utilisons pas notre panneau de commandes de boutons pour le moment, nous utilisons simplement ce composant à faire.

 Capture d'écran montrant le code HTML du composant d'application

I Nous avons également ajouté des styles personnalisés qui entreront en ligne de compte dans une minute.

 capture d'écran montrant comment créer des styles de composants

La première chose que nous souhaitons faire est donc de créer une div, et cela va juste envelopper les choses, et cela sera très utile dans notre prochaine vidéo pour les animations. Ensuite, nous allons créer un H1 avec "Quel bien dois-je faire aujourd'hui?" en elle. Bien sûr, vous pouvez simplement l'appeler "To-do App" ou un autre titre ennuyeux. 😉

Que dois-je faire aujourd'hui?

Nous avons besoin d’un champ d’entrée et nous allons utiliser celui-ci de Kendo UI. Donc, si nous ouvrons notre terminal, nous allons utiliser cette commande ng add : ng add @ progress / kendo-angular-input .

Nous allons maintenant créer notre entrée avec un type de texte . Mais nous allons également vouloir lui attribuer notre attribut kendoTextBox et lui attribuer un espace réservé.

Que dois-je faire de bon aujourd'hui?

  

Comme je l’ai déjà mentionné, je possède également certains styles personnalisés. Il me faudra donc ajouter une classe "new-todo-input" à l’entrée. Si nous allons de l'avant et que nous passons au SCSS, nous pouvons voir que je donne quelques nouveaux styles de saisie de tâches.

 .nouveau-à-faire-entrée, .todo {.
  rembourrage: 0;
  largeur: 100%;
  bloc de visualisation;
  taille de police: 18px;
  hauteur de ligne: 50px;
  text-align: center;
}
A.new-todo-input {
  marge: 25px 0;
  hauteur: 50px;
}

Ensuite, nous voulons lier un événement de frappe (sur entrée) à l'entrée. Ainsi, lorsque quelqu'un saisit une entrée, la fonction d'ajout d'élément à faire est appelée. Cela va ressembler un peu à ceci: (keyup.enter) = "addTodo ()" .

addTodo () s'attend toutefois à ce que l'élément de tâche soit transmis à il. Un moyen facile d'y parvenir est d'utiliser une variable de modèle: #itemInput . Alors maintenant, notre contribution est la suivante:

Que dois-je faire de bon aujourd'hui?

     

Voyons à quoi ressemblent les choses dans le navigateur. Je vais servir notre application avec ng serve .

 capture d'écran de l'application avec le titre et la saisie de titre

Nous avons notre H1, nous avons nos styles avec notre contribution, ça a l'air si joli.

À ce stade, je meurs pour essayer nos fonctions d'ajout et de suppression. Cependant, nous devons d’abord faire des choses à l’écran. Donc pour la prochaine étape, j'ai pensé que ce serait amusant d'utiliser les boutons de l'interface utilisateur du Kendo . Nous allons créer un autre div, et celui-ci utilisera * ngIf et nous dirons s'il y a des tâches à faire, rendre le reste de ce code HTML possible.

nous allons créer un bouton comme nous l’avions fait auparavant . Et nous allons lui attribuer, bien sûr, un attribut de kendoButton et un bouton de type de . Ensuite, nous devons créer un ngFor pour parcourir la liste des tâches à ce stade: * ngFor = "let todo de todos; index as i" .

dois-je faire aujourd'hui?

     
       

Ensuite, un certain style est en ordre. J'ai utilisé la classe de todo . Donc, si nous revenons au SCSS, nous pouvons vérifier quels styles personnalisés j'ai créés. J'ai même des choses spéciales qui se passent en vol stationnaire:

 .todo {
  affichage: flex;
  rembourrage: 0 20%;
  align-content: center;
  hauteur: 50px;
  fond: aucun;
  bordure: aucune;
  rayon de bordure: 0;
  Couleur blanche;
  débordement caché;
  transition: 125ms atténuent la couleur de fond;
  &: vol stationnaire {
    image de fond: aucune;
    couleur: hsl (0,90%, 56%);
  }
  span: vol stationnaire {
    text-decoration: ligne directe;
  }
}

Je dis à chaque personne d'être flexible, d'avoir un certain rembourrage et d'aligner le contenu au centre. Je règle également la hauteur à 50 pixels, en supprimant tout arrière-plan, bordure ou rayon de bordure donné. Je souhaite également que la couleur du texte soit blanche, que la tâche soit masquée par le débordement et que la couleur de fond soit remplacée par une transition.

 capture d'écran de l'application avec des éléments stylisés

Si vous avez remarqué la couleur plutôt cool schéma que je vais ici sur les tâches à faire, je l'ai simplement fait avec un peu de scss:

 $ todos: 45;
@pour $ i de 1 à $ todos {
  .todo: nth-last-child (# {$ i} n) {
    couleur de fond: hsl ((360deg / $ todos * $ i), 75%, 75%);
  }
}

Maintenant que nous avons des tâches à faire à l'écran, nous pouvons montrer l'ajout d'éléments!

 gif montrant que la fonction d'ajout d'une tâche fonctionne

Si vous remarquez, lorsque vous survolez le texte en particulier, vous obtenez cette belle croix, que je fais ici avec
sur span: vol stationnaire text-decoration: ligne directe . Cela indique à l'utilisateur que s'il clique sur
sur une tâche à faire, il devrait cocher la case.

 gif montrant un effet de croix sur la tâche à survoler

À l'intérieur de notre bouton, nous allons maintenant créer un moyen de supprimer -do éléments en utilisant le todo il suffit de faire une boucle pour obtenir:

{{todo.item}}

Je lui ai également donné un événement de clic qui supprime le article à faire. Il appellera removeTodo et lui transmettra l'index de la tâche à faire. Voyons notre liste de choses à faire dans le navigateur!

 gif montrant notre fonction de suppression de faire fonctionner

Donc, une dernière chose que j’ai ajoutée est vraiment agréable. Chaque fois que vous terminez votre liste de tâches, il n'y a rien et la liste de tâches vide a donc l'air un peu ridicule. Je pensais que ce serait une bonne idée d’ajouter une dernière div, ou dib, selon que vous puissiez taper ou non. Avec un ngIf qui vérifie todos.length, s'il est égal à zéro.

 
Fin

 gif montrant à quoi la page ressemble lorsque la liste de tâches à faire est finie

Il est donc extrêmement amusant d'utiliser ces composants de l'interface utilisateur de Kendo puis de les personnaliser. Angulaire aussi. C'est une combinaison puissante. Ce qui me passionne vraiment, ce sont les animations et l’utilisation de UX in motion. Et dans le prochain article de cette série, je vais en fait ajouter des animations angulaires à ce que nous avons déjà dans l'application Tâches. Cela donnera à l'utilisateur des indices sur ce qui se passe et lui permet de maintenir un modèle mental spatial. Alors rejoignez-nous pour le prochain épisode, et joyeux code pour tout le monde.

Si vous êtes nouveau dans Kendo UI pour Angular, vous pouvez en apprendre plus ici ou simplement vous lancer dans gratuitement. trial aujourd'hui.


Les commentaires sont désactivés en mode Prévisualisation.




Source link