Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Créer une application mobile avec Ionic 2 et Angular 2

Utiliser les fichiers de style

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans chaque module, vous trouverez un fichier de style. Utilisez-le pour appliquer des styles à ce module uniquement.
04:11

Transcription

Maintenant on va parler de css. Est-ce qu'on parle vraiment de css avec Ionic 2? Non. On parle de Sass. C'est la même chose à proprement parler. Du Sass et du css c'est quasiment identique. Pour chacune de vos pages, vous aurez un fichier scss. Je dis vous aurez - il faudra le créer bien sûr. Il sera automatiquement relié si vous lui donnez le même nom que votre .ts. Doc, votre «.TypeScript», vous allez créer un scss avec le même nommage et il sera utilisé automatiquement. Ca, c'est fait de façon automatique. Maintenant, si vous regardez bien le scss qu'on a là, pour home, on remarque que il y a «page-home». Qu'est-ce que ça veut dire? Quand vous définissez un sélecteur ici, on va le voir plus tard, on le fera, vous allez défininr le sélecteur qui va englober votre composant. et, quand vous allez écrire votre css, vous allez démarrer par ce sélecteur. Pourquoi on fait ça? Pour qu'il n y ait pas de collision particulière entre les styles. Ce que vous allez définir comme style à l'intérieur de ce composant avec page-home n'ira jamais dans d'autres composants et ne pourra pas écraser les styles des autres. Vous allez me dire, mais si je veux faire du générique sur toutes mes pages? Pas de problème - mais, ce ne sera pas ici que vous le ferez. Il y a, pour ça, un dossier qui s'appelle le dossier thème, dans lequel on aura, ici, des fichiers, par ex, variable.css, on pourra s'en créer un, aussi, à nous, qu'on pourra importer directement ici dans le variables.scss, et qui nous permettra de faire votre style de façon globale. Le variables.scss est bien aussi parce qu'il va définir tout un tas d'informations très utiles, notamment les couleurs de base, donc la couleur primaire, secondaire, de danger, etc etc, Ca c'est pour les différents composants, on en parlera plus tard. Donc vous le gardez en tête, on n'est pas en train de faire du css on est en train de faire du Sass, si vous ne connaissez pas Sass je vous conseille d'aller faire un petit tour sur la documentation extrêmement bien faite. Concrètement Sass vous permet définir des styles imbriqués avec de la syntaxe un petit peu plus aboutie, notament des variables, etc. Il y a énormément de resources sur le site officiel de Sass qui vous permettra d'aller un petit peu plus loin. Ce qui est génial c'est qu'au final, on obtiendra un fichier css pur, et il sera automatiquement géré puisque Sass s'occupera de nettoyer votre code de refaire les css proprement ... Là vous remarquerez par ex qu'on a une balise nav et à l'intérieur on a une ul, une li , un a ... tous ça sont stylés à l'intérieur de nav donc en fait on est en train de faire de la vraie cascade ce qu'on peut pas réellement faire quand on est en train de travailler avec css pur ce qui est dommage, c'est pour ça que Sass existe. Alors ya énormément de possiblités, Là vous voyez que le rendu final quand on a fait ça, on a défini nav et puis des éléments dedans, les css qui sera sorti sera automatiquement nav ul, nav li, nav a. Donc ça, c'est fait de façon automatique, il y a énormément de possibilités les imports, y a des possibilités de définir les mixin ... pour les mixin par exemple ici, on pourra même n'en définir qu'un seul et ils seront automatiquement rajoutés à la fin, on peut faire de l'extension, donc on peut étendre des classes particulières qu'on a définies et venir redéfinir des informations à l'intérieur C'est un langage extrêmement puissant qui en plus est très intéressant à utiliser et nous permet de faire beaucoup de choses. Il y a même possiibilité de faire des maths à l'intérieur d'un fichier css ce qui est pas du tout possible avec css de base. Vous ferez donc du scss quand vous serez en train de travailler sur vos pages, et quand vous travaillerez sur votre thème. De base, les 2 fichiers que vous aurez pour le moment c'est variables.scss, et home.scss, qui ne contient pour le moment aucune information. Bien sûr, on reviendra modifier ça. Essayez de faire la même chose que ça quand vous créerez vos propres pages, gardez un fichier de styles par page, c'est beaucoup plus intéressant ça vous permet de scoper les styles à votre composant et de pas avoir d'écrasement, parce que les écrasements c'est extrêmement compliqué à gérer. Et gardez aussi en tête que tout ça est entièrement automatique. On va parler compilation: Après, comment est-ce que ça sort à la fin une fois qu'on a rempli ici? vous verrez que, pareil, c'est très simple, il y a pas besoin de beaucoup de connaissances pour commencer à travailler avec tout ça.

Créer une application mobile avec Ionic 2 et Angular 2

Développez vos applications mobiles avec AngularJS et Ionic. Mettez en place un projet et exploitez les nombreuses possibilités offertes par l’écosystème Ionic.

2h25 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !