Tutoriel n°5 : Stylez votre projet à partir d'un design Figma 

Étape 7 : Styliser les éléments de la page #2

Répétons l'opération avec le Titre (h1) : Dans le projet Figma, cliquez sur le "Glad to see you again !" et copiez le CSS qui apparaît à droite  (sauf la Font-family qui sera mise en place après).

Revenez dans le Studio, cherchez le composant "Style" dans la palette et glissez-déposez-le directement dans le champ h1 dans l'App Viewer.
Ouvrez le composant style dans le champ H1 dans l'arborescence, double-cliquez pour l'ouvrir et collez votre CSS. (N'oubliez pas le "--" avant au début de chaque ligne).

Répétez l'opération pour le sous-titre (paragraphe) : Cliquez-le sur Figma, copiez le CSS (sauf la font-family), Glissez-déposez un composant de style dans le paragraphe, ouvrez-le et collez votre CSS. (N'oubliez pas le "--" au début de chaque ligne).

Cherchez ensuite dans la palette le composant "FormatLayout" et glissez-déposez-le dans la "Grid" principale de l'arborescence. Ce FormatLayout va centrer les éléments de la page.
Cliquez sur le FormatLayout et, dans ses propriétés, cherchez "Alignment" et réglez-le sur "ion-text-center".

Succès !

Vous avez terminé cette étape avec succès, veuillez cliquer sur le bouton Étape suivante pour passer à l'étape suivante du tutoriel.
Fermer
Vous n'avez pas effectué toutes les actions requises dans cette étape, êtes-vous sûr de vouloir passer à l'étape suivante ?