IONIC - 3.8 Réalisation d'une to do list (4)

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Maintenant que la mise en forme HTML/TypeScript est terminée, passons au style de notre application avec le fichier home.page.scss. Tout d'abord, dans ion-content, je modifie le background-color avec un blanc cassé en utilisant la référence #f9f9f9, ce qui donne un blanc assez neutre. Ensuite, sur la classe tasks, j'insère un padding léger de 10 pixels et je change la couleur de fond pour un blanc pur #fff afin d'apporter de la luminosité.

Personnalisation des classes

Sur la classe task-title, je définis margin: 0 et padding: 0 pour annuler les valeurs par défaut, puis display: inline-block pour créer du volume dans le rendu. J'ajoute également une marge gauche de 14 pixels pour décaler légèrement le texte, une police en gras (font-weight: bold), une taille de 15 pixels (font-size: 15px) et une couleur bleu électrique avec la référence #3880ff. Voici un résumé des règles CSS appliquées :

ion-content {
  --background: #f9f9f9;
}
.tasks {
  padding: 10px;
  background-color: #fff;
}
.task-title {
  margin: 0;
  padding: 0;
  display: inline-block;
  margin-left: 14px;
  font-weight: bold;
  font-size: 15px;
  color: #3880ff;
}

Pour la classe task-edit, je remets également margin: 0 et padding: 0, j'ajoute font-weight: bold, une taille de police de 11 pixels et un margin-top: 28px pour décaler verticalement. Le CSS reste évidemment personnalisable : ce n'est pas obligatoire de suivre exactement ces valeurs, c'est votre touche personnelle. Pour la classe empty, j'insère padding: 10px, text-align: center pour centrer le texte, margin-top: 50px et une couleur noire en utilisant color: #000.

Regardons le résultat : c'est nettement mieux qu'au départ ! Avec le fond gris clair pour le contenu et le blanc pour les cartes de tâches, on distingue bien les éléments. J'ai saisi une tâche « manger un fruit » et tout s'affiche correctement. Je suis resté sur du basique mais vous pouvez prendre des couleurs plus vives selon vos goûts. C'est terminé pour ces vidéos de projet to-do list ! Je vous conseille de réviser, on se retrouve pour un petit quiz dans la prochaine vidéo. À bientôt !

En résumé

Cette leçon couvre la mise en forme CSS d'une to-do list en Ionic, transformant une interface basique en une interface visuellement polished. L'instructeur montre comment styler les éléments principaux (conteneur, tâches, boutons) en utilisant des propriétés CSS courantes : backgrounds, padding, margins, font-weight et couleurs. Le résultat final présente une liste de tâches claire avec un fond blanc neutre et des éléments bien espacés et lisibles.

Points clés

Appliquer un background clair (#f9f9f9) au conteneur principal pour améliorer la lisibilité
Utiliser margin et padding pour créer une hiérarchie visuelle et de l'espace blanc stratégique
Styliser les tâches avec font-weight bold, font-size et couleurs (bleu électrique #38308f) pour les rendre distinctes
Centrer le texte et les éléments avec text-align center et display inline-block
Adapter les marges top (28-50px) pour créer de la séparation entre les sections
La personnalisation CSS est optionnelle : chacun peut adapter les couleurs et espacements à ses préférences

Questions fréquentes

Quelles sont les couleurs recommandées pour une to-do list Ionic ?

Dans cette leçon, l'instructeur utilise un fond blanc cassé (#f9f9f9) pour le conteneur principal et un blanc pur (#fff) pour les tâches individuelles. Les textes sont colores en bleu électrique (#38308f). Cependant, ces couleurs peuvent être adaptées selon vos préférences personnelles.

Pourquoi utiliser display inline-block sur les tâches ?

Le display inline-block permet de créer du volume et de la structure dans le formulaire en positionnant les éléments côte à côte tout en respectant les propriétés de bloc (padding, margin, hauteur). Cela améliore la présentation visuelle de la liste.

Comment optimiser l'espacement entre les éléments CSS ?

L'instructeur utilise margin-top (28-50px) pour créer de la séparation entre les sections et des paddings de 10-14px pour l'espacement interne. Ces valeurs peuvent être ajustées selon la densité d'interface souhaitée.