Découvrir Vue.js 2

Utiliser plusieurs classes simultanément

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les classes CSS (Cascading Style Sheets, feuilles de style en cascade) autorisent l'utilisation de plusieurs classes en même temps. Pour étendre cette possibilité, apprenez à découper les déclarations.
04:26

Transcription

Alors bien évidemment, vous avez tout à fait le droit d'utiliser sans aucun problème plusieurs styles différents ou plusieurs classes différentes ensemble, ça n'est pas un problème non plus. Regardez ici, on a tout à fait la possibilité de référencer du coup badColor avec comme avant, un badColorActivated ici avec un false au départ, et le faire évoluer en fonction de. Alors j'ai rajouté ici deux petites possibilités donc ma badColorActivated va être activée si la taille est inférieure à 20 pixels, et en dessous je viens de créer ici badColor avec un background, on pourrait recopier ce code couleur, alors j'ai choisi de chercher ça sur internet, vous avez des petits outils très intéressants qui vous permettent de partir d'une couleur et donc de trouver en fait les différentes références de couleurs donc là, vous avez les différentes couleurs. Alors ça serait je pense l'interface, encore mieux si on utilisait quelque chose de plus difficile, c'est par exemple une interface qui serait voilà entièrement noire et en plus de ça, et après on aurait une nuance de gris. Ça, ça marcherait encore mieux parce pour le coup ça serait extrêmement difficile de repérer et le but c'est vraiment ça sur la badColor c'est de ne pas pouvoir repérer le point. C'est ce qui va amener un peu de difficulté dans le jeu. Donc là si on améliore un peu comme ça, ça va tout simplement vous ajouter le background, si jamais ça tombe sur ce cas. Et vous voyez que là on va pouvoir créer plusieurs règles et donc faire évoluer l'interface, ajouter des règles métier et vous pouvez les mixer c'est à dire vous pouvez ajouter plusieurs règles à la suite sur le même élément, ça viendra activer la classe en fonction de ce que vous faîtes. On va recharger ici et effectivement, voilà, là on le trouve bien. Il y a pas de problème si la taille est supérieure il y a aucun souci, on va le cliquer plusieurs fois, alors là et bien voilà, on le trouve plus. Alors c'est peut-être un peu trop difficile pour le coup parce qu'on trouve vraiment plus du tout l'emplacement donc on va essayer de remonter un petit peu. Là, faites très attention quand vous développez parce que, il faut quand même qu'on puisse jouer parce que si vous pouvez pas jouer, ça risque d'être compliqué, alors faut quand même qu'on puisse jouer, voilà. Là vous le voyez pas mais il est là ici, juste ici. Là il y a une difficulté vraiment intéressante et ça permet à notre joueur d'être un petit peu perdu surtout que maintenant, on lui demande de cliquer normalement sur les blancs, avec Alt sur les rouges, et ensuite d'aller chercher quand c'est tout petit, là vous venez d'ajouter une règle métier qui est extrêmement sympa à utiliser et qui commence à donner un petit peu de piment à votre jeu, et ça c'est vraiment génial, et ça vous permet d'avoir un jeu qui devient intéressant. Alors vous voyez comment avec un petit peu de lignes de codes et avec un petit peu de gestion de classes vous pouvez vous amuser. Pensez aussi que vous avez la possibilité de référencer vous voyez plusieurs styles de cette façon là, c'est-à-dire qu'on peut utiliser la notation sous forme de tableaux pour rajouter plusieurs styles différents. Si vous avez composé vos styles de façon objet il y a aucun problème pour faire ça. Ça va marcher dans les deux cas pour le style et pour les classes évidemment donc on peut rajouter plusieurs classes aussi, sachant que les classes, généralement voilà vous allez pouvoir les référencer. Alors on peut ajouter des classes sous format objet puis des classes qu'on a composé au format objet préalablement. Il y a plein de possibilités, vous voyez que là, ce n'est pas compliqué à utiliser, les classes, c'est vraiment sympa. Pensez que vous pouvez aussi tout à fait en ajouter ici directement sur vos composants, je ne vous l'ai pas dit mais c'est vrai que sur les composants, ça marche aussi et vous pouvez ajouter comme ça aussi des classes sur vos composants et donc c'est le parent qui permettra de faire jouer les classes. C'est important de le savoir, c'est aussi une des possibilités que vous avez, c'est donc de travailler directement sur le composant et de venir lui ajouter de l'information. C'est exactement la même chose que l'on a fait sauf que, effectivement plutôt que de l'avoir au niveau ici de votre code pour le composant vous l'aurez par exemple plutôt sur cette partie là. C'est à dire que là, sur mon composant je peux venir rajouter de l'info, et au même titre que ce que j'ai fait pour les composants, là je peux venir travailler sur les différents styles, composer mes styles, ma data et donc du coup agir automatiquement sur mes différents composants. Donc il y a beaucoup de possibilités avec les styles, j'espère que vous allez customiser ça un maximum, vous voyez que là on commence à avoir un jeu qui est vraiment super sympa. L'idée maintenant ça serait de pouvoir pousser un petit peu plus et puis de pouvoir récupérer les scores et travailler vraiment sur toutes ces parties là, mais on va d'abord devoir enregistrer pas mal de choses, et voir quelques parties importantes de vuejs notamment la gestion des objets et des collections.

Découvrir Vue.js 2

Animez et rendez réactive la vue d’une application web avec le framework Vue.js. Mettez en place les interfaces web de demain​ ​et utilisez les librairies externes de votre choix.

2h25 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Vue.js Vue.js 2.1
Spécial abonnés
Date de parution :14 févr. 2017

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 !