IONIC - 3.5 Réalisation d'une to do list (1)

On va commencer par faire la page HTML, on peut voir le terminal qui build la page instantanément concernant la page “home.page.html». On va tout de suite changer le title et on va écrire "Tâches". Entre les balises ion-content, on va insérer une balise « ion-list», et à l’intérieur on va mettre « ion-list-header», donc « ion-list-header» pour y insérer “Mes tâches". En dessous, on va insérer un « ion-card», on va également lui créer une classe appelé “tasks”, pour insérer en dessous un « ion-checkbox» suivi d’une balise « h4». ou on va mettre une class “task-title”, voilà donc on va mettre également le nom de la tache qui sera par exemple “faire la vaisselle”. et en dessous on va mettre un bouton avec « ion-button» on va lui permettre de pouvoir cliquer dessus, on met l’attribut “fill” qui permet de supprimer le background, la couleur “danger”, et du style direct pour le positionnement avec un « float right». Et enfin, une icône “trash” pour avoir une icône style corbeille. Ci-dessous, on va introduire un « ion-footer», qui sera le bas de la page et à l’intérieur on va mettre un « ion-item», qui sera la balise parent de « ion-input», ou on va insérer l’ajout d’une nouvelle tâche avec un bouton d'insertion « ion-input» on va mettre un « placeholder» dans un premier temps, on va lui dire « ajouter une nouvelle tache» voilà, et juste en dessous on va mettre le bouton qui nous permettra d’insérer la nouvelle tache sur lequel on va lui mettre une forme arrondi et également une couleur primaire, donc « Color primary» et enfin on va ajouter une icône d‘ajout “add” pour ajouter l’ensemble des nouvelles tâches, donc « name addAjouter» tout simplement. On regarde déjà notre premier résultat, et on peut voir, ici l’ensemble de nos balise Ionic, on peut bien cocher et décocher une tâche. Maintenant, on va créer des boutons pour ajouter et annuler les taches, donc avec la balise ion-buttons qui sera parent des 2 balises enfants ion-button, la première on va la personnaliser, donc voilà la première, avec une couleur primaire, on va aussi insérer une icône, alors pour les icônes, je vous invite à consulter la documentation du site officiel :”https://ionicframework.com/docs/v3”, donc la on est sur le site officiel, dans “componets, vous pouvez aller sur “overview”, et via « overview» vous avez “icons”, et vous avez les bootcode en fonctions de ce que vous désirez, et vous avez directement les informations et les insertions c’est très explicite et très bien fourni. Donc on revient sur notre page HTML avec nos boutons concernant les icônes, on n’oublie pas de rajouter un “slot end” pour sa position, voici l'icône que je vais utiliser, donc il s'appelle “add-circle” donc pour Ajouter. Et le deuxième bouton, on copie on colle on fait les modifications une couleur style “danger”, et le nom de l'icône est “backspace” pour annuler. On modifie et on met annuler. Et voilà le résultat, on observe bien nos 2 boutons sur notre page. Donc voilà pour notre première vidéo de projet, je vous retrouve pour la suite dans la prochaine vidéo, à tout de suite !