IONIC Section 4 - 4.7 Plus de components de base

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

Bonjour à tous, nous poursuivons dans notre structure. Je rappelle ici notre code, sur notre vidéo précédente. Et maintenant on va revenir sur la documentation car il existe un onglet avec input donc le voici avec « ion-input » pour l’insertion, et si on regarde l’exemple d’usage nous avons celui ci avec « floating » en position, ce qui permettra de faire flotter lorsque vous cliquez. Donc on peut le copier et on va le coller afin de l’ajouter dans notre « ion-content » et ce label on va lui mettre comme indication « raisons de dépenses » et dans notre « ion-input » nous allons définir un attribut de type texte, afin de pouvoir écrire du texte à l’intérieur. Et si je regarde le changement apporté en rechargeant notre application, nous pouvons voir notre input affiché où je peux entré un motif de dépense. C’est bien, maintenant on peut également ajouter une autre entrée en dessous de celle-ci où je dirai le montant de la dépense. Donc on copie et on colle et on indique le montant de la dépense et on modifie le type en « Number », car les utilisateurs ne doivent pouvoir entrer que des chiffres. Donc on sauvegarde et on retourne sur notre application rechargée et nous voyons cette deuxième entrée en dessous de la première. C’est très bien, maintenant si on veut enveloppé tout cela disons dans une sorte de box au lieu d’être disposé sur toute la largeur de l’écran, on peut s’apercevoir en inspectant l’élément et en simulant la vision sur les autres appareil, donc moi je suis sur Mac, donc se sera sur la gamme du même constructeur, mais si vous vérifiez vous pouvez voir que ce soit sur tous les autres appareils, on obtient cette même largeur d’affichage à l’écran. Ce n’est pas un problème, nous pouvons le mettre dans une soit disant « card » et nous allons directement inséré cette « ion-card » entre nos contenu, n'oubliez pas d’ajouter le « ion-card-content » qui va gérer le « content » donc le contenu de notre application Ionic afin qu’ils soient bien enveloppés ensemble. Une fois que c’est fait je vais aussi ajouter un élément juste au dessus qui se nomme « ion-card-header » qui va gérer le content, avec à l’intérieur un « ion-card-title » et ajouter les « Nouvelles Dépenses ». Maintenant si on enregistre notre application et que nous checkons, on obtient ce résultat. Cette vidéo touche à sa fin, nous nous retrouverons pour la prochaine vidéo.