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

Nous commençons la réalisation de notre to-do list par la page HTML home.page.html. Le terminal recompile la page instantanément à chaque modification. On change tout d'abord le titre de la barre d'outils pour afficher « Tâches ». Entre les balises <ion-content>, on insère un <ion-list> et, à l'intérieur, un <ion-list-header> contenant le texte « Mes tâches ». En dessous, on ajoute un <ion-card> auquel on assigne la classe tasks.

Construction de la liste

À l'intérieur de la carte, on insère un <ion-checkbox> suivi d'une balise <h4> portant la classe task-title avec un exemple de tâche (« faire la vaisselle »). On ajoute ensuite un <ion-button> avec l'attribut fill="clear" pour supprimer le fond, et un style en ligne float: right pour le positionnement. Ce bouton contient une icône avec le nom trash pour un effet « corbeille ». Voici un aperçu du markup obtenu :

<ion-card class="tasks">
  <ion-checkbox></ion-checkbox>
  <h4 class="task-title">faire la vaisselle</h4>
  <ion-button fill="clear" style="float: right">
    <ion-icon name="trash"></ion-icon>
  </ion-button>
</ion-card>

En bas de page, on ajoute un <ion-footer> contenant un <ion-item> avec un <ion-input> ayant le placeholder « Ajouter une nouvelle tâche », suivi d'un bouton d'insertion. On donne au bouton une forme arrondie avec shape="round", la couleur principale (color="primary") et une icône add. Premier résultat : la liste s'affiche avec une tâche cochable/décochable et un bouton de suppression.

Maintenant, on crée deux boutons pour ajouter et annuler les tâches, regroupés dans une balise parente <ion-buttons>. Le premier bouton reçoit la couleur primaire et une icône : rendez-vous sur la documentation officielle (ionicframework.com/docs) pour parcourir les icônes disponibles. Ici nous utilisons add-circle pour l'ajout. Le second bouton est dupliqué avec la couleur danger et l'icône backspace pour l'annulation. On observe maintenant nos deux boutons sur la page. Voilà pour cette première partie, je vous invite à consulter la suivante pour la suite du projet !

En résumé

Cette leçon montre comment construire la structure HTML d'une application to-do list avec le framework Ionic. Elle couvre l'organisation des balises ionic (ion-content, ion-list, ion-item), l'ajout de classes CSS pour le style, l'intégration d'icônes Ionic (trash, add, backspace) et la création d'un footer fonctionnel pour ajouter des tâches. Les démonstrations incluent la consultation de la documentation officielle Ionic pour sélectionner les icônes appropriées et l'application de styles (couleurs primaires et danger).

Points clés

• Structurer une to-do list avec les balises Ionic : ion-content, ion-list et ion-item pour organiser hiérarchiquement le contenu
• Utiliser les icônes Ionic disponibles (trash pour supprimer, add pour ajouter, backspace pour annuler) en consultant la documentation officielle
• Appliquer les classes CSS et les couleurs Ionic (primary, danger) pour styler les éléments et boutons de l'interface
• Implémenter un footer avec un input et boutons pour permettre l'ajout de nouvelles tâches à la liste
• Positionner les éléments avec des propriétés CSS comme float-right pour les boutons d'action

Questions fréquentes

Comment structurer une to-do list avec Ionic ?

Utiliser ion-content comme conteneur principal, ion-list pour la liste des tâches, et ion-item pour chaque tâche avec une classe task-title et un bouton de suppression avec icône trash.

Où trouver les icônes disponibles dans Ionic ?

Les icônes sont disponibles dans la documentation officielle Ionic (ionic.io/docs/v3) sous la section icons/overview, où on peut sélectionner directement l'icône souhaitée et obtenir les informations nécessaires.

Comment ajouter et supprimer des tâches dans l'interface ?

Un footer en bas de page contient un input pour saisir une nouvelle tâche et un bouton d'ajout avec icône. Pour la suppression, chaque tâche dispose d'un bouton avec icône trash, et un bouton séparé avec icône backspace permet d'annuler l'action.