IONIC Section 4 - 4.11 Utilisation attributs CSS

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

Bonjour à tous, pour contrôler des paramètres généraux, comme une marge autour des éléments ou un rembourrage se trouvant à l’intérieur des éléments, voir le positionnement à l’intérieur d’un conteneur d’une boîte, nous pouvons utiliser des propriétés Ionic. Pour se faire, on peut se rendre dans la documentation via l’onglet « Guide »le voici, dans la partie « Layout» et vous aller dans CSS Utilities et donc dans ce tableau, vous trouverez beaucoup d’exemples qui sont tous prêt à l’emploi fournit par Ionic. Mais j’aimerais vous expliquer quelque chose concernant la disposition des class CSS. Les noms des class, comme vous pouvez le voir dans cet exemple, seront les mêmes avec un ajout important que vous ajoutez après avoir mis un tiret, concernant la situation permettant de préciser le niveau de conception. Par exemple on a ici la class « ion-text-start », comportant le titre du début, et une autre class « ion-text-end » comportant le titre de fin. Et donc si je reviens sur le tableau ci-dessous, nous avons le nom des class indiquant les règles de fonctionnalité ainsi que sa description. Donc Par exemple, si je saisie « .ion-text-left », j’aurais l’attribut qui sera « text-align : left » et en description le contenu de la div que comporte cette class qui alignera le texte vers la gauche. Vous pouvez toujours revenir à cette documentation et rechercher les détails ci pour en savoir plus sur toutes les class disponibles et leur fonctionnalités. Cela nous permet donc d’incorporer les div, donc les div, c’est la contraction de division pour la division de contenu, en gros c’est un conteneur générique de flux. Il n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme d'une manière quelconque à l'aide de CSS. Pour rappel, vous n’êtes pas limité concernant l’utilisation d'éléments HTML, au contraire, c’est un fichier HTML, donc pas de soucis la dessus. Donc j’incorpore ma « div » entre mes boutons, donc juste ici, où je vais mettre « class=« ion-margin-vertical », pour ajouter une marge dans toutes les directions et on veut positionner les boutons à droite avec « ion-text-right ». Donc maintenant, on va checker notre résultat, et on peut voir que, sans écrire une ligne de CSS, on obtient un style assez agréable à mon point de vue.Cette vidéo touche à sa fin, je vous donne rendez-vous pour la prochaine.