IONIC Section 4 - 4.6 Utilisation de components Ionic de base

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

Bonjour à tous, dans notre plan budgétaire, je veux créer une application qui ressemble à un application mobile et je veux fondamentalement avoir une en-tête, une barre d’outils en haut qui affiche le titre de l’application, quelque chose comme un plan budgétaire, puis je veux avoir le contenu en-dessous de la barre d’outils où je veux essentiellement un champ de saisie dans lequel je peux entrer des titres, des noms, une description de la dépense, puis la valeur, le montant de la dépense , un bouton sur lequel je peux appuyer, puis une liste ci-dessous de celle où j’exprime essentiellement toutes mes dépenses tout en bas avec une petite somme où je vois la somme total des dépenses. Donc, pour cela, si on observe la documentation, la catégorie « Content » avec « ion-app » et « ion-content ». « Ion-app » doit toujours envelopper votre application Ionic dans son intégralité, ce qui garantit essentiellement que certains styles et comportements généraux sont définis , de sorte que nous pouvons déjà le faire. Nous pouvons ajout er « ion-app » ici et nous l’utilisons une seule fois par fichier HTML, vous pouvez dire si vous utilisez Angular, qu’il s’exécute sur une seule et même page, un fichier HTML, vous ne l’utilisez que comme une enveloppe globale. Votre component racine, vous ne l’utilisez jamais nulle part ailleurs. Là, nous pouvons avoir notre « ion-content » voilà comme ceci et ceci est une enveloppe pour le contenu de notre application principale. Maintenant, pourquoi l’ajouter ? Et bien, parce que, par exemple, cela contrôle le défilement et garantit que notre contenu fonctionne généralement correctement et s'affiche correctement. Nous allons donc ajouter du contenu Ionic, mais je voulais aussi qu’il y ait un en-tête. Donc si on revient sur la doc, et qu’on fait défiler, vous devriez trouver zone « toolbar », et on va sélectionner le « ion-toolbar ». On peut apprendre ici qu’elle est placée dans un « ion-header », elle apparaitra en haut du contenu et c’est exactement ce que nous souhaitons. Donc, dans notre application Ionic au-dessus de "ion-content" je vais ajouter le "ion-header" voilà, et ensuite le "ion-toolbar". Maintenant, dans cette barre d’outils, nous souhaitons insérer un titre. Donc on se rend dans la rubrique « ion-title » dans « ion-toolbar ». C’est un component qui définit le titre de la barre d’outils. Nous voyons ici un exemple d’utilisation et nous allons reproduire cet exemple à l’instant. Donc à l’intérieur de "ion-toolbar", nous pouvons ajouter le "ion-title" et nommer ce plan budgétaire. Si je sauvegarde maintenant ceci et que j’ouvre le fichier html dans un navigateur, nous devrions obtenir ce résultat avec notre en-tête de notre plan budgétaire. Une fois que nous avons ajouté ces éléments, nous pouvons les configurer donc nous revenons à la barre d’outils, ici, donc je reviens exprès pour que vous appliquez bien cette méthodologie de travail et je souhaite aussi que vous compreniez. Donc on revient sur notre documentation de la toolbar, et nous pouvons apprendre comment ajouter des boutons, donc par exemple, un bouton nous permet d’ajouter un nouvel élément et nous voyons quelques informations générales. Des exemples d’utilisation, également avec un bouton précédent dont nous aurons besoin plus tard, pas maintenant et si nous faisons défiler l’écran plus bas, nous voyons les propriétés que nous pouvons définir et je m’intéresse à cette propriété de couleur que nous pouvons définir comme « primary », « secondary » etc… Donc on se rend sur notre toolbar en y ajoutant une couleur primaire, donc « color=primary»puis on enregistre. Maintenant, en cherchant notre application, on obtient ce résultat cette couleur d’arrière plan bleu, mais nous avons aussi la couleur du titre qui s’est ajusté en blanc qui est un component distinct. Donc ces components fonctionnent ensemble ici, c’est toujours bon à savoir. Voilà donc notre en-tête, et qu’en sera t’il du contenu ? Nous verrons ça dans les prochaines vidéos.