Ultimate Next. js 14 Portfolio Website 2024 ( de zéro à héros )

1. Vidéo de publicité réelle: Jetez un coup d'œil à ce magnifique site Web. Tout est codé avec Next s. Il a été méticuleusement et professionnellement conçu pour fonctionner sur d'autres appareils Alors, ne serait-ce pas génial si vous saviez exactement comment concevoir et coder ce site Web à partir de zéro ? C'est exactement là que j'interviens. Bonjour, bienvenue et merci beaucoup de l' intérêt que vous portez à mon cours. Dans ce cours, je vais vous apprendre à créer le site Web ultime du portfolio Next GS, en utilisant différentes technologies, telles que next es react Jes, Tear wind et node mailer Donc, si vous êtes un débutant, ne vous inquiétez pas. Nous allons partir de zéro en explorant tous les concepts intégrés au cœur du prochain châssis GS. Nous allons donc aborder des sujets tels que le routeur, qui inclut la route suivante, la route dynamique, la route dynamique suivante , et la capture de tous les segments Et aussi, des sujets tels que la récupération de données, l'itinéraire privé, colocation de fichiers, le chargement, la mise en page, etc. Nous ne nous sommes pas équipés de tous les concepts. Nous pouvons ensuite procéder à la création du site Web ultime du portefeuille Next S. Au cours de ce cours, je vous apprendrai à structurer le site Web, à utiliser des composants de conception et des modèles de mise en page courants, et pour terminer, nous allons suivre les meilleures pratiques du secteur pour concevoir notre site Web. Nous allons donc faire en sorte que notre site Web soit réactif sur les appareils mobiles, puis l' optimiser pour de meilleures performances. Enfin, nous déploierons le site Web sur un serveur à vie, ce qui implique simplement. Le site Web de votre portfolio sera accessible sur Internet. Vous pouvez donc l'utiliser pour présenter vos offres d'emploi à vos clients ou à vos employeurs. Donc, si vous recherchez un cours complet, facile à suivre, bien organisé et facile à suivre, bien organisé et pratique qui vous mènera de zéro à ici. C'est le prochain cours en ligne qui vous convient le mieux. Ça a l'air bien, non ? Joignez-vous à moi et commençons. 2. Intro 001 de Nextjs: Next S est un framework React pour la production. Et maintenant, la question est quelle est exactement la différence entre le S suivant et le G réactif ? React S est simplement une bibliothèque JavaScript permettant de créer des interfaces utilisateur. Et je veux que vous considériez une bibliothèque comme un package créé pour résoudre un problème spécifique. React étant une bibliothèque, elle se concentre sur la création d'interfaces utilisateur interactives. C'est exactement la seule chose que fait React es en tant que bibliothèque. Vous ne pouvez donc pas utiliser React Gs pour effectuer le routage et Httpic. Alors qu'un framework est une solution complète. Ainsi, le gaz suivant en tant que structure peut être utilisé pour provoquer un effet, et également pour effectuer le routage, ce qui implique simplement que vous pouvez utiliser le gaz suivant pour créer une application Starck complète. C'est bien d'enseigner. Magnifique. Je n'ai pas compris la différence entre next as et react es. Dans la prochaine conférence, nous procéderons à la création d'une nouvelle application S. 3. 02 Installations de nœuds: Dans cette section du cours, nous allons effectuer les installations nécessaires pour démarrer. Il est en effet indispensable que le nœud S fonctionne sur votre machine avant d'installer le gaz suivant. Cependant, j'encourage chacun d'entre vous à télécharger et à installer la dernière version stable. Celui-ci se trouve à l' extrémité gauche de l'écran. Donc, s'il vous plaît, n' installez pas ce type à droite de l'écran, simplement parce qu'il comporte des complexités supplémentaires que vous ne pourrez peut-être pas expliquer Téléchargeons et installons rapidement la dernière version stable. Le voici. Il est en cours de téléchargement. Téléchargement réussi. Ouvrons-le dans le dossier de téléchargement. Cliquez pour installer. C'est bon. Donc, avant de continuer, nous devons également quitter ce répertoire ici. Et maintenant, il ne nous reste plus qu' à applaudir. Continuons. Vous pouvez donc passer en revue toutes les étapes si vous avez le temps. Mais pour moi, je dois juste continuer. D'accord. C'est sur le bouton d'installation. Si vous êtes Mc, il va certainement vous demander votre mot de passe. Mais si vous travaillez sous Windows, il s'agira d'une installation express, vous n'avez donc pas besoin de mot de passe. instant, je vais saisir mon mot de passe. Installez le logiciel. L'installation est en cours. Installé, réussi. Fermons-le. Voulez-vous conserver les nœuds après l' installation ou les mettre à la corbeille Mettons-le dans la corbeille. le moment, nous allons faire apparaître le set b en appuyant sur la commande et la barre d'espace. Il vous suffit de choisir « s » pour le terminal. Ce que nous allons faire, c'est vérifier la version que nous avons installée. Je vais faire Node Space, V. Voyons si je peux le zoomer un peu. C'est bon. Je peux zoomer, sur la touche Entrée, et maintenant cette version du nœud est installée. Magnifique. Nous avons maintenant terminé l'installation. Dans la prochaine conférence, nous allons procéder à l'installation du code VS. C'est éteint maintenant. Rendez-vous lors de la prochaine conférence. 4. 3 installations vsc: Bonjour. Bon retour en classe. Dans la conférence précédente, nous avons installé le nœud GS. Dans cette conférence, nous allons maintenant procéder à l' installation de l'éditeur de code. N'hésitez pas à utiliser l' éditeur de code de votre choix. Mais pour moi, le code VS est toujours mon préféré. Je vous encourage à télécharger le code VS. Tout simplement parce qu'au fil du temps, je partagerai avec vous quelques trucs et astuces qui accéléreront le processus de développement. Et bien sûr, je veux que chacun d'entre vous me suive. Ça a l'air bien, non ? Magnifique. Rendez-vous rapidement sur code vistudio.com, et ce composant s' ouvrira juste devant Maintenant, chantons. À l'extrémité gauche de l'écran, nous avons le code VS pour Windows, et en plein centre, nous l' avons pour Obuntu et d'autres choses Enfin, à l' extrémité droite de l'écran, nous l'avons pour Marc. Ici, je suis sur Mac, donc je vais certainement le télécharger pour Mac. Mais si vous travaillez sous Windows, vous devez également télécharger celui-ci ici. Celui-ci. Tu dois télécharger celui-ci. Mais pour le moment, je veux télécharger celui-ci ici pour Marc. Donc, si vous utilisez un Mac en même temps, vous pouvez rapidement télécharger le ciel. Cliquez pour télécharger. Nous allons vérifier le processus de téléchargement. Pouvez-vous voir que Visual Studio Code est déjà en cours de téléchargement ? Le téléchargement prendra certainement un certain temps. Je dois donc faire avancer la conférence rapidement. Téléchargement réussi. Ouvrons-le avec le fichier Let's quickly on Zip. Boum. Le voici. Mais je l'ai déjà sur ma machine, et c'est pourquoi vous pouvez voir le doublon ici. C'est celui que j' utilisais précédemment, et c'est le nouveau que je viens de télécharger. Vous pouvez cliquer pour ouvrir. Et voilà. H. C'est désactivé pour le moment, et dans la prochaine conférence, nous allons procéder à l'installation de certaines des extensions nécessaires. Ces extensions sont extrêmement importantes car nous les utiliserons à l'avenir. Donc, s'il vous plaît, ne sautez pas la prochaine conférence. 5. 4 extensions vsc: Dans cette conférence, nous allons donc procéder à l' installation des extensions qui seront utilisées pour faciliter les choses à l'avenir. Nous devons donc d'abord quitter la page des notes de publication. C'est bon. Dans le coin central gauche de l'écran, vous verrez l'extension. Voilà. Et je survole, vous voyez les extensions à droite Cliquez pour ouvrir. Dans la boîte de sauvegarde, nous allons rechercher E seven react pour Snipe Je vais donc faire E seven plus React slash red Dox slash React Et voilà. Cliquez pour ouvrir. Je l'ai déjà installé sur mon code VS, et c'est la raison pour laquelle vous pouvez voir le bout désinstallé. De votre côté, le montage en bout sera activé. vous suffit donc de cliquer sur le bouton installé. Et puis vous aurez installé ce puissant extrait. Cet extrait est extrêmement puissant car nous l' utiliserons pour générer du code de composant fonctionnel de réaction sans avoir à le taper à partir de zéro Revenons maintenant à ladite boîte. Nous devons maintenant installer le script Java et taper le script tous les soirs. Javascript et dactylographié tous les soirs. Faisons un petit zoom arrière. J'espère que tu peux y voir clairement. Pouvez-vous le voir sur le panneau d' installation ? L'installation est en cours. Installation réussie. Nous devons donc le fermer. Une autre extension puissante est le tail wind intellisense. Cette intelligence aidera donc à afficher l' équivalent CSS de la classe utilitaire Tail Wind lorsque vous passez dessus Ne vous inquiétez pas, tout cela peut sembler difficile, mais à l'avenir, vous comprendrez certainement l'essentiel Alors installons. Pour gagner en intelligence. Et voilà. Il semble donc que je l'ai déjà installé. Encore une fois, de votre côté, si vous ne l'avez pas installé, vous allez voir le botin d'installation Tout ce que vous avez à faire est de détruire le support d'installation, et tout ira bien pour vous Encore une fois, si c'est la première fois que vous travaillez avec T wind Css, je veux que vous vous remontiez le moral, car je vais vous expliquer soigneusement chaque classe utilitaire de T wind Ça a l'air bien, non ? Magnifique. 6. 5 Installation de Nextjs: Bon retour en classe. Dans cette conférence, nous allons créer notre première application suivante en tant qu'application. Retournez au bureau. Juste à l'intérieur, cliquez avec le bouton droit sur un nouveau dossier. Je vais appeler ce dossier. Ensuite, entraînez-vous. Notez que lorsque vous nommez votre projet, utilisez toujours un nom descriptif qui décrit l'intention du projet afin de pouvoir vous y identifier facilement à l'avenir. Je n'ai pas créé le dossier. Ouvrez rapidement votre code VS. La ligne de fin suivante consiste à glisser-déposer le dossier vers le bas dans le code Vas. Maximisons rapidement. OK, nous devons lui donner une certaine autorisation ici, puis quittons le travail sur la page. Contra bactic pour ouvrir le terminal intégré au code VS. Et voilà. Et d'ailleurs, le joystick est situé dans le coin supérieur gauche du clavier juste en dessous de la touche d'échappement. Et si vous ne pouvez pas le faire avec le raccourci, il vous suffit d'aller dans menu du haut puis dans le terminal, le nouveau terminal. Et puis cette fenêtre ci-dessous s'ouvrira. Maintenant, pour créer une nouvelle application Jz suivante, suivons la commande Et voilà. P X, créez l'application suivante, puis vous allez faire au plus tard. Pour copier la commande, il faut cliquer sur cette icône de copie. Retournez au code VS , puis commandez V pour coller. Ce que je vais faire maintenant, c'est l'espacer puis le faire. Cela aidera à installer le prochain Js directement dans le prochain dossier d'entraînement JS. Appuyez sur la touche Entrée pour l'activer. Encore une fois, appuyez sur la touche Entrée pour continuer. Souhaitez-vous utiliser un script de type ? Bien sûr, oui. Voulez-vous utiliser Yes Lint ? Bien sûr, oui. Vous pouvez passer du mode « oui » au « non à l'aide de la flèche gauche ou droite. Vous souhaitez utiliser des jumeaux ? Oui. Vous souhaitez utiliser SRC ? Oui, A. Oui. Presque tout va être « oui ». Vous souhaitez utiliser l'import ? Nous voulons que tout soit complet. Je vais choisir l'option « oui ». Enfin, appuyez sur la touche Entrée. Installé, réussi. Lancez rapidement notre projet sur le web. Ce que je vais faire maintenant, c'est le Premier ministre Ron Dev. C'est simple. Et puis sur la touche Entrée. Le projet sera exécuté sur le port Localhost 3 000, et pour ouvrir le projet, vous suffit d'appuyer sur la touche de commande ou de contrôle de votre clavier, puis de cliquer sur le lien pour l'ouvrir Et à l'écran se trouve notre première prochaine application GS. 7. 6 Nextjs BoillerPlate: C'est bon. Bon retour en classe. Lors de la conférence précédente. Nous avons appris à créer et exécuter une application Next GS de base. Nous allons maintenant examiner en profondeur les fichiers du projet et structure des dossiers pour comprendre comment tout fonctionne lorsque nous exécutons notre application. Passons au fichier JS du package. Contrar baci pour fermer le terminal. Commande B ou contrôle B pour ouvrir l'explorateur de code VS. Dans l'explorateur, vous allez trouver le fichier package point JN, et le voici. Magnifique. Dans le script, nous avons le Dave pour exécuter notre application en mode développement. Vient ensuite le build, qui est utilisé pour créer l'application et préparer pour le déploiement en production. Le script de démarrage est utilisé pour démarrer le serveur de production de l'application. Le lint est utilisé pour configurer prochaine configuration GS intégrée à S lint. Et pour les dépendances, nous avons React React Dome et Next GS. Nous avons donc installé la version 18 de React, puis nous avons la version suivante 14.0 0.1 Donc, au moment de l'enregistrement, il s'agit de la dernière version. Ci-dessous, nous avons les dépendances de développement. Bien sûr, nous avons le script de type et les types, et ici nous avons le post CSS, le tailwind, les liens ES, etc. Fermons-le donc rapidement. Encore une fois, dans l'explorateur, nous avons le fichier package lock point JN. Ce fichier garantit une installation cohérente de nos dépendances. Juste au-dessus, nous avons indiqué qu'il est ignoré, ce qui est utile pour le contrôle de version. Et ci-dessous, nous avons le fichier yd point MD. Le yd me point MD est une documentation qui contient des instructions relatives à l'exécution, création et au déploiement de l'application. Et nous avons les prochains env dts. Il consiste en une déclaration dactylographiée pour les prochaines gs. Et de quel dossier devons-nous encore discuter ? Parlons des figures de next.com. Et voilà. Nous avons les prochaines figues. Nous avons également les configurations ts ci-dessous. Nous avons également la figure CSS post pour les configurations t wind. En haut de page, nous avons le répertoire public, et le voici. Le dossier public contient tous les actifs statiques à enregistrer, y compris les images et les fichiers SVG. Lorsque nous créons une application de récompense, tous les fichiers SVG que nous allons utiliser seront importés dans ce répertoire public. Ferme-le. La ligne suivante est le SRC, qui est le package source Lorsque vous cliquez pour ouvrir, vous verrez l'application, et dans l'application, nous avons l'icône Cinq, et la voici. Laissez-moi vous montrer à l'écran, et voici les cinq icônes, enregistrées sous forme de logo. Fermons-le. Voici le CSS global , très utile lorsque vous souhaitez styliser plusieurs sections de l'application Vous trouverez ci-dessous le point de mise en page TSS. Le point de mise en page TSS est le conteneur parent de l' ensemble de l'application GS suivante Enfin, nous avons la page .tss. Le point de page TSS entrera dans la mise en page racine en tant qu' enfant. Laisse-moi te montrer. Donc, tout ce que vous avez ici sera intégré à la mise en page lorsque vous serez enfant. Tu peux voir ? Et voilà. Quand il arrive ici, ce qui apparaît dans le tag sera affiché à l'écran, comme ceci. Donc, tout ce qui se trouve sur la page fonctionne en TSS. Pouvez-vous voir que nous avons la balise P qui dit de commencer par l'édition. Lorsque vous revenez dans le navigateur, vous allez voir Commencer par l'édition. Cela est rendu possible simplement parce que la page do TS est transmise dans la mise en page parent en tant qu'enfant. C'est aussi simple que ça. Nous avons maintenant pu comprendre le flux de contrôle d'une prochaine application GS. La prochaine étape consiste à nettoyer le code. Faisons-le lors de la prochaine conférence. 8. 7 Nettoyage de code: Dans cette conférence, nous allons procéder en nettoyant le code. Accédez à la page Ts. À l'intérieur, nous allons mettre en évidence les lignes 5 à 111. Nous voulons donc tout nettoyer afin de repartir à zéro Essuyez-le. P. L'application se plaint simplement parce qu' elle va renvoyer l'interface utilisateur. Nous allons avoir un D ici. Enregistrez le projet. Lorsque vous vérifiez le rechargement du navigateur, vous verrez un écran vide Retournez au code VS. Nous devons maintenant ouvrir le CSS global. Il se trouve dans la source, l'application, puis dans le CSS global. Lorsque vous cliquez pour ouvrir, vous verrez le CSS que nous avons généré lors de la création de l'application MPX Ce que je vais faire maintenant, c'est souligner à partir des lignes 5. Oups. Jetez-y un coup d'œil. C'est bon. Surlignez, puis descendez jusqu'aux lignes 27. Essuyez-le. Lorsque vous sauvegardez, consultez le navigateur et démontez. Tu peux voir ? Nous avons maintenant réussi à supprimer tout ce que nous ne voulions pas. Il faut repartir de zéro. Nous allons donc créer l' application à partir de zéro. Et c'est une très bonne chose pour toi. Je sais que vous vous demandez peut-être pourquoi nous n'avons pas supprimé cette configuration dw ici C'est simplement parce que si vous voulez Me of tail wind, cette configuration doit être incluse. Vous devez donc le laisser exactement tel quel. Lorsque vous enregistrez, et encore une fois, nous avons un écran vide. C'est désactivé pour le moment, et dans la prochaine conférence, nous parlerons du système de routage de la prochaine GS 14. 9. Routeur d'applications (système de routes dans Nextjs 14): Dans cette conférence, nous aborderons le système de routage dans la prochaine GS 14. Parlons donc du routeur d'applications. Ensuite, implémentez techniques de routage basées sur un système de fichiers, dans lesquelles le composant Web UR situé dans l'onglet du navigateur est contrôlé par les dossiers de fichiers de votre base de code. Cela semble tout à fait juste. Ne vous inquiétez pas, lorsque nous commencerons à le mettre en pratique, vous le comprendrez certainement assez bien Prenez note de ce point essentiel. Dans la prochaine GS 14, lorsqu'un dossier est créé dans le répertoire de l'application. Ce dossier devient automatiquement une route lorsqu'un page.ts ou un point de page S y est créé Conformément à la prochaine convention de routage e 14, pour implémenter un itinéraire, vous devez absolument créer un dossier dans le répertoire de l'application. Supposons que nous construisions un site Web de récompenses, où nous avons besoin d'une page de contact et d'une page de profil. Commun B pour ouvrir l'explorateur. Gagnez le répertoire de l'application, cliquez avec le bouton droit de la souris, puis sur un nouveau dossier. Nous allons l'appeler contacts, comme ça. Un autre, dans l'application, cliquez avec le bouton droit de la souris, nouveau dossier. Ce sera un co-profil. Cela fait, vérifions-le sur le navigateur pour voir s'il est routable Retournez dans le navigateur, et ici je vais faire Localhost Pot 3,000 slash Contact Lorsque vous cliquez sur le entaky, il indique qu'il renvoie une 44e page trouvée. Tu sais pourquoi ? C'est simplement parce que nous devons créer une page TSS ou gs dans le dossier de contacts C'est exactement à ce moment que ce dossier deviendra une route. Cliquez sur Nouveau fichier. Et nous allons faire la page TSS. Dans RFC pour générer le composant fonctionnel React. Page de contact. Vous pouvez utiliser un tag H one si vous le souhaitez. Jette un coup d'œil. Maintenant, lorsque vous quittez le navigateur, vous verrez la page de contact. Routons la page de profil. Je vais faire Localhost plutôt que profile. Lorsque vous appuyez sur la touche Entrée, une page 404 Ernaut a été trouvée Je suppose que maintenant, tu devrais savoir exactement quoi faire de ton côté. Publiez la vidéo et implémentez l'itinéraire du profil. Laisse-moi t'y aider. W dans le répertoire du profil , cliquez avec le bouton droit de la souris sur un nouveau fichier, et nous allons l' appeler page point TSX Tout simplement parce que nous utilisons un script de type. C'est pourquoi nous optons pour l'extension point TSS. Appuyez à nouveau sur la touche Entrée RFC pour générer le composant fonctionnel React Ici, je vais créer une page de profil. Implémentons-le dans la balise H one. Coupez-le, placez-le dedans et désossez-le. C'est bon. Enregistrez sur le navigateur, vous voyez ? Maintenant, la page est visible. Vous pouvez donner un nom de classe à la balise Hadron, puis nous allons créer le texte neuf Excel Cette classe utilitaire Tail Wind signifie simplement que nous augmentons la taille de la police jusqu'à sa taille RM. Lorsque vous voyez et découvrez le boom des navigateurs. Vous voyez, ça devient très audacieux comme ça. Maintenant, voici exactement comment implémenter le routage dans Next S. Nous pouvons également accéder à la page de contact, comme ça et boum. Tu peux voir ? Prenez note de ces points essentiels. Les itinéraires sont associés aux fichiers en fonction du nom des dossiers qui les contiennent dans le répertoire de l'application. Un point de page Ts dans le dossier de contacts sera mappé vers le contact, et un point de page TSS dans le dossier de profil sera mappé vers le profil oblique et un point de page TSS dans le dossier de profil sera mappé vers C'est pourquoi lorsque vous venez ici et que vous coupez le contact, vous obtenez la page de contact En fait, nous pouvons lui donner une couleur de fond, afin que vous compreniez de quoi nous parlons. Donnons ici le nom de la classe SVA. Ensuite, dans le nom de la classe, nous allons utiliser la classe utilitaire PG yellow 500. Lorsque vous enregistrez et quittez le navigateur, voici la page de contact. En résumé, chaque dossier du répertoire de l'application correspond à un segment d'URL, lorsqu'une page avec une extension point TS ou point GS est créée dans teaching Good. Magnifique. 10. Itinéraire en ligne: Dans cette conférence, nous aborderons le système de routage dans la prochaine GS 14. Parlons donc du routeur d'applications. Next GS implémente des techniques de routage basées sur un système de fichiers, dans lesquelles le composant Web UR situé dans l'onglet du navigateur est contrôlé par les dossiers de fichiers de votre base de code. Ça a l'air difficile, non ? Ne vous inquiétez pas, lorsque nous commencerons à le mettre en pratique, vous le comprendrez certainement assez bien Prenez note de ce point essentiel. Dans la prochaine GS 14, lorsqu'un dossier est créé dans le répertoire de l'application. Ce dossier devient automatiquement une route lorsqu'un page.ts ou un point de page S y est créé Conformément à la prochaine convention de routage e 14, pour implémenter un itinéraire, vous devez absolument créer un dossier dans le répertoire de l'application. Supposons que nous construisions un site Web de récompenses, où nous avons besoin d'une page de contact et d'une page de profil. Commun B pour ouvrir l'explorateur. Gagnez le répertoire de l'application, cliquez avec le bouton droit de la souris, puis sur un nouveau dossier. Nous allons appeler ça des contacts, comme ça. Un autre, dans l'application, cliquez avec le bouton droit de la souris, nouveau dossier. C'est ce que l'on appellera profil. Cela fait, vérifions-le sur le navigateur pour voir s'il est routable Retournez dans le navigateur, et ici je vais faire Localhost Pot 3,000 slash Contact Lorsque vous cliquez sur le entaky, il indique qu'il renvoie une page contenant 44 racines trouvées . Tu sais pourquoi ? C'est simplement parce que nous devons créer une page do TSS ou do gs dans le dossier de contacts C'est exactement à ce moment que ce dossier deviendra une route. Cliquez sur Nouveau fichier. Et nous allons faire du TSS par point de page. Dans RFC pour générer le composant fonctionnel React. Page de contact. Vous pouvez utiliser un tag H one si vous le souhaitez. Jetez-y un coup d'œil. Maintenant, lorsque vous quittez le navigateur, vous verrez la page de contact. Acheminons la page de profil. Je vais faire Lost than profile. Lorsque vous appuyez sur l'ak, cela renvoie une page 404 Ernaut trouvée Je suppose que maintenant, tu devrais savoir exactement quoi faire de ton côté. Publiez la vidéo et implémentez l'itinéraire du profil. Laisse-moi t'y aider. W dans le répertoire du profil , cliquez avec le bouton droit de la souris sur un nouveau fichier, et nous allons l' appeler page point TSX Tout simplement parce que nous utilisons un script de type. C'est pourquoi nous optons pour l'extension point TSS. Il appuie sur la touche Entrée, encore une fois, RFC pour générer le composant fonctionnel de réaction Ici, je vais créer une page de profil. Implémentons-le dans la balise H one. Coupez-le, placez-le dedans et désossez-le. C'est bon. Enregistrez sur le navigateur, vous voyez ? Maintenant, la page est visible. Vous pouvez donner un nom de classe à la balise Hadron, puis nous allons créer le texte neuf Excel Cette classe utilitaire Tail Wind signifie simplement que nous augmentons la taille de la police jusqu'à sa taille RM. Lorsque vous voyez et découvrez le boom des navigateurs. Vous voyez, ça devient très audacieux comme ça. Maintenant, voici exactement comment implémenter le routage dans Next S. Nous pouvons également accéder à la page de contact, comme ça et boum. Tu peux voir ? Prenez note de ces points essentiels. Les itinéraires sont associés aux fichiers en fonction du nom des dossiers qui les contiennent dans le répertoire de l'application. Un point de page TS dans le dossier de contacts sera mappé vers le contact, et un point de page TSS dans le dossier de profil sera mappé vers le profil oblique et un point de page TSS dans le dossier de profil sera mappé vers C'est pourquoi lorsque vous venez ici et que vous coupez le contact, vous obtenez la page de contact En fait, nous pouvons lui donner une couleur de fond, afin que vous compreniez de quoi nous parlons. Donnons ici le nom de la classe SV. Ensuite, dans le nom de la classe, nous allons utiliser la classe utilitaire PG yellow, 500. Lorsque vous enregistrez et quittez le navigateur, voici la page de contact. En résumé, chaque dossier du répertoire de l'application correspond à un segment d'URL, lorsqu'une page avec une extension point TS ou point GS est créée dans teaching Good. Magnifique. 11. Itinéraire dynamique: Dans la conférence précédente, nous avons discuté de l'itinéraire imbriqué Nous avons donc créé davantage les utilisateurs. Et parmi les utilisateurs suivants, nous avons ajouté le premier utilisateur et le deuxième utilisateur Et à l'intérieur, nous avons une page TSS, qui correspond à la partie URL, slash user slash Fs user, et slash user slash second user Bien que cette approche fonctionne parfaitement, un itinéraire sur la base d' une partie prédéfinie lors de la création d'une application de récompense il n'est pas toujours possible de définir . Permettez-moi donc de le décomposer rapidement en utilisant un exemple de récompense. Il s'agit du prochain site web de portfolio de jazz élégant et ultra rapide que nous allons créer dans le cadre de ce cours. Et d'ailleurs, le lien se trouve juste dans la description. Je vous encourage donc vivement à vous inscrire. Il y a tellement de valeur à en tirer des leçons. Ici, j'ai répertorié certains des articles de blog. Maintenant, si je clique sur l'un des éléments, nous devrions être en mesure de le transmettre sur une nouvelle page. Permettez-moi de vous montrer, par exemple, quand je clique sur ce type, jetez un œil. Si vous observez bien l'URL, vous verrez une barre oblique (le détail du portefeuille est égal à zéro). Cela signifie que l'identifiant de cet article est zéro. Essayons avec un autre article. Rentrons chez nous. Laisse-moi l'essayer sur ce type. Maintenant, si vous observez la trajectoire, vous verrez une barre oblique détaillée du portefeuille, une barre oblique Cela implique simplement que cet article a l'ID de cinq. Le système de routage dynamique nous a permis transmettre cet élément sur une nouvelle page. Et à l'aide de l'identifiant, nous sommes en mesure de récupérer les données correspondantes Sur la gauche, vous pouvez voir les données correspondantes à cet article. Cela illustre donc le système de routage dynamique. Je n'ai pas discuté de tout cela. Passez rapidement au code VS et mettez-le moins en pratique. Retour au code VS. Nous allons donc créer un nouveau blog de cartes de dossiers. Dans le blog, nous allons donc créer un TSS à points de page Je vais faire du Slash Page TSS. Il s'agit donc d'un raccourci pour créer un dossier et une page à l'intérieur. Donc, lorsque vous appuyez sur la touche Entrée, voici le blog. Tu peux voir ? Voici la page Ts, générez le composant fonctionnel. Ce que nous devons faire pour le moment, c'est de rendre un article de blog. Pour ce faire ici, nous allons utiliser le tag H one, et je vais en publier un en bloc comme celui-ci, le surligner, le dupliquer huit fois. Puis changez-le pour bloquer le post deux, trois, cinq, six, sept, huit. Lorsque vous enregistrez le projet, retournez dans le navigateur et voyons ce que nous avons. OK. Nous devons accéder à l'application de démonstration. Et je vais faire du slash blog. Jetez-y un coup d'œil. Nous avons maintenant pu afficher le message bloqué sur le navigateur. La ligne suivante consiste donc à cliquer sur l'un des éléments, puis à le transmettre à une nouvelle page. Et c'est exactement là qu'intervient le routage dynamique. Revenez maintenant au projet. Donc, dans le dossier de blocs, cliquez avec le bouton droit de la souris, nous allons créer un nouveau dossier appelé Block ID. Pour créer un itinéraire dynamique, nous devons placer le nom du dossier entre crochets. Le crochet indique un itinéraire dynamique. Maintenant, je vais créer un identifiant de blog, aussi simple que cela, ou vous pouvez créer un identifiant de publication. Publions l'identifiant. C' est peut-être plus lisible comme ça. Identifiant du message. Dans l'ID de publication , cliquez avec le bouton droit de la souris, puis nous allons créer une nouvelle page. Cela s'appellera la page Terex, générez le composant fonctionnel Ici, nous allons avoir un tag Hage one, et je vais créer une page de détails. Lorsque nous cliquons sur l'un des éléments du bloc, nous devrions pouvoir le transmettre à cette page de détails. Lorsque vous enregistrez et consultez le navigateur, nous allons maintenant faire une barre oblique du blog, par exemple, nous allons en faire une Lorsque vous appuyez sur la touche Entrée, vous voyez maintenant la page de détails. Lorsque vous faites une barre oblique de blog, 100, vous verrez également la page de détails Slash 800, ou n'importe quel identifiant que vous avez dans votre projet Vous allez donc voir la page de détails. Nous devrions en parler un peu. Nous faisons des progrès, et cela me plaît. Donc, dans un souci de simplicité, considérez ensuite un crochet comme un segment dynamique qui nous permet de créer une foule dynamique. Ainsi, lorsqu'un dossier est placé entre crochets, n'est pas nécessaire de le référencer dans l'URL pour obtenir le contenu de la page. L'essence de l' itinéraire dynamique est donc de pouvoir extraire l'identifiant d'une publication, puis de travailler sur la publication individuellement. Donc, par exemple, revenons à la première démo. Donc, si vous extrayez l' identifiant de ce contenu, lorsque vous cliquez, en fonction de l'identifiant, nous pourrons effectuer certaines opérations dessus. Nous allons donc pouvoir récupérer les données correspondantes. Nous pouvons également supprimer les données et en faire ce que nous voulons. Alors maintenant, laissez-moi vous montrer comment extraire l'identifiant. Dans les prochaines étapes Chaque page du routeur reçoit des paramètres de route sous forme de sondes Alors, gagnez la page, assurez-vous d'ouvrir l'ID de publication comme ceci, puis la page ts. Dans la fonction. Nous allons donc prendre les paramètres comme des sondes. Cela fait, la prochaine étape consiste à le lier à l'interface utilisateur. C'est extrêmement facile à faire. Gagnez le tag Hedge One, nous allons ouvrir et fermer les crochets C, et dans le crochet C, je vais faire des paramètres point post ID est aussi simple que ça. Prenez des notes, le segment dynamique que nous avons créé doit correspondre à l'interface utilisateur. Donc, quel que soit l'identifiant de publication que vous avez dans ce segment dynamique, c'est exactement ce que vous aurez ici. Assurez-vous donc que l'orthographe est correcte, car c'est exactement ce à quoi nous faisons référence, et nous essayons de lier ce contenu ici à l'interface utilisateur afin d' extraire l' identifiant, c'est aussi simple que cela Donc l'application se plaint, il faut définir le type. Le params est un objet avec une clé appelée post ID, et le type est string C'est exactement ainsi que vous définissez votre type lorsque vous travaillez avec un script de type. Ici, nous allons faire des paramètres. L'objet possède un ID de publication avec la chaîne de type, et nous avons maintenant vérifié le type. Vérifions-le sur le navigateur. Maintenant, je vais faire Slash Blog Slash 200. Jetez-y un coup d'œil. Tu peux voir ? Nous avons maintenant la page 200 du DTS Voici donc l'identifiant. Nous le récupérons à partir de l'URL. Laisse-moi te montrer quelque chose. Ici, donnons le nom de la classe, puis je vais faire du texte neuf Excel. Magnifique. Rendons-le plus lisible. Page DTS avec l'identifiant et l'os. Nous avons une page de détails avec l'ID 200. Vérifions-en un autre. Faisons-en 17. Page de détails avec l'ID 17. Ensuite, nous pouvons en faire 800, et ainsi de suite. Nous avons maintenant pu récupérer l'identifiant à partir de l'URL. Nous pouvons alors commencer à travailler sur le post. C'est tout pour le moment, et si vous trouvez cette conférence utile, assurez-vous d'y insérer le lampadaire, sinon, appuyez sur S'abonner 12. Route dynamique imbriquée: Prochaine foule dynamique. Lors de la création d'une application complexe. Vous rencontrerez certainement un scénario dans lequel plusieurs segments de foule dynamiques sont requis. Permettez-moi de vous montrer un exemple tiré du site Web Reward. OK. Il s'agit du site Web Reword, bien sûr Nous avons vu que lorsque vous cliquez sur cet article, nous avons pu le transmettre sur une nouvelle page, n'est-ce pas ? Magnifique. Maintenant, ce que nous voulons faire, c'est également récupérer un commentaire qui a été écrit à propos du message. Compris. Par exemple, vous cliquez sur. Il s'ouvre sur une nouvelle page, récupérant les détails par identifiant Et puis, lorsque vous faites défiler la page vers le bas, nous devrions pouvoir voir le commentaire écrit à propos de cet article. Bien. Donc, si nous voulons spécifier l'itinéraire, nous pouvons faire slash portfolio det zero, slash comment slash slash Compris. Magnifique. Revenez au code à moins de l' implémenter rapidement. Comme son nom l'indique, il suffit de créer un nouveau dossier dans l'ID de publication. Voici le bloc, vous devez l' ouvrir dans l' ID du message, cliquer avec le bouton droit de la souris, créer un nouveau dossier. Et nous appellerons ces commentaires. Dans le commentaire, cliquez avec le bouton droit pour créer un nouveau dossier. Et en ce moment, nous voulons créer un prochain itinéraire dynamique. Pour créer un itinéraire dynamique, suffit il suffit donc de le placer entre crochets. Ensuite, nous allons créer un identifiant de commentaire comme ceci. Et dans l' identifiant du commentaire, cliquez avec le bouton droit de la souris, nous devons créer une page dans le champ point T sex. Ici, nous allons faire une RFC pour générer le composant fonctionnel Nous essayons maintenant de faire écrire le commentaire à propos d'un article en particulier. Nous avons créé un commentaire de code de dossier dans l'ID de publication, et dans le commentaire, nous avons créé notre itinéraire dynamique, et voici la page qu'il contient. Donc, pour un identifiant de publication donné, une page passe en TSS dans le dossier des commentaires, c' est-à-dire que ce type aidera à afficher la critique du message par son identifiant Mettons-le en pratique. Donc, dans le cadre, bien sûr, nous devons prendre en compte les paramètres, et quels seront les paramètres maintenant ? Bien entendu, le params est un objet avec l' ID de publication et l'ID de commande Cela fait, venons ici et faisons quelque chose. OK. Utilisons le tag H one. Gagnez. Je vais faire Params point command ID. Laisse-moi te montrer. Je vous en prie, ce doit être celles-ci. Oups, jetez un œil Nous avons mal diffusé quelque chose ici. Il faut être grammaticalement exact. Supprimons donc le n comme ceci. Il s'agit d'un identifiant de recommandation. Vous pouvez le laisser, mais il faut être grammaticalement Donc, ce que je vais faire maintenant c'est fermer l'explorateur, puis nous avons l'ID de commande Params point Ce paramètre est le segment URA pour l'ID du commentaire, qui est le segment dynamique ici, et l' orthographe doit être exactement la même ici lorsque vous essayez de le lier ici Nous avons donc l'ID de commande Param point, qui est le segment dynamique que nous avons créé Essayer de l' expliquer simplement pour que tout le monde le comprenne suffisamment bien. Ensuite, nous allons faire pour les publications bloquées, Param point post ID Lorsque vous voyez et quittez le navigateur. Bloquer, barre oblique, l'identifiant est un, barre oblique, barre oblique un commentaire Et ici, vous avez des commentaires, un par bloc, un. Donc, si vous faites 800 ici, par exemple , vous allez voir 800 commentaires pour le bloc de publication 800. Voici donc exactement comment le mettre en œuvre. Retournez au code. Nous devons satisfaire à ce type de question avant de clore la conférence. Bien entendu, params est un objet. L'ID de publication est une chaîne de caractères. L'ID de recommandation est également une chaîne de caractères. Ensuite, le type est satisfait, les erreurs ont toutes disparu. OK. 13. ErrorPage (dossiers spéciaux): Lorsque vous ciblez un itinéraire qui n'est pas défini dans le dossier de l'application. Ensuite, nous allons afficher une page d'erreur 44 non trouvée par erreur D. Laissez-moi vous montrer rapidement. Par exemple, vous savez tous que nous n'avons pas de route comme slash Portfolio, nous n'avons pas cette route dans notre projet Lorsque vous appuyez sur la touche Entrée, jetez un œil. Il est écrit quatre sur quatre, cette page est introuvable. C'est exactement l'une des beautés de la prochaine génération. Il vous aide à définir une page d'erreur «   quatre sur quatre » non trouvée. Cependant, lors de la création d'une application de récompense, vous voudrez certainement concevoir une plus belle page d'erreur «   quatre sur quatre objets introuvables ». C'est bon. Voyons comment nous pouvons le mettre en œuvre. Retournez à votre projet , puis à w dans le répertoire de l'application. Cliquez avec le bouton droit de la souris, puis créons un nouveau fichier. Et cela s'appellera not found point TSX. ROFC pour générer le composant fonctionnel, et ici, ce que je vais faire maintenant, c'est, disons, y jeter un œil, supprimer le tiret entre le point non trouvé pour que la fonction ne se plaint pas Donc, à l'intérieur, nous allons avoir un tag He one et à l'intérieur de la haie, un tag, je vais faire une page introuvable. Ensuite, nous aurons une autre haie, une étiquette. La ressource demandée est introuvable. Vous pouvez donc maintenant y ajouter de la couleur , puis le concevoir selon vos goûts. Lorsque vous revenez au navigateur et que vous pouvez voir la page introuvable, la ressource de demande est introuvable. Voici donc exactement comment implémenter quatre ou quatre pages d'erreur introuvables dans les années à venir. Si vous ciblez un itinéraire que vous n'avez pas dans votre projet, cette page sera certainement visible. Supposons, par exemple, Localho plutôt que des chariots. Comme nous n'avons aucun itinéraire dans notre projet correspondant aux coupes, il va donc nous rediriger vers la page introuvable. Et c'est exactement ainsi que l'on implémente la page d'erreur « quatre sur quatre » non trouvée. Vous pouvez donc y ajouter plus de couleurs, la police et tout ce que vous voulez faire. Tu peux aller de l'avant pour le faire. 14. Collation de dossiers: Co-emplacement des fichiers. colocation de fichiers signifie simplement la façon dont vous organisez vos fichiers de projet dans next gs. Prenons rapidement cet exemple. Dans l'application, nous allons créer un tableau de bord de dossiers. À l'intérieur, nous allons créer un fichier mis en points, TSX. Générons rapidement le composant fonctionnel. Vérifions-le sur le navigateur. Tableau de bord Slash. La ressource demandée est introuvable. Tu sais pourquoi ? C'est simplement parce que ce fichier n' est pas routable. Rappelez-vous que dans la conférence précédente, j'ai mentionné que chaque fois qu' un répertoire est créé dans le dossier de l'application, ce répertoire devient automatiquement une route lorsqu' une page est créée en TSS ou qu'un point de page y est créé C'est donc la convention, et maintenant nous faisons les réglages point TSS. Cela ne marchera pas. Afin que nous puissions colocaliser correctement ce fichier Ce que nous devons faire, c'est dans le tableau de bord, je vais créer un nouveau fichier. Ensuite, nous allons avoir un TSX à points de page comme celui-ci, RFC pour générer le composant fonctionnel, d'accord Ce que nous devons faire maintenant, c'est revenir aux paramètres, puis copions-le rapidement. La fonction comme celle-ci, surligner la copie, revenir à la page, collons-la ici, comme ça. Lorsque vous sauvegardez, car nous devons enregistrer quelque chose comme ça ici. Lorsque vous revenez au navigateur, la page est désormais routable. Mais vous ne pourrez peut-être pas voir les paramètres ici. Mais au moins maintenant, la page est routable. Une autre façon d'organiser votre fichier, que je recommande vivement , est de créer un dossier de composants distinct pour votre interface utilisateur. Dans la ressource, qui est le SRC, cliquez avec le bouton droit sur le nouveau dossier, puis appelez-le components C'est dans ce composant se trouvera toute votre interface utilisateur. Dans le composant, vous pouvez avoir quelque chose comme ceci, les composants domestiques font GS. Vous pouvez donc à présent générer le composant fonctionnel. Et ici, vous pouvez commencer à créer votre interface utilisateur. C'est l'un des meilleurs moyens de créer votre dossier. Et tous ces arrêts, nous allons les mettre en pratique à l'avenir lorsque nous commencerons à créer le site Web du portefeuille de récompenses. Bien entendu, il est déployé là-bas à bord d'un navire. Vous pouvez y jeter un œil pour voir à quel point il est beau, et je vous suggère vivement à tous de vous inscrire car nous avons beaucoup de choses à découvrir. 15. Dossier privé: Bon retour en classe. Dans cette conférence, nous allons aborder les dossiers privés en détail. Le dossier privé est un futur fourni par next S pour vous aider à organiser efficacement votre projet. Ce dossier et tous ses sous-dossiers ne sont pas routables. Même si vous ciblez le segment d'itinéraire, ils ne seront pas affichés à l'écran. Pour créer un dossier privé, vous devez donc préfixer le nom du dossier par un trait de soulignement Laissez-moi vous montrer comment ouvrir l'explorateur. W dans l'application, cliquez avec le bouton droit de la souris. Imaginons que vous souhaitiez effectuer une opération privée dans le dossier de bibliothèque. Pour que les notes de ce dossier soient routables, il vous suffit de les préfixer d'un trait de soulignement, puis d'appuyer sur la touche Entrée Nous l'avons maintenant préfixé par un trait de soulignement. Cliquez avec le bouton droit de la souris et créons un nouveau fichier. Je vais donc faire la page TRX, puis appuyer sur la touche Entrée Quand vous ferez du RFC et boum, je vais le faire ici, c'est la page privée OK. Lorsque vous dites «   consultez même le navigateur ». Voyons ce que nous avons. Slash, soulignez, C'est l'archie, et nous allons voir que la page est introuvable. Tu peux le voir ? C'est donc simplement parce que chaque fois que vous préfacez un potenyme par un trait de soulignement, traitez-le ensuite comme un itinéraire privé Il ne sera donc pas routable. Mais voyons maintenant, lorsque nous retirons le trait de soulignement, voyons ce qui se passe Enlevons le soulignement comme ceci. Boum. Retournez dans le navigateur et supprimez également le trait de soulignement, comme ça et la bombe Il s'agit de la page privée. Nous avons donc maintenant supprimé le trait de soulignement. Il ne s'agit plus d'une page privée. Mais si vous voulez en faire une page privée, vous devez revenir en arrière puis préfixer d'un trait de soulignement Et où est ce dossier ? C'est bon. Le voici. Cliquez avec le bouton droit, renommez Ensuite, nous allons avoir le soulignement, comme ceci Jette un coup d'œil. Il indique que, non trouvé, les résultats demandés n'ont pas pu être trouvés. Ainsi, chaque fois que vous préfixez un dossier avec un trait de soulignement, cela indique que le dossier contient des détails d' implémentation privés et que ce dossier ne doit pas être pris en compte par le système de routage, ce qui exclut le dossier et tous ses sous-dossiers Bien enseigner, c'est beau. 16. Groupe de routes: Dans cette conférence, nous allons parler du groupe Route. Le groupe de routes est une très belle fonctionnalité de next S qui vous permet d'organiser votre segment de route et votre fichier de projet dans un groupe logique sans affecter la structure du chemin URA. Si vous souhaitez créer un groupe de routes, vous suffit de placer le dossier dans parentenss, et c' est exactement la convention Je n'ai pas réglé tout ça. Mettons-le rapidement en pratique en mettant en place un système d'authentification avec la page d'inscription, la page connexion et le mot de passe oublié Cliquez avec le bouton droit sur l' application, nouveau fichier. Nous allons créer l'ordre du registre slash a page Ts. P est le fichier. Magnifique. RFC pour générer le composant fonctionnel, et à l'intérieur, voyons ce que nous pouvons faire ici Mettons un tag « head one », et je vais créer une page d'inscription. Donnons-lui un nom de classe. Ensuite, du texte, faisons-en cinq Excel. Serf de fonds. Faisons en sorte que ce soit Excel. Encore une fois, cliquez avec le bouton droit sur l'application, nouveau fichier. Ensuite, il faut se connecter pour créer la page Ts. Vous devez utiliser la barre oblique, puis la page TSX. Encore une fois, générez rapidement le composant fonctionnel. Revenons à la page d'inscription, en surlignant le tag Hage One, cop, come here. Coller. Ici, nous allons créer une page de connexion. Vous pouvez le rendre plus beau en spécifiant la couleur de fond et tout ça. Enfin, nous allons créer le mot de passe oublié. Encore une fois, nous allons coller le tag age one, puis voici le mot de passe oublié. OK. Cool. So Safe, assurez-vous d' exécuter l'application. Comme vous pouvez le constater, le mien est déjà en cours d'exécution, il me suffit donc de masquer le terminal. Sur le navigateur, nous allons faire localhost 3 avant de nous enregistrer Voici la page d'inscription. Magnifique. Lorsque je me connecte avec une barre oblique , voici la page de connexion Enfin, il a oublié son mot de passe. Et voici la page du mot de passe oublié. Bien que tout semble fonctionner parfaitement, cette approche n' est pas organisée. Ce n'est pas une bonne pratique. Parce que si un autre développeur choisit votre projet, la structure de celui-ci sera difficile à lire. Par conséquent, nous devons organiser notre fichier lié à l'authentification en un seul fichier parent. Par exemple, laissez-moi vous montrer, disons que vous avez confié ce projet à un autre développeur. Ensuite, si le développeur souhaite implémenter quelque chose dans le login, la structure n'est pas organisée. Si vous créez une application complexe, il y a de fortes chances que vous ayez plus de 20 fichiers, disons. Dans l'application, créez un nouveau dossier appelé th. La prochaine étape consiste à déplacer la page de registre dans le th. Encore une fois, nous devons déplacer la page de connexion ou l'itinéraire de journalisation dans le dd. Enfin, nous devons également transférer le faux mot de passe dans le monde de cette manière. C'est l'un des meilleurs moyens d'organiser votre code. Par exemple, si un autre développeur récupère votre code et que vous souhaitez apporter des modifications la page de connexion ou d'enregistrement, il peut toujours accéder au répertoire Earth, car c' est exactement l'endroit où se trouvent tous les fichiers liés à l'authentification. Lorsque vous cliquez pour ouvrir, vous verrez le faux mot de passe, le nom d'utilisateur et le registre. C'est donc plutôt du coinz. Maintenant, je vais vous montrer le problème. Lorsque vous revenez au navigateur, vous verrez que la page est introuvable. Cela s'est produit parce que nous avons déplacé le fichier hors du dossier parent. Auparavant, il se trouvait dans le répertoire de l'application, et maintenant nous avons créé un dossier parent coupé et nous y avons déplacé le fichier. Pour que vous puissiez suivre la voie des registres, vous devez indiquer le O. Laissez-moi vous montrer. Nous allons faire Slash of Slash Register. Est-ce que tu vois ? Encore une fois, slash slash Connectez-vous Tout semble fonctionner parfaitement, mais la structure du chemin URA est affectée. Rappelez-vous que lorsque nous avons créé la page de registre, hôte local 3 000 barres obliques s'est enregistré Maintenant, il est indiqué que la page n'a pas été trouvée. L'idée est de regrouper l'itinéraire avec soin sans avoir à affecter la structure du chemin URA. Comment mettons-nous cela en œuvre ? Revenez au code et laissez-moi vous montrer. Donc, pour implémenter correctement un groupe Route, tout ce que vous avez à faire est d'envelopper le répertoire parent avec parentenss Cliquez avec le bouton droit sur Renommer. Alors voilà, je vais ouvrir le support ici, puis le fermer ici. Disons hier. Ainsi, lorsque vous retournerez dans le navigateur, vous pourrez acheminer la page du mot de passe sans avoir à faire référence à la désactivation. De même, le login et le registre. Donc, ce message n'est plus visible dans la structure de l'URA. Laisse-moi te montrer. Tu peux voir ? Magnifique. Allons-y, slash, connectez-vous Tu peux voir ? Tout fonctionne parfaitement comme prévu. C'est bien d'enseigner. Magnifique. 17. Mise en page: Bon retour en classe. Dans cette conférence, nous allons apprendre et comprendre le concept de mise en page. Maintenant, qu'est-ce qu'une mise en page exactement ? La mise en page est simplement une interface utilisateur partagée entre plusieurs pages de l'application. Lorsque vous créez un site Web complexe, il est probable que vous souhaitiez avoir un en-tête qui reste cohérent sur toutes les pages, et cela peut être réalisé en utilisant la mise en page. Maintenant, la question est savoir comment définir réellement une mise en page ? Une mise en page peut être implémentée par défaut en exportant un composant React à partir d'un point de mise en page TSS ou d'un point de mise en page GS Et le composant de mise en page acceptera un accessoire pour enfants qui sera rempli d'une page graphique lors du rendu Prenez note de ce point essentiel. mise en page est le composant racine de chaque application GS suivante. Il doit comporter une balise HTM et un corps. Ouvrez l'application, puis dans l'application. Voici la mise en page racine. Je crois que je vous l'ai montré lors de la conférence précédente. Tu peux voir ? Il a donc une balise HTM, une langue que l'on dit en anglais, puis il a un corps. Imaginons, par exemple, que nous voulions implémenter un composant d'en-tête qui restera cohérent tout au long du projet. Supposons donc que nous voulions un composant d'en-tête et un composant de pied qui resteront cohérents tout au long du projet. Maintenant, dans le composant, ici dans le composant, cliquez avec le bouton droit sur le nouveau fichier. Et je vais faire un point s. Les gars, je vais être un peu plus rapide en ce moment. Alors je vais faire Foot a point es. Dans le Futa, faisons FC pour générer le composant fonctionnel Et ici, donnons-lui un nom de classe, puis donnons-lui un gros tiret. C'est le Futa. Donnons-lui un gros coup de pouce. Dash 300 jaune. Voici donc le Futa. Ce que je vais faire maintenant, c'est copier une partie du test, car j'adore déjà le design. Il me suffit de copier celui de Hage dans le registre ou sur la page de connexion. Viens ici dans le pied de page et collez. Ici, je vais implémenter le rembourrage, P pour avoir fait tout cela Je dois rapidement copier celui-ci ici, puis passer en tête d'un point S, RFC pour générer le composant fonctionnel Ensuite, dans le retour, il suffit de coller. Enregistrez et créez pour formater le code. C'est bon. Maintenant, changeons le 300 jaune en bleu, quelque chose comme ça. Ensuite, nous allons faire des opérations, regardez. Cela devrait être la page d'accueil. Et vous sauvegardez, revenez au pied de page, et cela devrait être la page de pied de page Nous sommes déjà en train de créer une application de récompense, et c'est bien. Il s'agit donc de la page d'accueil de l'ensemble de l'application. Nous voulons que l'en-tête et le pied de page restent cohérents d' une page à l' Donc, si vous accédez à la page de blocage, l'en-tête et le pied de page seront affichés, les utilisateurs, l'authentification et toutes les pages Donc, la façon dont nous pouvons le faire pour le moment est défiler un peu vers le haut, de mettre en page TSS, défiler l'écran vers le haut et ici nous allons mettre l' en-tête à partir d'un point, d'une barre oblique, d'un composant, d'une barre oblique Enfin, nous allons mettre le pied de page à partir des composants slash, slash footer Ici, nous devons afficher l'en-tête et le fermer avec la balise à fermeture automatique. Et ici, nous allons afficher le pied de page. Lorsque vous enregistrez et quittez le navigateur et que vous le faites. Maintenant, quand vous faites du slash sur le blog. Vous pouvez voir que l'en-tête apparaît à la fois sur la page du blog. Ensuite, nous pouvons faire du Slash Profile. Nous avons tous ces itinéraires dans le cadre du projet. Bien entendu, nous l'avons mis en œuvre dans les conférences précédentes. Et boum. L'en-tête et le pied de page sont cohérents tout au long du projet Vous allez donc les trouver n'importe où sur votre page. C'est donc exactement le concept d'une mise en page. 18. Groupe de groupe de parcours: Bon retour en classe. Lors de la conférence précédente. Nous avons appris à créer de manière générale une mise en page qui peut rester cohérente au fil des pages. Mais parfois, vous souhaiterez peut-être créer une mise en page unique qui s'applique à une page spécifique de votre application. Supposons que vous souhaitiez que les autres pages de l'utilisateur aient un arrière-plan similaire. Vous pouvez créer une mise en page dans l'application, puis lorsque vous exécutez l'application, la page passe dans la mise en page et prend la forme et l'arrière-plan. Mettons-le rapidement en pratique. Au sein des utilisateurs, nous allons créer une mise en page. Layout point TSX, juste comme ça. Ensuite, nous allons rapidement générer la mise en page. Je n'ai qu'à copier-coller, et vous pouvez mettre la vidéo en pause à la fin pour taper tout ce qu'il faut. Ce que j'ai fait ici, partons de zéro. Je dois juste éliminer ce type. D'accord, vous allez donc donner à cette classe DV le nom suivant Gagnez le nom de la classe, l'arrière-plan sera le sd, 200. Et puis l'écran aura une hauteur de vue de 100. Après avoir créé cet arrière-plan, l'itinéraire du premier utilisateur et le parcours du second utilisateur seront intégrés à cette mise en page lorsqu' ils seront enfants, et le voici. Il peut alors assumer cette propriété ici. Compris. Magnifique. Lorsque vous enregistrez l'application, consultez le navigateur. Lorsque vous faites Lhost, 3 000 utilisateurs réduisent le premier utilisateur. Ensuite, vous verrez le premier utilisateur avec la couleur de fond rouge. Maintenant, faisons quelque chose. Je n'aime pas le fond rouge, et d'ailleurs, c'est mon opinion. Je vais juste faire du bleu ici. Bleu 200. Je pense que c'est cool comme ça. On peut en faire 100. Très bien. Il s'agit du filtre, et voici l'en-tête. Rappelez-vous que nous avons rendu le composant d'en-tête et de pied de page dans le schéma racine C'est la raison pour laquelle vous pouvez voir l'en-tête et le fola autour des pages de l'application Mais pour la mise en page, nous l'avons créée au sein des utilisateurs. Le premier utilisateur et le second utilisateur sont les seules pages qui peuvent entrer dans cette mise en page. Même si vous slash users slash, second utilisateur, faisons quelque chose comme ça Pouvez-vous voir maintenant que nous avons un deuxième utilisateur et qu'il a pris la même couleur de fond. Maintenant, vous le changez en jaune et il apparaît bien. Ainsi, chaque fois que vous créez une application et que vous souhaitez que deux ou trois pages différentes aient la même propriété, vous suffit de créer une mise en page dans le parent. Et puis tous les itinéraires situés au sein du parent seront certainement intégrés à la mise en page. C'est aussi simple que cela. Maintenant, la question est savoir si nous avons un autre utilisateur, mais que nous ne voulons pas que cet utilisateur ait le même arrière-plan. C'est donc exactement là qu'intervient le défi. Laisse-moi te montrer. Supposons, par exemple, que nous ayons jusqu'à un troisième utilisateur. Dans votre dossier, je vais faire un TSX troisième par page. Générez les composants fonctionnels. Ensuite, il suffit d'aller chez le premier utilisateur et de copier les propriétés. Copions les propriétés ici. Bien sûr, vous pouvez voir comment j'ai implémenté ces propriétés en arrière-plan. Nous avons ici le brevet quatre. Pat and Top a 20 ans. La taille du texte et la hauteur de ligne sont de huit Excel, la police est très légère. Vous pouvez donc le faire de votre côté. D'accord, je parle trop, vraiment. C'est pour ton bien, parce que je veux tout expliquer Allons-y, utilisateur de la Fed, comme ça, d'accord ? Lorsque vous économisez. Donc, lorsque vous supprimez des utilisateurs, supprimez un utilisateur de la Fed. Et voici le troisième utilisateur, suppose le même arrière-plan de propriété dans cette mise en page. Donc, le troisième utilisateur, deuxième utilisateur et le premier utilisateur. Toute cette page sera intégrée à la mise en page, et ils y résideront en tant qu'enfants. Ainsi, lorsque cela se produit, cette propriété sera appliquée aux enfants , en l'occurrence le premier utilisateur, deuxième et le troisième utilisateur. Mais pour le moment, le défi consiste à exclure le troisième utilisateur. Nous ne voulons donc pas que le troisième utilisateur entre dans cette mise en page. Nous voulons le styliser différemment . Ce que nous devons faire pour le moment, c'est créer un schéma de groupe d'itinéraires. C'est très simple de le faire. Maintenant, au sein de cet utilisateur, il s'agit des utilisateurs parents. Nous allons créer un nouveau dossier, la mise en page des utilisateurs. Maintenant, ce que nous allons faire, c'est déplacer cette mise en page dans la mise en page de l'utilisateur comme suit. Cela fait, nous devons également déplacer le premier utilisateur dans la mise en page de l'utilisateur. Enfin, nous devons déplacer le deuxième utilisateur dans la mise en page de l'utilisateur. Cela fait, vous devez extraire ce dossier de l'URL afin que nous n'ayons pas à faire de slash users layout, slash, slash, first user Maintenant, lorsque vous revenez au navigateur, vous vous rendrez compte que le troisième utilisateur n' assume plus la propriété de la mise en page. Mais nous avons un problème ici. Gagnez l'URL, il faut cibler la mise en page de l'utilisateur. Slash, premier utilisateur. I Si vous observez attentivement, vous vous rendrez compte que nous faisons trop de choses uniquement pour cibler le premier utilisateur. La meilleure pratique consiste à faire abstraction la mise en page de l'utilisateur du segment d'URL. La seule façon de le faire est de résumer mise en page de l'utilisateur dans parentenss, comme ceci . Vous appuyez sur la touche Entrée. Grâce à cette implémentation, nous avons réussi à extraire en page de l'utilisateur du segment d'URL Ce type ne sera pas injecté dans l'URL. Maintenant, lorsque vous vous dirigez vers le navigateur, il est indiqué que la page n' a pas été trouvée. Tu sais pourquoi ? C'est simplement parce que la mise en page de l'utilisateur est extraite du segment d'URL Ce faisant, il ne sera pas injecté dans l'URL. Tout ce que nous avons à faire, c'est de l' effacer comme ça. Maintenant, ce sera Localhost. 3 000 utilisateurs de slash, slash Fas Tu peux voir ? Tout fonctionne parfaitement comme prévu. Lorsque vous faites Localhost, les utilisateurs réduisent le troisième utilisateur. Le troisième utilisateur ne peut plus utiliser les propriétés de la mise en page. C'est donc exactement ainsi que vous pouvez créer votre propre mise en page , puis supprimer certaines des pages que vous ne souhaitez pas attribuer aux mêmes propriétés. Dans cet exemple, nous voulons que la première et la deuxième mise en page utilisent le même arrière-plan, puis nous voulons créer une mise en page unique pour le troisième utilisateur. Je veux tout te montrer. Troisième utilisateur, p Ts, donnons-lui un nom de classe d' arrière-plan, puis Bg red 200. Nous pouvons également lui donner un écran en hauteur, en H. Cela fera donc en sorte que la hauteur de vue soit de 100. Tu peux voir ? Nous avons maintenant mis en place un arrière-plan unique pour le troisième utilisateur. Mais lorsque vous quittez le premier utilisateur, celui-ci a un arrière-plan jaune clair, puis le second utilisateur a également un arrière-plan jaune clair. 19. itinéraire de métadonnées: Nous retournons en classe. Dans cette conférence, nous allons discuter du routage des métadonnées. Lorsqu'il s'agit de créer une application professionnelle. Garantir une optimisation SEO appropriée est crucial pour améliorer cette visibilité qui entraîne des conversions. L'API de métadonnées introduite par next GS vous permet de définir des métadonnées pour chaque page. Garantir l'exactitude et la pertinence des informations enregistrées lorsque votre page est partagée ou indexée. Dans cette conférence, nous allons discuter de la manière d' utiliser l'API de métadonnées pour améliorer le routage des métadonnées. Conformément à la nouvelle convention de routage. Il existe deux manières de configurer les métadonnées. Vous pouvez soit générer l'objet de métadonnées statique soit exporter une fonction de génération dynamique de métadonnées. Cela peut sembler un peu délicat. Mais inquiétez-vous, lorsque nous commencerons à le mettre en pratique, vous le comprendrez certainement assez bien Maintenant, ouvrez le code VS et laissez-moi vous le montrer. Ici, nous devons fermer certaines boutiques. Nous sommes dans l'appli. La mise en page ci-dessous contient les premières métadonnées. Les premières métadonnées que nous avons dans notre projet peuvent être vues, à savoir la disposition de la racine. Cliquez pour ouvrir. La mise en page racine se trouve directement dans le répertoire de l'application. Il s'agit de la mise en page par défaut de chaque application S suivante. Voici les métadonnées. À l'intérieur, nous avons le titre et la description. Lorsque vous revenez au navigateur, ops, voyez. Il s'agit de la page d'accueil. Implémentons rapidement la hauteur. Donnez rapidement le nom de la classe. Donnez une hauteur de 100 pieds de hauteur. Très bien, regardez, ça marche bien. Donnons ensuite rapidement un nom de classe à celui en H. Ensuite, je vais créer du texte pour Excel. bon, c'est bien. Page d'accueil C'est bon Vous pouvez implémenter le rembourrage et le reste, mais ce n'est pas le but de cette conférence Maintenant, fermons la page, revenons aux mises en page de TS. Je n'ai donc pas vu le titre ni la description. Lorsque vous revenez au navigateur, inspectons rapidement la console. Ouvrez la fenêtre de l'élément. O Ici, dans la tête, cliquez pour ouvrir. Ensuite, lorsque vous faites défiler l'écran vers le bas, vous verrez le titre de l'application suivante C'est de là que ça vient. Vous pouvez le faire, disons, le cas suivant, du débutant au plus avancé. Maintenant, tu peux voir ? W dans le titre, vous allez voir le cours suivant du début à la fin. Je n'ai pas vu les premières métadonnées. Nous pouvons également créer nos propres métadonnées dans la page. Alors laissez-moi vous montrer comment procéder. Nous devons rechercher une page que nous pouvons utiliser. Essayons donc d'utiliser le profil ici. Ouvrez ensuite la page TS. Ici, en haut de la page, nous devons définir les métadonnées. À l'intérieur, il va intégrer une propriété appelée titre de propriété. Dans le titre, je vais faire du code avec un coiffeur. Enregistrez l'application et consultez le navigateur. Maintenant, je veux te montrer quelque chose. Voici la page d'accueil. Lorsque vous le rechargez, nous avons ici le titre du cours suivant, du début à la fin. Maintenant, lorsque vous créez un profil. Consultez à nouveau le titre. On l'appelle désormais do baba. C'est exactement de cette façon que vous pouvez créer vos métadonnées statiques. Cela fait, voyons rapidement comment créer des métadonnées dynamiques. Supposons que vous créez une application en mode bloc. Et chaque bloc comporte plusieurs posts. Lorsque vous cliquez sur chacun des articles, nous devrions être en mesure de voir le titre du message sous forme métadonnées. Faisons-le rapidement. Ouvrez le bloc et dans le blog ici, dans la page où TSS n' est pas là Celui-ci est pour la page à bloc unique. Ouvrez le numéro de publication qu'il contient, vous verrez les points de page. C'est bon. C'est exactement là que le téléphone commence. Tout d'abord, nous devons importer les métadonnées de Next. Importer entre parenthèses, les métadonnées du suivant. Cela fait, créons rapidement le type. Maintenant, params va être un objet avec un identifiant de publication sous forme de chaîne. Magnifique. Ceci fait, exportons rapidement les métadonnées. Regardons rapidement les paumes. Nous n'avons pas eu à le configurer sur une fonction flèche. Maintenant, nous allons y retourner. Avec le retour, nous allons donc accéder au titre de propriété. Le billet de blog. Ensuite, je vais faire Params point post ID. Nous essayons de lier les métadonnées et l'identifiant du message. Ainsi, lorsque vous cliquez sur une publication, vous verrez le titre de cette publication dans le titre des métadonnées. Après avoir fait cela. Enfin, nous devons modifier cette fonction ici car nous avons déjà créé le type ici. D'accord. Il suffit de supprimer celui-ci comme ça. Essuyez-le, et ensuite je vais faire des recherches. Et après avoir fait cela, OK, il y a un problème ici. Ok, les gars, jetez un œil. Donc, lorsque vous viendrez ici, donnons-lui un identifiant de publication , car il doit en être de même pour le ciel ici , à savoir le segment d'URL. D'accord ? Et ici, il devrait s'agir d' un identifiant de poste, juste comme ça. Examinons le navigateur, actualisons-le. Maintenant, je vais faire Localhost 3,000 slash blog slash 800. Voyons ce qui va se passer. D'accord. Magnifique. Sortons-le dans la fenêtre des éléments. Cliquez sur Head in. Et dans le titre, vous allez voir le bloc post 800. Tu peux voir le bloc poste 800 ? Nous avons donc réussi à extraire l'identifiant puis transmettre dans le titre à l'aide de métadonnées Donc, si vous faites, par exemple, slash block, du slash football Ensuite, lorsque vous regarderez le titre, vous verrez Block Post Football. 20. TitleField: Métadonnées du titre. L'objectif principal du champ de titre est de définir le titre du document Il peut s'agir d'une chaîne ou d'un objet. Un exemple de champ de titre de chaîne est ce que nous avons ici dans la mise en page. Il s'agit du champ de titre de la chaîne. Dans cette conférence, nous allons procéder à l'implémentation du champ de titre de l'objet. Pour y parvenir, nous devons éliminer ce type pendant ce temps, puis ouvrir et fermer le support central. Assurez-vous de placer une virgule ici. Encore une fois, assurez-vous d'importer les métadonnées dans une cuve. Importez des métadonnées de type à partir de Next. Cela fait, dans le titre, nous avons trois propriétés différentes. La première propriété est l'absolu. La deuxième propriété est la propriété Default. Enfin, la propriété du modèle. Parlons maintenant de la propriété Default. La propriété Default est utile lorsque vous souhaitez donner un titre à un segment d'itinéraire dépourvu de métadonnées. Par exemple, examinons un itinéraire de page dans le projet qui ne contient pas de métadonnées. Je dis que je dois fermer ce document pour bien comprendre. L'utilisateur ne dispose pas de métadonnées. Voyons ce que nous avons ici. Cette page ne contient pas de métadonnées. Lorsque vous revenez à la mise en page, ne vous reste plus qu'à indiquer le titre par défaut de toutes les mises en page sans métadonnées Par exemple, vous pouvez utiliser une phrase plus lisible à la fin qui décrit l' intention de votre projet. Quand vous voyez même consulter le navigateur, nous allons maintenant faire localhost slash, 3 000 slash users slash d user L'attention doit être portée sur la fenêtre des éléments. Ouvrons la tête, faisons défiler la page vers le bas, et vous verrez que c'est le quatrième titre pour toute la mise en page sans métadonnées. Même si vous quittez votre compte, par exemple, slash users slash first user Il s'agit du premier utilisateur, et il porte exactement le même titre. Pouvez-vous espérer que vous puissiez voir le titre ici. Il s'agit du titre par défaut pour toutes les mises en page sans métadonnées. Cela illustre la propriété par défaut. La ligne suivante est le modèle. La propriété template est utile lorsque vous souhaitez créer un titre dynamique en ajoutant un préfixe ou un S fix. Mettons-le rapidement en pratique pour que vous compreniez l'essentiel. Voici le modèle à droite. Ce que je vais faire maintenant, c'est le signe du pourcentage, puis S comme ceci, quelque chose comme ça , et ensuite je vais faire un Duba en numérique Lorsque vous enregistrez, ouvrons rapidement la page de blocage. Utilisons la page de blocage pour celui-ci. Voici le blog. Voici la page de blocage. Bien. Dans la page de blocage, nous devons importer les métadonnées de la page suivante, puis cela fait. Exportons rapidement. Et le type est celui des métadonnées. Spécifiez le titre, et je vais faire ici la liste des blogs. L'idée est simple. Nous voulons utiliser cette liste de blogs ici pour remplacer, laissez-moi vous montrer ce type. Sur le navigateur, vous allez voir la liste des blogs, b data. Vous économisez. Jetons un œil au navigateur. Localhost réduit de 3 000 barres obliques. Oh, mon Dieu. Les gars, j'habite près de l'aéroport. Donc, si vous entendez le moindre bruit de l'avion, cela signifie simplement que vous allez bientôt voyager. C'est bon. Continuons. Nous allons maintenant avoir le blog Localhost 3,000 Ici, dans le titre, vous voyez la liste des blogs , puis Duba digital Nous avons utilisé la liste du blog pour remplacer le ciel ici. En d'autres termes, nous ajoutons les caractères numériques Duba à la liste des blogs, comme on le voit sur le navigateur dans la fenêtre des éléments Liste de blogs, dub digital. Chaque fois que vous souhaitez préfixer ou suffixer des éléments dans votre projet, voici exactement comment l' implémenter à l'aide Parlons de l' absolu. C'est bon. La propriété absolue est utile si vous souhaitez fournir un titre qui ignore le modèle de titre défini dans le modèle de mise en page parent Par exemple, si vous voulez ignorer les gars ici, tout le modèle de titre se trouve ici. Si vous voulez l' ignorer, vous devez utiliser l'absolu. Vérifions-le à nouveau sur le navigateur. Ici, nous avons une liste de blogs et un Duba digital. Si vous revenez à cette même page, qui est la page du blog, implémentons maintenant l'absolu. Ce que nous devons faire, c'est éliminer ce type , puis introduire l'objet. À l'intérieur de l'objet, nous allons faire des absolus. Je dois juste fermer ça. Nous implémentons l' absolu ici même, nous n'en avons donc plus besoin dans la mise en page parent. Essuie ça comme ça. Sa Juste ici, ce que vous devez faire, c'est le titre absolu. Lorsque vous consultez le navigateur, vous pouvez voir que c'est le titre absolu ici. Tout tourne autour du routage et des métadonnées. 21. Liens et navigations: Bon retour en classe. Dans la conférence précédente, nous avons exploré les prochaines techniques de routage du système basées sur des fichiers GS , et nous avons appris à créer différentes techniques de routage, telles que la prochaine route dynamique Ed Route et la route Ca. Cependant, vous remarquerez que nous avons saisi l' URL manuellement dans l'onglet. Si nous voulons accéder à la page du blog, nous devons créer le blog Localhost 3,000 slash, comme celui-ci Ensuite, si nous voulons accéder à la page de profil, nous devons faire une barre oblique Du point de vue du développeur, il n'y a rien de mal à cela. Mais du point de vue de l'utilisateur final, cela est considéré comme inapproprié, car il se peut qu'il ne connaisse même pas l'itinéraire que vous avez suivi dans le cadre de votre projet. Par conséquent, nous devrions être en mesure de permettre à l'utilisateur final de passer facilement d'une page à l' autre en cliquant sur un lien, et cela sera bien entendu mis en œuvre avec le composant de lien présent dans les 14 prochaines pages. Laissez-moi vous montrer rapidement. Revenez au code VS, commun B pour ouvrir l' explorateur. Gagnez l'appli. Voici donc la page d'accueil. La page do S S qui se trouve juste dans le répertoire racine, qui est l'application. Lorsque vous cliquez pour ouvrir, ici, nous devons implémenter le lien. Pour implémenter le lien, jetez d' abord un œil. L'image suivante n'est pas utilisée. Nous devons donc importer le lien à partir de la barre oblique suivante. Ceci fait, implémentons rapidement les liens situés sous la balise H one. Supposons donc que nous voulions accéder à la page de blocage. Lien, et veuillez en prendre note. Le lien est en majuscule L. La référence hypertexte est equ, nous n'allons pas utiliser le crochet C. Utilisons plutôt le code simple ou le code double. Maintenant, regardons quelque chose. Au sein de l'explorateur, vous vous rendrez compte que nous avons un itinéraire appelé blog, non ? Donc, pour cibler cet itinéraire, il suffit de slash, puis de spécifier l'itinéraire, qui est le blog C'est simple. Fermez ensuite le lien. Ici, je vais faire une page de blocage. Le code HTML interne sera le test qui sera affiché à l'écran. Et lorsque vous cliquez sur le test, vous serez redirigé vers la page du blog. Ensuite, jetez un œil au navigateur. OK ? Nous devons accéder à la page d'accueil. Et voici le blog. Lorsque vous cliquez, nous sommes maintenant sur la page du blog. C'est bien d'enseigner. Magnifique. Vous savez donc que lors de la mise en œuvre d'une demande de récompense, lorsque vous visitez la page de blocage, vous n'avez pas à cliquer sur le bouton ici pour revenir en arrière Au lieu de cela, nous devrions être en mesure d'implémenter un lien ici qui nous redirigera vers la page d'accueil. Donc, ce que je vais faire maintenant, c'est revenir au projet, dans la page de blocage. Voici la page de blocage ici. Lisons rapidement le lien à partir de la barre oblique suivante, et nous devons placer le lien en haut de la page comme ceci HREF égal. Nous allons rentrer chez nous, et ici, nous allons rentrer chez nous. Maintenant, nous n'avons pas besoin de spécifier une maison ici. Essuyez-le. Donc, si vous souhaitez accéder à la page d'accueil, la convention consiste à spécifier une barre oblique comme celle-ci. Il s'agira d'un pointeur vers la page d'accueil. Lorsque vous cliquez sur cette page d'accueil dans le code HTML interne. Vous serez redirigé vers la page d'accueil. Sept, jetez un œil. Et le voici en haut. Vous voyez, lorsque vous cliquez sur Accueil, vous revenez à la page d'accueil, puis vous cliquez sur le blog, bloquez. Et maintenant, nous sommes sur la page du blog. Nous pouvons également retourner à la page d'accueil. Tout fonctionne parfaitement comme prévu. La prochaine étape consiste à mettre en œuvre le système de surpeuplement dynamique Par exemple, si vous utilisez Localhost plutôt que de slash 800 sur le blog Nous sommes maintenant en mesure de transmettre le message bloqué à la page de détails. C'est exactement ce que nous voulons faire, non ? Ainsi, par exemple, lorsque vous revenez à la page de blocage, si vous cliquez sur la page Bloquer la publication, nous devrions être en mesure de transférer la publication bloquée sur une nouvelle page. Il n'est pas nécessaire de saisir l'URL manuellement dans la barre d'adresse. D'accord, j'ai trop parlé, vraiment. Mais c'est pour ton bien. Donc, dans la page de blocage, ce que nous devons faire maintenant, c'est implémenter la foule dynamique. Nous avons déjà importé le lien en haut. Donc, ici, ce que nous devons faire est simple. Mettez en surbrillance ce type, puis coupez-le, qui est le texte HTML interne. Ensuite, nous allons avoir un lien comme celui-ci. Puis ce lien, le H REF, qui est la référence hypertexte Bloc Slash One. Et puis ici, nous allons coller le bloc post 1. C'est aussi simple que ça. Maintenant, lorsque vous cliquez sur Bloquer la publication, une nouvelle page s'ouvre avec la publication en bloc 1. Voici donc exactement comment implémenter un lien dynamique. Nous devons maintenant copier le lien, surligner les lignes 18 à 20, surligner le texte. Viens ici. Surlignez le texte HTMA intérieur, effacez-le, puis repoussez ce type Mais maintenant, nous devons changer l'identifiant à deux et le block post à deux également. Et ainsi de suite. Vous pouvez donc faire le reste de votre côté parce que vous êtes intelligent. Bien sûr, tu peux le faire. Trois, en voici trois. Bien, pour ne pas perdre ton temps. Je dois juste enregistrer, retourner dans le navigateur et voir ce que nous avons à bord. Essayons-le en cliquant sur Bloquer la publication. Jette un coup d'œil. Il indique la page Datos avec l'ID d'un Regardez l'URL, bloquez une barre oblique, et maintenant nous avons réussi à transmettre l'identifiant d'un cheveu C'est tellement beau. Ainsi, lorsque vous cliquez sur Bloquer la publication deux, la page de données avec l'ID de deux, sur la page de données avec l'ID de deux, etc. Une chose très importante que je souhaite partager avec vous concerne le remplacement des sondes. Alors ici, formattons rapidement le code. Très bien, il a une très belle forme maintenant. Ici, je peux faire quelque chose comme remplacer. OK ? Lorsque vous sauvegardez, examinons le comportement des sondes de remplacement. Ce type. Retournez au navigateur. Maintenant, essayez-le. Nous cliquons sur Bloquer la publication. Il ouvre la page B Dt avec l' identifiant de l'un d'entre eux. Alors tu y retournes. Bloquer le post 2. Ici, nous avons l'identifiant d'un post 2. C'est bon. Maintenant, cliquons sur Bloquer le post 3. Je veux que tu remarques le comportement. Quand je clique sur ce gars ici, tu peux voir ? Cela nous renvoie à la page d'accueil. OK. Donc page de blog. Lorsque vous cliquez sur le premier article de blog, il vous ramène à la liste des blogs. Ensuite, si vous cliquez sur le second et revenez en arrière, cela vous ramène à la page de liste des blogs. Mais lorsque vous cliquez sur le troisième article, lorsque vous revenez en arrière, cela vous renvoie à la page d'accueil. C'est donc exactement ce que fait l'accessoire de remplacement. Essayez-le. Je clique. Vous voyez, cela nous renvoie à la page d'accueil. Ce n'est pas le cas pour le moment, et dans la prochaine conférence, nous verrons comment styliser un lien de manière conditionnelle 22. Liens: Bon retour en classe. Dans la conférence précédente, nous avons appris comment implémenter les liens de navigation. Nous allons procéder à la stylisation du lien en fonction de son état. Par exemple, si vous observez ce magnifique site Web de portfolio, vous vous rendrez compte que nous sommes juste dans la page d'accueil, et c'est exactement la raison pour laquelle le lien d'accueil est surligné parce que l'URL est active. De plus, lorsque vous cliquez sur le portefeuille, le lien du portefeuille est surligné, simplement parce que l'URL du portefeuille est actif. Si vous cliquez sur À propos de moi, même chose ici, simplement parce que l' URL est active, le lien sera marqué comme sélectionné. C'est exactement ce que nous voulons implémenter sur notre application de démonstration. W dans le projet C et B pour ouvrir l'explorateur. Implémentons-le sur la page d'enregistrement. Ici, il ne nous reste plus qu'à cliquer sur la mise en page. Bien sûr, vous savez que le mot de passe oublié, le nom de connexion et le registre figureront certainement dans la mise en page. Cliquez maintenant sur la mise en page pour ouvrir puis fermez l'explorateur. La première chose que je vais faire ici est de surligner puis de commenter les métadonnées. Cela fait en haut, nous allons importer le lien à partir de la prochaine barre oblique. Nous allons maintenant importer le nom du chemin d'utilisation. Le nom du chemin américain aidera à bien bloquer l'URL active. Lorsqu'il bloque bien l'URL active, nous pourrons alors extraire l'URL et la styliser différemment Le nom du chemin U, bien sûr, c'est un crochet, et il vient de la prochaine nation slash Après avoir fait tout cela, faisons rapidement quelque chose. Encore une fois, une chose très importante que vous devez retenir d' ici est que nous voulons lire tous nos liens dans un tableau. Ensuite, il ne nous reste plus qu'à le cartographier. C'est exactement ainsi que vous pouvez créer une application comme un pro. Commençons par une constante. Ayez des liens equ, ouvrez et fermez le tableau, puis dans le tableau, nous allons avoir le premier objet Nous allons l'appeler par son nom. Le nom va être enregistré. Celui-ci va être l'ambiance HTM interne. Ce sera le texte qui définira le lien. Maintenant, nous allons avoir un arbitre en chef. De plus, nous devons définir la référence principale sur slash register. Sachant que nous avons un itinéraire appelé enregistrez-vous ici dans le cadre du projet. Nous visons cet itinéraire. Maintenant, la ligne suivante est à surligner, dupliquée deux fois. Ici, nous allons nous connecter. Et ça va être slash Log in. Bien sûr, ici, nous allons faire un passe oublié. C'est bon. Une fois cela fait, assurez-vous de le remplacer une lettre minuscule, car cela devrait correspondre exactement à ce que nous avons ici. La meilleure façon de le faire est de cliquer avec le bouton droit de la souris, puis de renommer. Copiez le nom, et ici vous pouvez simplement venir coller exactement le nom de l'itinéraire. Oups, jetez un œil Il faut y placer une caméra . Après avoir fait cela. Allons-y pour cartographier tout ce qui se trouve ici et les afficher à l'écran. Juste en dessous du tu ren, nous allons avoir des crochets Ci qui s' ouvrent et se ferment afin de pouvoir intégrer scrypt Java et les poêles Nous allons maintenant créer des liens de navigation, une carte à points. Ensuite, nous allons suivre le lien. Ce gars ici représente chaque maillon de la RA. Réglez-le sur une fonction R, ouvrez et fermez le support. Et à l'intérieur, nous allons renvoyer l'interface utilisateur. Parentalité ouverte et fermée, au sein de la parentalité, nous allons avoir Le H REF, qui est la référence de l'hypotex, nous allons faire link.hf Encore une fois, nous devons spécifier la clé car nous mappons un élément. La clé sera le nom du Link Dot. Nous pouvons utiliser le nom pour identifier de manière unique chacun des éléments présents ici. Nous avons un compte, un identifiant et un mot de passe oublié. Je me sens bien. Fermons rapidement le lien, juste ici, pour vous donner un nom de classe. Nous devons rendre le nom. Je vais donc prendre le nom de Link Dodd. Enregistrez et consultez le navigateur. Le ça. Observez-le attentivement en haut. Tu peux voir ? Nous avons le registre, le login et le mot de passe oublié. Maintenant, lorsque vous cliquez sur Connexion, nous passons à la page de connexion. Lorsque vous cliquez sur le mot de passe, nous passons à la page du mot de passe et nous pouvons également revenir à la page d'enregistrement. Magnifique. Maintenant, je veux que tu te souviennes de l'intention. L'idée est de marquer le lien comme étant sélectionné lorsque vous cliquez dessus. Lorsque vous cliquez sur un lien, nous voulons qu'il reste actif. Par exemple, lorsque vous cliquez sur le mot de passe oublié, nous voulons que le mot de passe oublié soit mis en évidence car il est actif ici dans l'URL. Faisons-le rapidement à l'aide du nom du chemin américain. Le nom du chemin d'utilisation est un hook. Nous devons l'invoquer. Faisons-le ici. Comme nous l'avons essayé ici. Le nom du chemin d'utilisation est un hook que nous devons invoquer. Utilise le nom du chemin, et bien sûr, c'est une fonction. Ensuite, nous allons le stocker dans une constante. CS path name equ utilise le nom du chemin. Le nom du chemin va maintenant stocker l'URL active. Nous avons maintenant l'URL active stockée dans le nom du chemin. Nous devons en faire usage. Quand vous viendrez ici, ce que nous devons faire, c'est faire C is active equ Path name dot, dans le hook use path name, nous avons une méthode appelée start with. Nous allons maintenant accepter une méthode appelée start with. Ensuite, nous allons créer un lien vers HREF. Maintenant que nous n'obtenons pas l'URL actuelle, nous devons styliser le lien de manière conditionnelle en fonction de l' C'est très simple à faire. Dans le classme d'ici, remplaçons cela par le crochet C, car nous allons créer beaucoup de scripts Java entre les deux Si c'est actif, c'est vrai, nous allons faire en sorte que le texte soit du texte jaune 400. Nous pouvons ensuite changer la police en serif. Mettons-le un peu en gras. Tableau de bord avant. Vous pouvez continuer à le styliser et à le rendre plus beau de votre côté, tel qu'il Sinon, que devons-nous faire ? Nous allons vous donner la couleur du texte : une centaine de poils bleus. Lorsque vous enregistrez l'application, consultez le navigateur. Oups, supprimez le graphique sur le nœud. C'est bon, les gars. Permettez-moi vous montrer quelque chose dans la console. Pouvez-vous voir que l'erreur utilise le nom du chemin ne fonctionne que dans le composant client. Par défaut, next gs s'exécute côté serveur. Si vous souhaitez utiliser des hooks, vous devez passer du économiseur au rendu côté client C'est extrêmement facile à faire. Dans le guillemet unique, nous allons utiliser ****. C'est aussi simple que ça. Vous pouvez y mettre fin avec la colonne sem si vous le souhaitez. Lorsque vous économiserez à nouveau, voyons ce que nous avons maintenant. C'est bon. Vérifions-le sur le navigateur. Et ce sont ceux-là. Mais avant de procéder à la démonstration, je voudrais vous montrer quelque chose de très important. Lorsque je recharge la page dans le coin inférieur gauche de l'écran, vous verrez l'alerte d'erreur. Lorsque vous cliquez pour ouvrir, le message suivant indique que contenu du test ne correspond pas au code HTML rendu par le serveur Quelque chose ne va pas dans les coulisses. Revenons au code. W dans la mise en page que TSS. Nous devons faire quelque chose. Enlevons ce HGM ici. Enlève-le. Remplaçons ici le corps par un fragment. Il vous suffit donc de surligner le corps, puis de commander D pour effectuer une sélection multiple, effacer. Enregistrez l'application. Vite, examinons le navigateur. Rechargez et l'erreur disparaîtra. Lorsque vous observez attentivement l' écran, vous verrez le nom d'utilisateur se connecter et le mot de passe oublié. Essayons en cliquant sur le bouton de connexion. Quand tu cliques, tu peux voir ? Maintenant, dans la barre d'adresse, vous vous rendrez compte que la connexion est actuellement active. Pour cela, il faut le souligner. De plus, lorsque vous cliquez sur le mot de passe, l'URL devient active et elle est sélectionnée ici. Il est actif ici, et ainsi de suite, inscrivez-vous, connectez-vous, mot de passe oublié. 23. Page d'erreur (dossiers spéciaux): S. Notre application fonctionne parfaitement lorsque vous naviguez vers localhost 3,000 slash blog, slash, slash, slash one, one, slash one. Et cela nous mènera là où nous avons les commentaires pour un article de blog. Vous savez donc tous qu'une erreur peut parfois survenir dans votre application, n'est-ce pas ? Supposons donc que vous essayez de faire correspondre le premier commentaire au premier article. Vous rencontrez donc simplement une erreur. Pour illustrer cet exemple, nous devons créer nous-mêmes une erreur dans l'application. Ouvrez l'explorateur, puis l'ID du billet de blog, les communications, l' ID de recommandation. Ouvrez cette commande B pour la fermer. Créons maintenant rapidement une erreur. Ici, nous allons avoir une fonction. Obtenez un résultat aléatoire. Je vais faire un décompte. Nous devons donc renvoyer le flux de points Matt. Il s'agit simplement d'un script Java de base que vous devez connaître. Ensuite, point mat, beau au hasard. Ceci fait, viens ici. Stockons rapidement le aléatoire dans une constante. Const Random égal, get Random. C'est exactement là que nous allons lancer l'erreur. Si le hasard est égal à un, alors nous allons générer une nouvelle erreur. Erreur lors du chargement de ce commentaire. Maintenant on en a fini avec ça. Vérifions-le rapidement sur le navigateur. Rechargeons Et nous l'avons ici, erreur lors du chargement de ces commentaires. L'intention de créer cette erreur est de voir comment nous pouvons gérer une erreur à l'avenir lorsqu'une erreur se produit. Prenons l'exemple d' une personne qui visite votre site Web et essaie de traiter quelque chose. Soudain, une erreur apparaît comme celle-ci. La personne perdra immédiatement confiance en ce site Web. OK ? Donc, s'il y a une erreur dans le projet, nous devrions être en mesure de gérer cette erreur sans endommager l'application. Parce qu'ici, l' application est cassée. Même lorsque vous rechargez, regardez, l'application est cassée Ce n'est donc pas professionnel. La meilleure chose à faire est de capturer cette erreur, puis de l' afficher sur l'interface utilisateur afin que les utilisateurs puissent avoir une meilleure expérience. C'est exactement ainsi que nous pouvons gérer cette erreur de manière professionnelle. Vous revenez donc au code VS. Ouvrez l'explorateur. Dans l'identifiant du commentaire, ce gars, cliquez avec le bouton droit de la souris. Nouveau dossier. Nous allons appeler ce point d'erreur TSX Dans le point d'erreur TSS, repérons rapidement la limite d'erreur RFC pour générer le composant fonctionnel. Mais cette fois-ci, nous allons l'appeler « limite d'erreur », comme ceci. Et puis ici, sur l'interface utilisateur, nous allons avoir un tag He one. Donc, à l'intérieur, nous allons avoir une balise H one, puis nous allons faire une erreur dans l'ID du commentaire. Nous devons donc passer du côté serveur au côté client. SF encore une fois sur le navigateur, d'accord. Maintenant, il indique une erreur dans l'ID de commande. Auparavant, lorsque nous avions implémenté une erreur dans notre projet, toute l'application était cassée, puis nous avons vu l' erreur gênante à l'écran. C'est une très mauvaise expérience à offrir à vos utilisateurs. OK ? Ainsi, par exemple, vous visitez le site Web pour acheter quelque chose, et tout à coup, le site Web est tombé en panne, et vous voyez des lignes rouges partout plaindre d'une erreur. Je pense que vous allez perdre confiance en ce site Web. Le meilleur moyen est donc de présenter l'erreur aux utilisateurs de manière très professionnelle. Et c'est exactement ce que nous avons fait ici, d'accord ? Vous pouvez donc revenir à votre projet et personnaliser l'erreur comme vous le souhaitez, d'accord ? Vous pouvez donc donner le nom de la classe, par exemple, puis faire P quatre , Bg red, disons 200. Du texte, c'est Excel, c'est Excel. Voyons ce que nous avons maintenant. Rechargez, rechargez encore et encore. Ensuite, vous voyez une erreur dans l'ID de commande. Voici exactement comment gérer les erreurs dans next gs. Une autre chose que vous pouvez faire est d'afficher l'erreur par programmation Nous avons ici un accessoire appelé error, et l'accessoire est de type Cela fait, nous devons l' afficher sur l'interface utilisateur. Je vais afficher un message d' erreur. Lorsque vous enregistrez et quittez le navigateur. Erreur lors du chargement de ces commentaires, et le contenu vient de cet endroit. Nous recevons le message d'erreur d'ici. C'est bon, c'est annulé pour le moment. Rendez-vous dans le prochain leurre. 24. Modèle vs disposition: Le fichier modèle est similaire à une mise en page dans la mesure où il enveloppe chaque mise en page ou page enfant Contrairement aux mises en page qui persistent sur tous les itinéraires et conservent leur état Les modèles créent une nouvelle instance pour chacun de leurs enfants lors de la navigation, ce qui implique simplement que l'état de l'application sera modifié lorsque vous naviguez vers une nouvelle page. Pour bien comprendre le fonctionnement du modèle, nous devons absolument le mettre en pratique en le comparant à la mise en page. Mettons-le rapidement en œuvre. Commande B pour ouvrir l' explorateur. C'est bon. Je pense donc que nous devrions le faire dans le cadre du registre, qui est la Terre, n'est-ce pas ? Alors faisons quelque chose. OK, alors ouvrez le bot, puis cette mise en page ici. Mettons-le en œuvre car le mot de passe oublié, la connexion, enregistrement, ils sont tous intégrés à la mise en page. Fum. Nous avons besoin d'états dans notre application pour illustrer cet exemple. Imputons rapidement le hook utilisé à partir de React. Déclarons rapidement les variables et la fonction seta pour mettre à jour l'état Ici, je vais faire Cs impute Ca set impute. Et l'état initial sera une chaîne vide. Bien sûr, vous devez le savoir à partir de React. Cela fait, implémentons-le rapidement dans le projet. Maintenant, nous allons avoir un df dans ce dif, nous allons avoir un remorqueur imputé. Spécifiez la valeur. La valeur va être imputée. Lors du changement, c'est-à-dire lorsque l'utilisateur commence à taper dans le champ d'impute, nous devons récupérer les données Nous allons maintenant avoir accès à l'événement. À l'aide de l'événement, nous allons appeler la fonction seta pour mettre à jour l'état initial, et dans la fonction seta, nous devons ensuite utiliser l' événement pour cibler et récupérer la valeur. C'est simple. Enfin, nous devons fermer l'impute avec une étiquette à fermeture automatique Donnons-lui rapidement un style. Un peu de style pour lui donner une belle apparence. Nom de la classe, je vais faire les grandes lignes. Nous voulons que le coin soit légèrement arrondi, alors arrondissons-le au SM. Cela fait, vérifions-le rapidement sur le navigateur. Maintenant, nous allons faire Localhost 3 avant de nous inscrire. Et maintenant, vous pouvez voir l'impute ici. OK. Faisons quelque chose. Donnons le nom de cette classe div. Précisons que le rembourrage est de quatre. Et bien. C'est bon. Jette un coup d'œil. Maintenant, nous avons l'Impute ici. Tapons rapidement quelque chose dans le champ Impute. Dub numérique. Je veux que vous observiez le comportement lorsque je navigue vers la page de connexion. Je clique donc sur la page de connexion. Laisse-moi te montrer. Nous sommes sur la page de connexion. Regardez, voyez-vous que l' état n'est pas modifié ? Lorsque vous naviguez également pour oublier le mot de passe, vous vous rendrez compte que l' état n'est pas non plus modifié. La mise en page conserve un état cohérent au sein du projet. Pouvez-vous voir, même lorsque vous appuyez sur Se connecter, lorsque vous appuyez sur Enregistrer, que l'état n'est pas modifié. C'est l'état des cheveux. Maintenant, nous voulons remplacer la mise en page par les modèles, puis nous pouvons observer le comportement pour comprendre la différence entre la mise en page et le modèle. C'est bon. Faisons-le rapidement. C et B pour ouvrir l'explorateur. Ce que nous devons faire est de cliquer avec le bouton droit de la souris, puis de renommer, effacer la mise en page, puis je vais créer template.tss Boum. Nous devons y répondre par l'affirmative. Enregistrez maintenant le projet dans le navigateur. Rechargeons rapidement. Tout est cool. Maintenant, essayons-le et je vais faire Duba digital Lorsque vous appuyez sur la connexion, vous voyez, lors de la navigation, que l' état est détruit. C'est exactement la différence entre le modèle et la mise en page. 25. Page de chargement(dossiers spéciaux): Dossiers spéciaux. Le fichier spécial nous allons parler dans cette conférence est le point de chargement s. Le point de chargement S ou TSS vous aide à créer une interface de chargement significative avec des plans de source réactifs. vous aide à créer interface de chargement significative avec des plans de source réactifs Grâce à cette convention, vous pouvez afficher un état de chargement instantané depuis le serveur pendant le chargement du contenu d' un segment de route. Le nouveau contenu est automatiquement remplacé une fois le rendu terminé Ainsi, par exemple, si un utilisateur clique sur un article de blog, il faudra un certain temps pour le message soit récupéré et affiché à l'écran Donc, pendant que vous attendez le message, nous devrions être en mesure de créer une barre de chargement pour donner à l'utilisateur une sorte de réponse que le message est en train de récupérer. Vous ouvrez maintenant l'explorateur. Mettons-le rapidement en œuvre dans la pose du bloc. Insérez le bloc, cliquez avec le bouton droit de la souris, créez un nouveau fichier Et c'est ce que l'on appellera. Point de chargement TSX. Vous pouvez l'appeler point de chargement S selon ce que vous utilisez. Lorsque vous appuyez sur la touche Entrée, générez le composant fonctionnel. Concevons rapidement l'interface utilisateur de chargement. Donnez-lui un nom de classe off, puis la hauteur sera de 100 Vg Le sol de la baie BG, jaune, 800. Oups. Ce sera trop. Faisons-en 400. C'est bon. Cela fait, dans le code HTML interne du D, nous allons avoir une balise H one, puis nous allons procéder au chargement. Stylisons également rapidement le tag H one. Du texte, c'est Excel. Texte, bleu, 100. La couleur du texte est bleue, puis nous devons aligner le test au centre. OK, sauvegardez l'application. Retournez au navigateur. Ainsi, lorsque nous cliquons sur le harnais juste ici, avant que la page de blocage ne s'ouvre, vous verrez certainement la page de chargement Jette un coup d'œil. C'est assez rapide, mais il faut le refaire. C'est bon. C'est exactement ce dont nous parlons. 26. Démo du site web: Voici exactement l'application que nous allons créer dans ce cours. Maintenant, allons-y. Dans le coin supérieur gauche de l'écran, vous verrez le menu. Lorsque vous cliquez, le tiroir de navigation s' ouvre. Et lorsque vous passez le curseur sur les liens, seront surlignés Je survole, le portfolio me concernant est mis en avant et je m'embauche. Juste en dessous, nous avons les liens vers les réseaux sociaux, et tout fonctionne parfaitement comme prévu. En fait, lorsque vous cliquez sur Instagram, vous pouvez ouvrir ma page Instagram. Vous pouvez donc cliquer sur l'icône X pour le fermer. Également en haut, nous avons l'en-tête. Dans l'en-tête, nous avons les liens. Il a exactement le même comportement que celui du tiroir de navigation. Lorsque vous le survolez, il est surligné. Lorsque vous cliquez, par exemple, lorsque je clique sur le portfolio. défilement se fera en douceur jusqu' au composant du portefeuille , puis ce lien sera mis en évidence. Jetez-y un coup d'œil. Voyez-vous, nous en sommes maintenant au volet portefeuille, et ce lien de portefeuille est mis en évidence ici. La même chose ici, et quand vous rentrez chez vous, c'est exactement le même comportement. Dites-moi, ça n'a pas l'air bien. Bien sûr, c'est le cas. Continuons. À l'extrémité gauche de l'écran, vous avez mon nom et mon entreprise. De plus, nous avons le botin du projet et le bouton Get resume butting Le projet fait exactement la même chose avec le lien du portfolio ici Lorsque je clique sur le projet, il fait également défiler l'écran en douceur jusqu' au composant du portefeuille. Lorsque je clique sur le bouton Obtenir un CV , mon CV est téléchargé. Jetez-y un coup d'œil. Pouvez-vous voir le fichier téléchargé ? Vérifions-le rapidement. Le voici. Très beau retour sur le projet. Ici, nous avons la photo de profil. Juste en bas, nous avons la boîte oblique. Passons rapidement à la composante du portefeuille. Lorsque je clique sur le projet, jetez-y un coup d'œil. Magnifique. Nous avons les différents projets sur lesquels j'ai travaillé. Nous avons The Am Food Company, le site Web du portfolio de l'année prochaine, qui est le site Web que je présente, et ainsi de suite Je peux donc cliquer sur chaque élément de la carte pour l'ouvrir sur une seule page. Maintenant, quand je passe sur cette carte, vous verrez cette icône ici comme les yeux. Cliquez pour ouvrir, et voici la page de présentation du portfolio. Voici ce que j'ai à dire à propos du portefeuille, la description et des technologies que j'ai utilisées. Très intéressant Lorsque vous faites défiler la page vers le bas, nous pouvons cliquer sur le bouton pour afficher le projet suivant. Tu peux voir ? Jetez-y un coup d'œil. Nous pouvons également cliquer sur le précédent pour afficher le projet précédent. Revenons rapidement au composant d'accueil. La ligne de fin suivante est le composant « À propos de moi ». Et c'est un autre élément intéressant. C'est tellement beau. Lorsque vous survolez, vous voyez un bel effet de survol Tu peux voir cette belle animation ? Les développeurs du front end tuent, du back-end, etc. Vous pouvez également le modifier à l'aide ce bouton situé juste à côté de la carte. Jetez-y un coup d'œil. Cela fait, passons à la composante témoignage Vous pouvez également utiliser la souris pour faire glisser le témoignage. Enfin, nous avons le composant de pied de page. Dans le coin inférieur droit de l'écran, vous allez voir le bouton C to action. Lorsque je clique, cela passe au composant d'accueil. Et maintenant, je suis sur le point de présenter l'une des fonctionnalités les plus importantes du site Web du portfolio , à savoir la page HaM. Lorsque vous cliquez sur HiAme, la page HaE s'ouvre Et nous avons ici ce bel article. Nous avons également les cartes indiquant votre adresse, votre numéro de téléphone, votre e-mail et vos heures d'ouverture. Maintenant, lorsque je clique sur le formulaire de contact, il passe en douceur à la section du formulaire de contact Jetez-y un coup d'œil. Parfait. Commençons maintenant par cliquer sur le bot envoyé. Lorsque vous cliquez sur le message d'accueil envoyé, il vous sera demandé de remplir les champs correspondant au nom, D. Pour l'e-mail, David at tm com. Pour le numéro, je vais juste taper un nombre aléatoire. Pour le sujet, je dirais, tester le site Web. Maintenant, ce que je vais faire c'est donc, permettez-moi de vous ramener rapidement dans ma boîte de réception pour plus de clarté. Ici, je vais devoir recharger à nouveau car je veux que tout apparaisse transparent Maintenant, voyez-vous, je n'ai rien dans ma boîte de réception. Pas de nouveau message. Retournez sur le site Web. Essayons-le en cliquant sur le bouton d'envoi. Je clique. Il commence à se charger. Pouvez-vous voir cette barre de chargement ici ? Le message a été envoyé avec succès. Merci d'avoir contacté une barre D. Revenons à la boîte de réception et voyons ce que nous avons. Maintenant, je clique pour ouvrir. Voici donc le message de David. Dites-moi, ça n'a pas l'air bien ? Bien sûr, c'est le cas. Bien sûr, vous pouvez répondre David en cliquant sur le bouton de réponse ici et la conversation peut continuer. Testons rapidement l' application sur un appareil mobile. Tu vois, c'est magnifique. Vous pouvez cliquer sur le service pour ouvrir le contenu des services ici, l'entreprise, le lien Heartful, et tous ces conseils, vous allez apprendre à les faire à partir de zéro Bouchon vissé, ouvrez le tiroir de navigation. Rentrons chez nous. Jetez-y un coup d'œil. C' est super incroyable. C'est bon. Et lorsque vous cliquez sur le bouton C pour agir, Boom. Magnifique. Vous pouvez télécharger votre somme si vous le souhaitez. Tu peux le voir ? Il vous suffit de le télécharger dès maintenant. Vous pouvez faire défiler l'écran en douceur jusqu'au composant du portefeuille, et vous pouvez le consulter ici. C'est bon. Une fois cela fait, vérifions-le sur un appareil iPad. Tu peux voir ? C'est tellement beau. C'est magnifique. Vous pouvez cliquer pour ouvrir. Peut toucher le nid, le nid, etc. Je peux rentrer chez moi. J'ai inclus le lien vers le site de démonstration, juste dans la description. Tout simplement parce que je veux aussi que vous ayez l'expérience voir à quel point le site est rapide et beau. En effet, tu mérites d'être vu. 27. Installation de Nodejs. Installation de code vs installation. Installer une extension de code Vs: Démarrez avec le site Web ultime de la gamme Next GS. Dans cette section du cours, nous allons effectuer certaines installations nécessaires pour démarrer. Commençons par discuter des versions des nœuds. Il est clair qu' avant d'installer, réagir ou de passer à GS, vous devez avoir installé le nœud GS sur votre machine. Le conseil que je vous donne est simple. Awats, assurez-vous de télécharger et installer la dernière version stable Tu vois ce type ici. Il n'est pas fait pour vous et moi. La raison en est qu'il comporte des complexités supplémentaires que vous ne serez peut-être pas en mesure de gérer Alors, téléchargeons et installons rapidement la dernière version stable. Cliquez, nous sommes déjà en train de télécharger, et voilà. Cliquez. Continuons. Vous devez passer en revue toutes les étapes si vous avez le temps. Mais pour moi, je dois juste continuer. Alors je suis d'accord. Continuez à appuyer sur le tableau d'installation. Bien sûr, si vous êtes Mac, vous devez vous connecter. Cliquez sur Installer un canapé. Installation réussie. Ouvrez le terminal. Dans le terminal, nous devons vérifier et nous assurer que nous avons installé le nœud. Ce que je vais faire, c'est le nœud V. Cela affichera en fait la version du nœud que nous venons d'installer. Appuie sur la touche. Nous avons maintenant la version 18.17 0.0 du nœud. Ferme-le. La prochaine étape consiste à installer un éditeur de code, et l'éditeur de code que je vais utiliser dans le cours est le code VS. N'hésitez pas à utiliser l' éditeur de code de votre choix. Mais pour moi, le code VS est toujours mon préféré. En fonction du système d'exploitation avec lequel vous travaillez. Cliquez sur cette flèche, puis installez pour MAC Windows ou Lines. Ici, je travaille sur Mac OS. Je dois juste le télécharger pour MAC. Je l'ai déjà installé, donc je n'ai plus besoin de le faire. Il vous suffit de télécharger et d' installer le code VS. Cela fait, ouvrons rapidement le code Vs. Il. Maximiser. Nous avons maintenant terminé d'installer le code VS. Allons-y pour installer le branchement nécessaire qui sera utile à l'avenir. C'est extrêmement important. Ouvrez l'extension. W dans le set box, nous allons régler pour. Extrait de redock React Reactinative React. Le voici. Vous devez cliquer pour installer. Il s'agit d'un raccourci qui nous aidera à générer un bout de code. Nous n'avons donc pas à taper toutes ces informations à partir de zéro. Ne vous inquiétez pas, vous en comprendrez certainement l'essentiel à l'avenir. Je n'ai pas installé celui-ci, fermez-le. Encore une fois, nous allons installer Pi. Cliquez pour ouvrir puis installer. En gros, Predia vous aidera à formater votre code pour obtenir des indentations appropriées Maintenant que l' installation est terminée, fermez-la. Et bien sûr, certains d'entre vous sont curieux de connaître le thème VS code que j'utilise. Ne t'inquiète pas. Je vais certainement partager avec vous. Encore une fois, dans la boîte à carex, nous allons le préparer pour vous Cliquez pour ouvrir. Je l'ai déjà installé sur mon code VS, alors assurez-vous de l' installer de votre côté. Ensuite, le thème réel que j'utilise. Permettez-moi de vous montrer, cliquez sur Définir le thème de couleur. J'utilise U D. Voilà, vous pouvez donc décider d'utiliser n'importe lequel de ces thèmes ici. Ils sont tous fantastiques. Auparavant, j' utilisais U mirage. Mais maintenant j'utilise UDC. Assurez-vous donc d' installer tous ces connecteurs, car cela vous sera extrêmement utile à l'avenir. Cela fait, passons à la prochaine conférence où nous allons procéder à l'installation suivante. Rendez-vous lors de la prochaine conférence. Restez concentré et prenez toujours soin de vous. 28. Nextjs 13 installations: Dans cette conférence, nous allons procéder à l'installation du prochain S. Avant de procéder à l'installation suivante de S. Assurez-vous de redémarrer votre code VS. La raison en est que lors de la conférence précédente, nous avons téléchargé des plugins. Pour que ces plugins fonctionnent, vous devez redémarrer votre code VS, et c'est ce que j'ai fait de mon côté. Une fois cela fait, créez rapidement un dossier directement sur le bureau. Cliquez sur Nouveau dossier. Je vais appeler ce dossier. Portefeuille. Glissez et déposez ce dossier vers le bas dans le code Vs. Quittez le travail sur la page. Maximisez le code VS, contrôlez la tactique pour ouvrir le terminal intégré au code VS Ou vous pouvez aller au terminal Mw supérieur , au nouveau terminal, puis ce type sera ouvert. Nous devons maintenant procéder à l'installation. Je vais donc faire Px, créer. Ensuite, donnez-lui un espace s. Ce gars ici va pointer vers le répertoire portfolio, et le prochain S sera installé dans le répertoire portfolio. Appuyez sur la touche Entrée pour le faire démarrer. Ici, il est dit, aimeriez-vous utiliser un script de type ? Non, nous n' utilisons pas de script de type. Souhaitez-vous utiliser les liens « yes » ? T. Vent. Ouaip. Vous pouvez utiliser la flèche gauche ou droite pour passer du mode « oui » au « non ». Souhaitez-vous utiliser le répertoire des sources ? Ouaip. Vous souhaitez utiliser un routeur ? Ouaip. Ensuite, il est dit : aimeriez-vous personnaliser les alarmes d'importation habiles ? Je vais dire oui. Après cela, appuyez sur la touche Entrée pour le démarrer. L'installation est en cours. Cela prendrait certainement un certain temps. Je dois juste faire avancer la conférence rapidement. Prochaine installation, succès. Nous allons maintenant exécuter le serveur. PM. Exécutez D. C'est le boom de la touche Entrée. Maintenant, le serveur sera ouvert sur le port Localhost 3 000. Le voici. Vous cliquez sur le lien pour effectuer un suivi, et le voici. Voici à quoi ressemble l'application Deft next S. Nettoyons le code. Retournez au code VS. Ouvrez la page SRC. Démontons le terminal. Je vais faire le Common B pour fermer l'explorateur. Soulignons à partir de la ligne 62 les lignes 110. Je ne les ai pas tous soulignés. Il suffit de l'essuyer. Sûr. De plus, nous ne voulons pas utiliser ce type ici. Vous êtes sûr, retournez dans le navigateur. Rien ne s'affiche sur le navigateur. Commun B pour ouvrir l'explorateur. Nous devons mettre de l'ordre dans le CSS global. Cliquez sur bn, sélectionnez entre les lignes 5 et la fin. Essuyez-le. Sauvegardez sur le navigateur, le voici. C'est désactivé pour le moment. Lors de la prochaine conférence, nous effectuerons les réglages nécessaires. Rendez-vous lors de la prochaine conférence. Restez concentré et prenez soin de vous. 29. Importer et paramètres: En gros, je veux que chacun d' entre nous atteigne exactement le même résultat. En termes de police, images, y compris de style. Ouvrez les ressources du portefeuille. De votre côté, les ressources du portefeuille seront placées en dessous de cette conférence. Ouvrez les ressources du portefeuille. Voici maintenant certains des actifs que nous allons utiliser, y compris les données Ouvrez rapidement les images du portfolio. Voici les images et les fonds que nous allons utiliser. Lorsque vous ouvrez le répertoire des polices, nous avons tous les rects que nous voulons utiliser. Magnifique. Ouvrez maintenant le répertoire du portefeuille. Ouvrez le public. Ce que nous allons faire, c'est tout mettre en évidence ici, cliquer avec le bouton droit de la souris, copier. Viens ici et colle. Nous devons remplacer, et nous devons également remplacer. Ce ne sont que les deux articles que nous avons remplacés. Le SVG suivant et le svg du navire. Nous avons fini d'importer les images et les polices. Il y a encore une chose que nous allons faire. Fermez ça. Retournez aux ressources du portefeuille. Ouvrez dans le répertoire suivant. Nous avons maintenant le Google Fund. Retournez à VS Code. Ouvrez le module suivant. Faites défiler l'écran vers le bas, et vous verrez à la prochaine ouverture. Minimisons le code VS. Ce que je vais faire, c'est faire glisser cette police directement dans le répertoire suivant. Maximiser. Tu peux voir ? Parfait. Cela fait, cela fait toujours partie des ressources du portefeuille. Ouvrez les ressources de code à MD. Nous allons copier l'étoile mondiale. Arrêtez-vous à la ligne 72. R cliquez sur Copier. Retournez au code VS. Nous devons également fermer le module de nœud. Juste dans le SRC, vous allez trouver le CSS global Cliquez pour ouvrir, commandez V pour coller. C'est le style global que nous allons utiliser tout au long du processus. Bien sûr, ce gars est responsable de la coche bleue lorsque vous cliquez sur le lien dans l'en-tête Ceci est responsable du défilement fluide. Vous n'avez donc pas à vous soucier de tout cela pour le moment. Cela sera expliqué avec soin à l'avenir. So Safe, ferme-le. Une autre chose que nous allons faire est de mettre en place les fonds Google. Steel in the code resources do MD, faites défiler la page vers le bas. Nous devons copier le contenu. Retournez au code VS. Ouvrez le point de mise en page S. Nous ne voulons pas utiliser les fonds intermédiaires. Nous allons importer des fonds locaux depuis at nest slash font slash, Ce type n'est plus nécessaire. Essuyez-le. Et maintenant, nous allons coller. Cela fait, nous devons synchroniser tous ces fonds avec le projet. Donc ici, supprimez l'inter, puis nous allons faire des pop. OK. Tout est cool. Alors, mes amis, assurez-vous d'importer correctement tous les éléments. 30. Structure du projet: Application construite avec next S et React selon l'approche architecturale basée sur les composants, ce qui implique simplement que les composants sont l'un des éléments de base de chaque application React Dans cette conférence, nous allons définir la structure de notre projet suivant les meilleures pratiques. À l'écran se trouve le composant d'accueil. En haut, nous avons le composant d'en-tête. Lorsque vous faites défiler la page vers le bas, nous avons également le composant «   œuvres récentes ». Il y a quelque chose que je voudrais vous montrer ici. Au sein de ces composants, lorsque vous cliquez sur l'une de ces cartes, laissez-moi vous montrer. Il va transmettre les données correspondantes dans une nouvelle page Nous pouvons dire que nous avons une page Portfoli Datos, ou vous pouvez l'appeler une page de publication unique Cela nous ouvrira les yeux sur un système de routage dynamique dans les années à venir. Rentre chez toi. Nous avons déjà le volet « travaux récents ». Nous avons maintenant le composant «   À propos de moi ». Nous avons le volet témoignage. Enfin, nous avons le composant de pied de page. Lorsque vous observez le coin inférieur droit de l'écran, vous verrez la voiture entrer en action se percuter, et c'est également un composant Nous pouvons en faire un composant réutilisable à l'avenir. Lorsque je clique sur le bouton de la voiture pour passer à l'action, le défilement se fait en douceur jusqu' au composant d'accueil Le voici. Magnifique. Et quand je clique sur H i am, cela ouvre également une nouvelle page. Nous pouvons donc dire que nous avons deux pages différentes dans cette application, et nous avons vu combien de composants nous avons ici. Le composant d'en-tête est un, puis le composant d'accueil est deux, trois, quatre, cinq, six. Dans le coin inférieur droit de l'écran, nous avons le composant d'action du panier. Maintenant, dans le coin supérieur gauche de l'écran, nous avons le composant de dessin en diagonale. Les composants de dessin en diagonale se trouvent également dans les composants d'en-tête. Cela dit, passons à la création des dossiers correspondants qui seront mappés à ces composants. Ouvrez le SRC, directement dans le répertoire de l'application, cliquez avec le bouton droit de la souris sur un nouveau dossier, et nous l' appellerons composants Dans les composants, cliquez avec le bouton droit de la souris sur nouveau dossier. Nous allons créer le répertoire d'en-tête pour le composant d'en-tête. Gagnez les composants, nous avons le composant d'origine. Encore une fois, cliquez avec le bouton droit de la souris, nouveau dossier. Nous avons l'Abt M, nous avons la carte coulissante, et la carte coulissante correspondra au composant du portefeuille Laisse-moi te montrer. C'est la composante du portefeuille, donc tout ce qu'il y a ici. Bien. Encore une fois, nous sommes dans les composants. Nouveau composant de contact. Nous allons avoir le composant Corto Action. Laisse-moi te montrer. Dans le coin inférieur droit de l'écran, vous allez voir le corto action se percuter. Lorsque je clique sur ce bouton, le défilement vers le composant d'accueil se fait en douceur , et le voici. Magnifique. Lorsque vous faites défiler la page vers le bas, le bouton apparaît. Enfin, nous allons avoir le composant f. 31. Mise en page à la maison: Bon retour en classe. Dans cette conférence, nous allons concevoir le composant domestique. Ouvrez rapidement le composant et dans ce répertoire, cliquez avec le bouton droit de la souris sur un nouveau fichier. Nous allons créer un composant appelé home component point gs. Si vous avez l'extrait React Native React Redox React, lorsque vous utilisez RR of C, vous devriez être en mesure de générer Magnifique. Ceci fait, affichons rapidement le composant dans la page parent, et voici la page parent. Cliquez pour ouvrir. Juste en haut. Nous devons importer le composant home depuis le composant home component. C'est simple. Ensuite, nous devons le rendre ici. Sf. Voyons ce qui se passe dans le navigateur, et voici le composant d'accueil. Magnifique. Passons à la conception du composant domestique. Commun B pour fermer l'explorateur. Nous n'allons pas utiliser un parent simplement parce que nous ne voulons pas de nœud supplémentaire dans notre arbre. Essuyez-le. Ce que nous allons utiliser, c'est un fragment de réaction. Bien. Gagnez le fragment, nous allons avoir un dv, lui donner un identifiant, home, fermer le df Créons la mise en page. Ici, nous allons avoir une version obsolète en ligne. Le dégradé linéaire de l'image d'arrière-plan. Nous voulons le faire pivoter de 62 degrés et la couleur à partir de la gauche sera de zéro à 50 %. Mets-toi dans le coma ici. Nous allons lui donner une hauteur minimale de 500 pixels. Séparez-le par une virgule, la hauteur maximale sera de 1 200 pixels. Il faut le séparer du coma. Spécifiez la hauteur réelle, hauteur sera de 100 %, la largeur de 100 %. Lorsque vous sauvegardez dans le navigateur, le voici. Magnifique. 32. Design d'articles pour la maison: Lors de la conférence précédente, nous avons réussi à configurer la mise en page. Dans cette conférence, nous allons procéder à la conception. Où dans le code VS, la première chose que nous allons faire est d'importer la police arrière Je vais faire de l'import. Il s'agit d'une exportation nommée. Nous allons faire un indice à partir de la prochaine barre oblique de Google. Alors je vais faire const int equ, Hind. Nous sommes dans l'objet, nous allons avoir le sous-ensemble. Nous allons avoir le latin, séparé par une virgule Oups. OK. Bien. Le quoi 300400500600, et enfin, 700 Oups. Jette un coup d'œil. C'est bon. Nous avons terminé de configurer la police. Passons à la conception. Ici, nous allons avoir un d, lui donner un nom de classe. Nous voulons que ce dv soit responsive sur toutes les plateformes. Pour cela, nous allons en faire un container. Ensuite, imaginez, nous allons le mettre en mode automatique. Bien entendu, si vous voulez voir l'équivalent CSS, il vous suffit de survoler la classe utilitaire R W dans l'intellisens. Vous allez voir l'équivalent en CSS. Si de votre côté, vous n'avez pas l'intellisens, il vous reste plus qu'à ouvrir l' Cliquez ensuite sur les extensions. W dans le champ de recherche, vous allez rechercher tail wind intellisens Et voilà. Je l'ai déjà installé. De votre côté, il vous suffit d' appuyer sur le bouton d'installation. Comme vous pouvez le voir ici, le bouton installé est désactivé. C'est pourquoi vous pouvez le voir désinstallé. Installez les capteurs Tail Wind Intellisens et amusons-nous ensemble Ferme-le. Assurez-vous également de le faire en toute sécurité. Fermons l'explorateur. Nous allons avoir un autre df, donnez-lui un nom de classe. Nous allons l'avoir sous forme de grille d'affichage. La colonne du modèle de grille est 12. Nous allons maintenant avoir un autre df, nom de classe. Réglons le blanc comme couleur d'arrière-plan. Nous allons lui faire afficher la flexion, direction du flex est une colonne. Justifiez le contenu, au centre. La colonne du modèle de grille est 12. Stylisons-le sur un appareil de taille moyenne. Sur un appareil de taille moyenne, la colonne du modèle de grille est de cinq. Enfin, pour ce D sur appareil de taille moyenne, nous voulons que l'arrière-plan soit transparent. Soyez transparent. Ferme-le. Bien. Formatons rapidement le code pour obtenir une indentation correcte. Clic droit. Formatez la largeur du document. Priya. Tu peux voir ? Parfait. J'adore ça. Quand est-ce que Deve ? Allons-nous en avoir une autre ? La marge sera de. Avec cela, tout ce que nous avons dans ce df sera centré. Avec cela, le df sera réactif sur toutes les plateformes. Enseigner c'est bien, c'est beau. Un autre pdf. Sur un grand appareil, le rembourrage restant sera de 24, ce qui, dans les équivalents CSS réels, sera de six m. Sur un petit appareil, le rembourrage restant est de dix. le rembourrage Le rembourrage restant sera donc nul. Le rembourrage en haut et en bas du rembourrage est de 20. Sur les appareils de taille moyenne, payez zéro. Le haut du rembourrage et le bas du rembourrage seront nuls. De plus, sur les appareils de taille moyenne, le test va aligner le départ. Nous devons également l' aligner au centre. Bien. Nous allons maintenant avoir un tag P. Laisse-moi te montrer. Voici la balise P ici , l'identifiant D. Dans le code HTML interne, je vais le faire. Donnez-lui un nom de classe. Mais maintenant, nous allons utiliser l'interpolation de chaînes de caractères. Ouvrez et fermez le co-support, à l'intérieur du support C, ouvrez et fermez la case arrière. Et d'ailleurs, la touche B est située dans le coin supérieur gauche du clavier, juste en dessous de la touche d'échappement. Ici, il va falloir tester. La couleur du test sera le bleu clair. Nous allons avoir 47 A EDE. Disons, jetez-y un coup d'œil et le voici. Magnifique. Dans T wind Css, chaque fois que vous souhaitez implémenter un style personnalisé, vous suffit d'ouvrir et de fermer le crochet, puis de faire ce que vous voulez à l'intérieur du crochet. Testez Excel. Cela correspondra à la taille de police et à la hauteur des lignes. Sur les appareils de taille moyenne, testez d b. Sur les appareils de grande taille, le test se fera en texte deux Excel. Lorsque vous enregistrez sur le navigateur, c'est bien. Tu peux voir ? Mais le problème , c'est que nous ne voulons pas utiliser cette police. Pour cela, nous allons avoir la police ici. Je vais faire le nom de la classe Hind Point. Lorsque vous sauvegardez, vérifiez-le dans le navigateur et boum. Quelque chose a changé. J'adore ça. Maintenant, voici la ligne de nidification. Nous allons l' implémenter avec le tag hedge one. Après le tag P de fermeture, nous allons en avoir un de couverture. Donnons un nom de classe à cette haie. Spécifiez la couleur du test. La police sera recta black. La taille du test. Faisons en sorte qu'il excelle à cinq. Sur un appareil de taille moyenne, la taille de police sera de cinq Excel. Sur un appareil de grande taille, la police sera sept Excel. Sur un appareil de très grande taille. Le test va également porter sur du texte, sept Excel. La marge tb sera de cinq. Sur les appareils de taille moyenne, la marge tb sera de trois. Ce que nous allons faire dans le tag He one, je suis un H six. Lorsque vous sauvegardez, jetez-y un coup d'œil et tombez. Magnifique. Après le tag He one, nous allons avoir un tag H two. Nous allons le faire pour avoir le panneau ND et un instructeur. C'est le résultat pour le moment. Vérifions-le sur appareil mobile. Jette un coup d'œil. Il est extrêmement réactif sur toutes les plateformes. Magnifique. Revenons rapidement au code. Donnons le h au nom d'une classe. La couleur de test sera exactement la même ici. Copiez et collez. Mettre le haut et tapoter le bas seront deux La police sera en gras, puis nous allons la transformer ou lui apporter des avantages. Sur les appareils de taille moyenne. Le test sera x l, donc la hauteur de ligne et la taille de la police seront de 1,25 RAM Je pense que c'est tout pour le tag H two. Une autre chose que nous allons faire est d'utiliser l'interpolation de chaînes Juste comme ça. Alors bati bati Gagne le bati, il faut copier ces polices, les surligner et les coller Lorsque vous économisez sur le navigateur, nous avons ce complexe. J'adore tout. La ligne suivante consiste à implémenter les Butings. Pour implémenter les batings, nous allons utiliser le tag A. Après la balise H two de fermeture, nous allons avoir une balise A. Mais dans le tag A, nous allons réaliser des projets. Donnons le nom de la classe. Cette fois-ci, nous allons utiliser l'interpolation par chaînes en raison des fonds que nous avons Nous allons l' avoir dans un bloc de ligne, le bground, nous allons utiliser cet arrière-plan Transférez tout. La durée de la transaction, 300, et l'animation va entrer et sortir. Nous voulons que les bordures du boulonnage soient un peu courbes Je vais faire un Excel arrondi. Le test au sein du boulonnage va être l'esprit. En mettant le haut et en séparant le bas, il y en aura trois. De plus, en tapotant à gauche et en se séparant à droite, il y en aura cinq Maintenant, quand vous regardez le botm, vous avez quelque chose de beau comme celui-ci J'aime bien ça. C'est bon. Nous faisons des progrès. Je viens de remarquer quelque chose. Je n'aime pas la courbure des bordures. Alors revenons ici. Le G arrondi fera en sorte qu'il soit arrondi G. Le G arrondi fera en sorte que le rayon de la bordure soit de 0,5 bélier. Lorsque vous enregistrez dans le navigateur, c'est exactement le résultat attendu. La police sera bod, marge en haut, faisons-la huit Nous allons le faire transformer ou emballer. Le voici. Encore une fois, stylisons-le rapidement sur les appareils mobiles Sur les appareils de taille moyenne, le bas et le haut du rembourrage seront constitués de deux grands appareils, P trois plus, pour les gros appareils, le rembourrage à gauche et le rembourrage à droite, seront au Réduisons la taille du test sur les appareils médians. Testez ta, Excel et un appareil de grande taille. Balise de texte B. Je pense que nous en avons fini avec la réactivité mobile pour le botin. Encore une chose. Sur les appareils de taille moyenne, la marge supérieure sera de cinq. Sur les appareils de très grande taille, la marge supérieure sera de dix. Enfin, nous devons également utiliser ce fonds. Ce fonds. Copiez, venez ici et collez , en toute sécurité, et voilà. Maintenant, lorsque vous placez le pointeur sur le botin, rien ne se passe. Implémentons rapidement l'effet de survol. Lorsque vous passez le curseur sur le bas, nous voulons changer l'arrière-plan Nous allons faire BG. Ou un Hova va Column Shadow de LG Sur Hova, traduisez Y un. Je pense que tout cela est dû à l'effet Hova. Lorsque vous enregistrez dans le navigateur, jetez un œil. Tu vois, j'adore ça. Lorsque vous avez Hva, vous voyez ce bel effet. Maintenant, nous allons mettre en surbrillance la balise A, puis la dupliquer, ou vous pouvez surligner le copier-coller. Maintenant, modifions-les pour mon CV. Bien entendu, la couleur d'arrière-plan permet de changer la couleur d'arrière-plan. Alors voilà, nous devons également changer la couleur de fond. Modifions-le en bleu clair. Parce que lorsque vous sauvegardez et consultez le navigateur, vous vous rendrez compte que ce type est noir, n'est-ce pas ? Et encore une chose, il n'y a pas d'espace entre ces deux boutons. Donc, ce que je vais faire ici, c'est venir et ensuite faire Mag à gauche, dix heures. Le ML que j'aime tant est celui des messages Bs. Un droit. Je parle trop. Lorsque vous enregistrez et que vous entendez le. Maintenant, il y a de l'espace entre les matraques. Spécifiez que le curseur doit être pointeur. C tu économises. Vérifiez-le. Bien. Vous voyez maintenant cette belle main pointant le CV. Copie. Viens ici. Et collez. Enregistrer. Implémentons maintenant la fonctionnalité de reprise du téléchargement. Gagnez la balise A, nous allons spécifier la référence hypotexte HDF, je vais faire un CV au format PDF à points. Nous voulons qu'il soit téléchargeable. Je vais télécharger equ. Lorsque le CV est en cours de téléchargement, nous voulons afficher ce nom , puis le nom du CV PDF. CF, allons-y. C'est beau, tu vois ? Et c'est lui. Parfait. J'adore chaque détail. À n'importe quel stade du projet. Nous allons mettre en œuvre le HRF. Il indique equ, le signe de la livre, puis le portfolio. Parce que lorsque nous cliquons sur ce bouton, nous voulons être dirigés vers le composant du portefeuille. Pour l'instant, nous n'avons pas le volet portefeuille. Mais à l'avenir, lorsque nous créerons le composant de portefeuille, nous allons définir l'identifiant du composant de portefeuille exactement comme le mot d'un portefeuille H. Ensuite, lorsque vous cliquez sur ce bouton, vous faites défiler l'écran en douceur jusqu' au composant du portefeuille. Après le déve final, la couleur de fond était le blanc, est-ce que Deve est ici. Nous allons implémenter l'image. Nous allons avoir un d, donnez-lui le nom de la classe. Dans le nom de la classe, nous allons appeler un span 12. Patent Top va l'être. Nous voulons spécifier un haut de rembourrage personnalisé. Faisons en sorte que ce soit un pixel, et ce sera sur un appareil de taille moyenne. Rembourrage supérieur à 50 pixels. Sur un appareil de taille moyenne, nous voulons que la couleur de fond de l'image soit transparente. La couleur de fond de la barre sera bleu plus clair. Fermons le D. Faisons en sorte qu'il soit réactif sur les plateformes mobiles. Sur un appareil médian, la durée des appels est de sept. Où le D, nous allons avoir un autre D. Spécifiez le nom de la classe. Faisons-en un conteneur afin qu'il soit réactif sur nos plateformes. Ensuite, la marge sera automatique. Où le DF, nous allons appeler l'image. IMG, SRC, equ, barre oblique, un point Psi PNG D'ailleurs, tous les arrêts se trouvent ici même dans le répertoire public. Rappelons que nous l'avons importé lors de la conférence précédente. Voici mon CV. Voici quelques-unes des images que nous allons utiliser. Vous pouvez l'ouvrir puis le vérifier de votre côté. Fermons-le. Lorsque vous sauvegardez dans le navigateur, le voici. N'est-ce pas magnifique ? Faisons les réglages nécessaires pour l'image. C'est le codage, nous allons en faire une synchronisation. Si le lien vers l'image est mauvais, nous devons afficher quelque chose. Je vais faire ici des tartes de profil. Cliquez avec le bouton droit sur le format du document avec Pred Le code est extrêmement beau Lorsque vous sauvegardez, c' est le résultat final. Vérifions-le sur appareil mobile. C'est bon. Les gars, ça a l'air bien. Honnêtement, ça a l'air bien. Jette un coup d'œil. Sur iPad. Oh, mon Dieu. C'est magnifique. J'adore ça. Après avoir fait cela. Dans la prochaine conférence, nous passerons à la mise en œuvre de la boîte oblique. Rendez-vous lors de la prochaine conférence. 33. Implémentation du curseur: Allons-y pour implémenter la boîte oblique. Avant de procéder, nous devons effectuer certaines installations nécessaires. Gagnez le terminal contre C pour arrêter le serveur en cours d'exécution Nous allons installer MPM, Slick, React, Slick , puis nous allons également installer Slick Coser Appuyez sur la touche Entrée pour allumer le feu. Et assurez-vous que votre connexion Internet est activée. Installation réussie. Réduisons-le un peu. Faites défiler le haut. Nous allons maintenant apporter les contributions nécessaires. Nous allons utiliser Slick Crus Slash, Slick Slash, Slick Slash Un autre, nous allons mettre Slick Carer Slash Slick Slash, Slick Them Dot CSS mettre Slick Carer Slash Slick Slash, Slick Them Dot CSS. Enfin, nous allons importer le slider depuis React Slick. est aussi simple que ça. Ceci fait, copions rapidement les paramètres du curseur. Ouvrez le point de ressource de code MD. Surlignez, copiez, revenez au code FS, et dans le composant, nous allons coller. Permettez-moi de vous expliquer rapidement. Faites défiler l'écran vers le haut. Ici, nous avons un réglage verbal, et dans l'objet, nous définissons l'infini comme vrai. Il y en aura six pour le diaporama. La diapositive à faire défiler est d'une, et la vitesse est de 2 secondes. Flèches, nous l'avons réglé sur fs, Autoplay sera vrai Et puis la vitesse de lecture automatique est de 2 secondes. Ensuite, nous avons la boucle, nous la réglons sur vérité, puis le CSS est linéaire. Après avoir fait tout cela, nous voulons également qu'il soit réactif sur toutes les plateformes. Au point de rupture de 17 60, nous devons réinitialiser le curseur La diapositive à afficher est six, diapositive à faire défiler est une, l' infini est défini sur vrai et les points sont définis sur Force. À un point de rupture de 60, nous devons également réinitialiser les paramètres, mais dans ce cas, je pense que c'est exactement la même chose avec 17 60. Et ainsi de suite. Et voici la diapositive à montrer au nombre de quatre. curseur pour faire défiler est un, et l'infini et le point sont définis sur vrai et faux. Donc continuellement et ainsi de suite. Je n'ai pas configuré le carrousel. La ligne d'imbrication consiste à implémenter les éléments eux-mêmes. Faites défiler vers le bas. Juste en dessous, nous allons avoir un autre d, vous donner le nom de la classe. Faisons en sorte qu'il soit réactif sur notre plateforme. La marge sera de. Nous allons avoir sa position absolue. Nous allons maintenant avoir un autre df. Nom de la classe, P x trois. Cela implique que le rembourrage à gauche et à droite est de 0,75. Fermez-le, juste sous d, nous allons avoir un autre d, donnez-lui un nom de classe. Nous allons avoir une position relative. Le maxi max S n. Puis le bas. En bas, nous devons spécifier un séjour personnalisé. Faisons en 70 pixels. Sur les appareils de taille moyenne, MD , colonne, Max, cinq Excel. Sur des appareils de très grande taille. Nous allons l' avoir Max W six cellules. Padin à gauche et à droite va être quatre. Faisons en sorte que ce soit cinq. Mais sur un gros appareil, nous voulons que ce soit le Px 14. Overflow, va être automatique x automatique. La marge gauche-droite est automatique. Encore une fois, précisons le BG, qui est l' arrière-plan. BG blanc. Je vais donc faire arrondi d dans Excel. Nous voulons que le coin du coffre à skis soit un peu sinueux Et l'indice z sera de 20. C'est bon. Fermez le moteur. Dans cette annonce, nous allons avoir les objets. Lancez l'application pour voir le reste. C'est bon. Ce que nous allons faire maintenant, c'est le faire. Veuillez commenter la saisie, la saisie du slider Toujours dans le Steve. Nous allons utiliser le style en ligne. Style. Spécifiez l'ombre de la boîte. 25 pixels, 50 pixels et dix pixels vers la droite. Nous définissons simplement l'ombre de la boîte sur tout le pourtour de la gauche vers la droite, de haut en bas. Lorsque vous sauvegardez et que nous verrons, d'accord. Ça sort un peu. Mettons-y quelque chose pour que tu puisses le voir. Maintenant, nous allons avoir un autre d, vous donnera le nom de la classe. Nous voulons que le haut et le bas de la raie soient au nombre de dix. Sur un appareil de taille moyenne, le fait le haut et le bas seront de six, sur un appareil plus petit, de six PY Cross, un papa corbeau. Magnifique. Je vais vous le montrer en médecin généraliste, donc vous n'avez pas à vous inquiéter à ce sujet. Maintenant, lorsque vous consultez le navigateur, le voici. La boîte oblique est prête. Et lorsque vous placez le pointeur sur la case oblique, vous vous rendrez compte que vos coûts vont changer Jette un coup d'œil. On dirait le signe de croix. Tu peux voir ? Bien. Cela est donc responsable du cours ou du changement. Très bien, alors allons-y rapidement pour afficher les éléments dans la case oblique. IMG, SRC, etc., barre oblique, Mongo DB D'ailleurs, nous avons importé toutes ces images lors de la conférence précédente. Ainsi, lorsque vous ouvrez le public, vous pouvez toujours voir toutes les images que nous avons utilisées ici. C'est bon. Fermons-le. T est égal à Mongo db. Donnons le nom de la classe afin de pouvoir la styliser En gros, ce que nous allons faire , c'est spécifier la hauteur. Fermez-le avec l'étiquette à fermeture automatique, surlignez-le , dupliquez-le six fois. Lorsque vous économisez sur le navigateur et les publicités. Ne vous inquiétez pas, nous allons tout mettre en place. Maintenant, nous allons le changer en Reacts PNG. Nous allons afficher les prochains g. Oups, j'aurais dû souligner celui-ci également. Suivant. Docteur PN. Nous allons donc avoir des acclamations express. Ici, nous allons avoir des notes. Faisons ici : exprimez-moi. Quand tu économises, et voici toutes les victimes. Oups. La note S ne s'affiche pas. Il y a quelque chose qui ne va pas là-bas. Il convient de noter le point J PNG. Vous devez spécifier le format de l'image. Nous sommes maintenant en mesure d' exposer les crânes. Faisons-le rapidement glisser. Faites défiler l'écran vers le haut. Nous allons faire l'éloge de ce qui est fait ici. SF, et pour les paramètres, nous devons maintenant appliquer tous ces paramètres. La façon dont nous procédons est en fait très simple. Win fait D. Faisons rapidement apparaître le curseur. Dans le slider, nous allons répartir les paramètres. Fermez-le, surlignez la balise de fermeture. Coupe-le. Viens ici, puis collez-le. Lorsque vous enregistrez dans le navigateur, oups. C'est quoi ce bordel ? Oh, mon Dieu. Selon lui, super expression doit être soit connue, soit fonctionnelle. Allons donc vers le haut. Laissez-moi vérifier le terminal. Module RO. Très bien, les gars, nous devons faire quelque chose dans les limites des points de page. Fermez le terminal. Ouvrez le point de page S. Tout simplement parce que nous affichons le composant d'accueil dans les pages. Nous devons passer du rendu côté serveur au rendu côté client Donc, au sommet, nous allons nous occuper de nos clients. Juste comme ça. Effacons ça. C'est bon. Encore une fois , passons au navigateur. Tu peux voir ? Tout fonctionne parfaitement comme prévu. C'est super incroyable. Génial. 34. Événement sur une fenêtre en défilement: Bon retour en classe. Dans cette conférence, nous allons continuer avec le composant d'en-tête. Rapidement, dans l'en-tête du répertoire. Nous allons créer un nouveau composant, header point JS. Code VS, commande B pour ouvrir l'explorateur. composant SRC. Et voici l'entête. Cliquez sur Nouveau fichier. Point d'en-tête S. Encore une fois, dans l'en-tête, créez un nouveau fichier. Points de tiroir diagonaux, G Enfin, le tiroir en diagonale C S. Beautiful. Fermez le fichier CSS. Fermez également le tiroir en diagonale. Nous allons maintenant faire une RFC pour générer le composant fonctionnel L'en-tête restera cohérent tout au long du projet. Nous devons donc le rendre dans la mise en page. Ouvrez la mise en page. Allons-y vite. en-têtes du composant de l'application point slash slash slash header slash header slash header Nous allons le présenter aux enfants. Ici, nous allons afficher l'en-tête. Et voilà. Tu vois très beau ? En gros, ce que nous allons faire dans cette conférence est d'obtenir la position initiale de l'application sur l'axe y. Faisons-le rapidement. Revenez au point s. Fermez l'explorateur. Laisse-moi zoomer un peu. Sympa. Tout d'abord, nous devons importer l'effet d'utilisation et le crochet utilisé. Pour cette raison, nous allons passer du rendu côté serveur au rendu côté client Nous allons faire le client. C'est aussi simple que ça. Placez une virgule juste ici, puis fermez le crochet. Nous allons importer l'effet d'utilisation. Californie. L'hameçon de l'État. Déclarons maintenant les variables d'état nécessaires à utiliser. Dans le composant, nous allons faire const selected index one, C set selected index one Equ, l'état, l' état initial va être nul. Encore une fois, nous allons ouvrir const. Le siège auto est ouvert, equ. L'état initial sera la force. Déclarons la variable d'état pour obtenir la position de l' application sur y xs. Nous allons avoir fixé le coût brut et l'état initial sera la force. Magnifique. Pour illustrer cet exemple. Il suffit de dupliquer les composants de la maison pour pouvoir les faire défiler. Ouvrons le point s. Composants de la page d' accueil. Je dois juste le dupliquer trois fois. Et je vous en prie, c'est par exemple du saké. Lorsque vous enregistrez, nous pouvons maintenant faire défiler l'application. Je veux juste te le démontrer pour que tu le comprennes bien. Revenez au code, fermez l'explorateur. L'idée est simple. Lorsque le décalage de l'application sur la page y est égal à zéro, nous voulons définir l'état initial sur force. Sinon, nous voulons définir l'état initial sur true, ce qui implique simplement. Viens ici. Maintenant, le décalage de l'application sur la page y est égal à zéro. Tu sais pourquoi ? C'est simplement parce que nous n'avons pas fait défiler l'application. Mais quand on fait défiler l' application comme ça, quand tu te trompes. Le décalage de l'application sur la page y sera supérieur à zéro. Pour cela, nous allons définir l'état initial sur true. En termes simples, lorsque vous bloquez l'application, nous voulons simplement mettre à jour son état. La raison en est de pouvoir donner un nom de classe à l'en-tête afin de le styliser de manière unique lorsque l'utilisateur bloque l'application Vous en comprendrez certainement l'essentiel après la mise en œuvre Ici, nous allons avoir un effet d'usage. Quel est l'effet d'usage ? Nous allons faire défiler la poignée. Nous allons avoir un défilement constant vers une fenêtre avec un point, une page et un décalage. Ou faites défiler les éléments du document T. Terminez-le par la demi-colonne. Et ici, nous devons mettre à jour l'état initial. Défini dans le deuxième défilement. Le défilement vers le haut est plus grand que là. Et ici, nous allons faire des points de fenêtre sur Event Litener. Parchemin, défilement géré. Cela fait, la ligne suivante consiste à nettoyer la fonction en supprimant le parchemin. Ici, nous allons avoir un retour. Point de fenêtre, supprimez l'écouteur d'événements. Poignée de défilement, défilement. Conditionnons rapidement l'effet d'utilisation en appliquant un tableau de dépendances vide. Ensuite, nous allons créer un journal des points de la console. Nous allons enregistrer un sc. Lorsque vous enregistrez l'application, utilisez un I commun pour ouvrir la console. Quand je me trompe. L'application sur Page y offset sera créditée à zéro Ensuite, nous mettrons à jour l'état initial sur true. Mais quand je décompose, le décalage de l'application sur la page y sera égal à zéro, puis l'état actuel sera mis à jour pour être forcé Compris. Magnifique. Alors faisons-le encore une fois. Détruis. Vérifiez-le sur la console. Vers le bas. Grâce à cela, nous pourrons styliser l'en-tête lorsque l' utilisateur fera défiler l'application Ceci fait, préparons-nous à concevoir les composants d'en-tête dans la prochaine leçon. À bientôt. 35. Implémenter pageYoffSet: Appliquons rapidement l'exemple. Mettons-le donc en œuvre ici. Nous allons effacer le d car nous ne voulons pas ajouter de nœuds supplémentaires à l'arborescence. Nous devons utiliser un fragment de points de réaction. Dans le fragment, nous allons avoir un en-tête. Maintenant, stylisons l'en-tête. Donnez-lui un nom de classe. Nous allons utiliser l'interpolation de chaînes de caractères. Nous allons ouvrir et fermer le support. Dans le support, spécifiez le numéro du sac. Nous allons dire que si scrode est défini sur true, nous allons afficher l'en-tête, sinon rien ne se passera Magnifique. Chaque fois que vous faites défiler l'application, nous voulons que l'en-tête reste fixé en haut. Nous allons avoir la position à fixer. À partir du haut, il y aura zéro car nous ne voulons aucun espace entre l' en-tête et l'axe Y. L'indice z sera de 50. Transférez tout. Ensuite, la durée augmentera de 500. Maintenant, nous allons en avoir un périmé. La couleur de fond. Nous voulons spécifier la couleur de fond de manière conditionnelle Nous allons le faire si le défilement est défini sur true, ce qui signifie que si l'utilisateur fait défiler l'application, nous voulons que la couleur de fond soit blanche. Sinon, nous ne voulons aucune couleur de fond. Nous voulons que ce soit transparent. Séparée avec le monoxyde de carbone, essuyez la colonne. Pour l'ombre de la boîte, nous voulons également spécifier l'ombre de la boîte de manière conditionnelle Si le défilement est défini sur true, ce qui signifie que lorsque l'utilisateur fait défiler l'application, nous allons avoir une ombre bleue tout autour de la tête Sinon, rien ne se passe. W dans le code HTML interne, nous allons juste avoir une balise H pour les articles pédagogiques. Je vais tester l'en-tête. C'est bon. Sauvegardez sur le navigateur, ici. Tu peux voir ? Maintenant, l'en-tête n' a plus d'arrière-plan. Mais lorsque l'utilisateur bousille l'application, la couleur d'arrière-plan de l'en-tête devient blanche, puis l' ombre de la boîte apparaît. Lorsque vous cliquez dessus, l'ombre de la boîte disparaît et la couleur d'arrière-plan disparaît également. Donc, quand je fais une erreur, pouvez-vous le voir, l' observer ici dans le coin supérieur gauche de l'écran. Tu vois ? OK, laisse-moi faire quelque chose. Donnons-lui un nom de classe, puis je vais créer un texte Excel sept. Cela rendra le texte très volumineux, et l'exemple sera alors plus facile à corriger. Lorsque je fais défiler l'écran vers le haut, le décalage de l'application sur la page y sera supérieur à zéro, puis l'état initial sera mis à jour sur true. Lorsque l'état initial est mis à jour à vrai, sur la base du vrai s, nous devons ensuite appliquer une couleur de fond b blanche à l'en-tête avec une ombre encadrée. Compris, magnifique. Maintenant, quand je fais défiler l'écran vers le bas, il disparaît. haut, l'en-tête par couleur de fond devient blanc et l' ombre de la boîte devient bleue. Tout fonctionne parfaitement comme prévu. Dans la prochaine conférence, nous commencerons à concevoir la tête. Rendez-vous lors de la prochaine conférence. Restez concentré et prenez toujours soin de vous. 36. Liens de navigation: Allons-y pour implémenter les liens de navigation, directement dans la tête. Mais avant de poursuivre, nous devons tout ramener à la normale. Viens ici. Essuyons une étiquette sur la tête. Retournez à la page pour applaudir. Nous devons effacer les doublons. Enregistrez dans le navigateur. Magnifique. OK. Revenons à l'entête, et là nous en aurons assez pour lui donner un style. Nous allons le rendre invisible. La visibilité va être masquée. Maintenant, sur un appareil très grand, nous allons le rendre visible. C'est également un appareil très grand, la largeur maximale étant celle d'Excel. Cela donnera la largeur maximale 56. À ce point de rupture, nous allons avoir une largeur de huit Rm. La marge à gauche et à droite sera automatique. Encore une fois, dans le novateur, nous allons avoir une ou plusieurs de ces listes Donnons-lui un style. Nous allons l'avoir Display Flex. La police sera co-noire. Oups. Le noir doit être sur la casquette comme ça. Rouleau d'étiquettes Flex. La direction de flexion est le roulis. Nous devons aligner les objets au centre. La hauteur sera de 24. Nous allons maintenant avoir le tag LI. Donnons-lui le style. Nous allons le regrouper. Le texte sera envoyé dans Excel, qui correspondra à la hauteur de la ligne et à la taille du formulaire. Nous allons avoir une position relative. La police va s'ennuyer. La marge droite. Faisons en sorte que ce soit 20. Sauvegardez sur le navigateur, rien ne se passe. Commençons maintenant à implémenter les liens. Ici, nous allons avoir un tag A. Nous allons donc rentrer chez nous. Maintenant, lorsque vous consultez le navigateur, vous allez voir la page d'accueil. Magnifique. H. Donnons-lui un style. Nom de la classe. Nous allons avoir un script Java entre les deux, alors utilisons l'interpolation de force Maintenant, nous voulons appliquer le style du menu. Elément de menu. Ne t'inquiète pas, je vais te montrer tout de suite. Ouvrez l'explorateur. Au sein du CSS global. Nous avons copié et collé les poêles ici. Et voici l'effet du menu. Donc, à partir de la gauche, -0,75 M, à partir du haut, l'indice Z, la hauteur avec le rayon de bordure, les couleurs et le reste Si l'index 1 sélectionné est égal à zéro, le test sera noir, sinon rien ne se passera. Maintenant, appliquons le test proprement dit. Je sais que cette partie est assez délicate, mais après la mise en œuvre, je vais l'expliquer simplement. La valeur de couleur sera 666 d47. Bien. La couverture du groupe, lorsque vous passez la souris dessus, le texte se transforme en blog Spécifiez la référence hypertexte. Il s'agit d'un pointeur vers le composant d'accueil. En cliquant sur ce lien, nous devons mettre à jour l'index sélectionné. Nous devrions le mettre à jour à zéro. Juste après le L, nous allons faire si l'indice 1 sélectionné est égal à zéro, alors nous allons faire quelque chose. Nous allons faire une pause ici. Donnons l'effet du menu Stay. Transformez, l' opacité le porte à 100. Nous allons le faire pivoter dans le sens négatif. Par conséquent, moins la rotation de 12, cela le fera pivoter vers l'angle négatif. Groupe. Nous devons également le faire pivoter. S. Il suffit de souligner la durée. Copiez, venez ici et collez. La différence est donc que cela va pivoter dans le sens positif. Il n'est pas nécessaire de le préfixer par le signe moins. Et je pense que c'est la seule chose que nous ayons à faire. Jetons un coup d' œil au navigateur. Maintenant, tu peux voir ? Il est mis en évidence. OK. Bien. Ce que nous devons faire maintenant, c'est mettre en évidence le tag LI et le dupliquer trois fois. Vous pouvez également copier-coller trois fois. Surlignez les lignes 38 à 50. Je vais le dupliquer trois fois. Parfait. Il s'agit donc du premier doublon. Maintenant, si l' index sélectionné est défini, un est égal à un. Mettez-le à jour en un, et cela nous mènera à la section du portfolio. Ça va être deux. Deux. Lorsque vous cliquez sur ce lien, nous voulons faire défiler la page jusqu' à la section À propos de moi À propos de moi component. Enfin, oups, les gars, j'en suis désolée. Écoutez, nous devons changer le code HTML interne. Ici, je vais faire un portfolio. Ici, je vais faire pour moi, ou tu peux faire pour Enfin, en voici trois. H. Trois. Nous allons exposer ami. Enregistrez l'application. Vérifiez-le dans le navigateur. Magnifique. Tu peux voir quand je pars ? Très bien, je ne suis donc pas totalement convaincu du résultat que nous avons obtenu. Car si vous observez bien, vous vous rendrez compte que les liens sont tous surlignés. Nous ne voulons pas qu'il en soit ainsi. Réparons-le donc dans les deux prochaines conférences. À bientôt. 37. Tiroir de navigation en tête Menu: Bienvenue chez Clouds. Dans cette section du cours, nous allons procéder à la conception du dessin en diagonale. Ouvrez le composant d'en-tête. Faites défiler l'écran vers le haut. Effacons rapidement le journal de la console. Ici, nous allons ouvrir le tiroir en permanence, le régler sur une fonction flèche. Gagnez, la fonction, nous allons mettre à jour est ouverte. Mettons-le à jour pour qu'il soit vrai. Rappelons que dans la conférence précédente, nous avons déclaré que la variable d'état était ouverte et que l'état initial était faux. Nous mettons donc maintenant à jour l'état directement dans cette fonction. Sympa. Faisons rapidement le rendu du tiroir. Ce que je vais faire d'abord, c' est l'importer en haut. Nous allons importer un tiroir à partir de Dot Slash, ils vont dessiner Donc, dans les fragments, nous allons avoir un div. Donnez le nom de la classe. Bien sûr, nous voulons utiliser l'interpolation de chaînes de caractères, afin de pouvoir écrire un script Java entre les deux Un dragon vers un tiroir. Si is open est défini sur true, nous aurons la classe is open, sinon rien ne se passera. Nous allons styliser ce cours à l'avenir. Fermons le D. Dans le D, nous devons afficher le tiroir. Fermez-le à l'aide de l'étiquette à fermeture automatique. Maintenant, nous allons faire c'est ouvert, c'est être égal à c'est ouvert. Le set est alors ouvert. Il va être réglé est ouvert. L'index 1 sélectionné sera égal à l'index 1 sélectionné. Enfin, définissez l'index sélectionné un, il sera défini l' index sélectionné un. Magnifique. Nous envoyons tous ces plateaux comme accessoires dans le tiroir. Maintenant que tout cela est fait, nous devons recevoir ces accessoires dans le tiroir. Ouvrez l'explorateur , puis Diagnodrad ou Chairs. Nous allons générer les composants fonctionnels. Juste à l'intérieur, nous devons déstructurer, c'est ouvert. Le kit Coma est ouvert. Cliquez sur la virgule pour sélectionner l'index un, puis définissez l'index sélectionné un. Je n'ai pas déstructuré tout ça. Revenons au composant d' en-tête. Ce que nous allons faire dans le composant d'en-tête est d'afficher le tiroir. Ici, nous allons avoir un d, vous donner un nom de classe. Nous allons connaître sa position relative. Dans ce d, nous allons avoir un autre d. L'indice Z sera de 30. Donnons sa position absolue. Les voitures vont servir de pointeur. La largeur est de 14. La hauteur est également de 14. Sur les gros appareils, la largeur, passons à 24. Colonne O G, H 24. La couleur bagrond, nous allons avoir notre propre couleur personnalisée, allons le faire pour huit AF D. Nous allons l'afficher de manière flexible, justifier le contenu au centre Alignez les éléments au centre et nous voulons que les bordures soient arrondies. D, B, R, x l arrondis. Cela rendra la bordure inférieure droite un peu courbée. Ici. Fermons le d, et dans le D. Avant de continuer, nous devons implémenter le clic. En cliquant sur le deve, nous voulons ouvrir le tiroir Permettez-moi de vous montrer rapidement. Tu peux voir ? C'est ici ? Alors maintenant, nous allons mettre le menu ici et regarder ça. C'est quoi ça, bordel ? Cela sera corrigé à l'avenir. Continuons. Nous allons maintenant avoir un développeur. Donnez un style au développeur. Nous allons connaître sa position relative. La largeur sera de sept, G de dix. La hauteur sera de sept. G H, dix. Nous allons faire en sorte qu' il affiche le contenu flexible, ify au centre. Alignez les éléments au centre. Fermez le D. Dans le D, nous devons afficher l'image, qui est l'image du menu. IMG SRC equ Slash Drawer Dot PNG. L'alternative, c'est de faire des articles de tiroir. Donnons le style, la largeur, définissons une largeur personnalisée de 150 pixels. La hauteur sera de dix. Rapprochez-vous grâce à l'étiquette à fermeture automatique. Lorsque vous enregistrez et consultez le navigateur, les annonces, pouvez-vous les voir ? N'est-ce pas magnifique ? Si vous observez attentivement, vous verrez ce qui se passe ici, et cela occupe réellement de l'espace et je n'aime pas ça. Cet article. Je ne sais pas où nous l'avons, mais nous devons le chercher. Je pense que cela devrait être dans le tiroir diagonal. Et voilà, cette grosse surcharge. Je vais maintenant effacer cet élément dans le code HTML interne. Lorsque vous enregistrez le projet. Magnifique. Maintenant, nous faisons des progrès et cela me plaît. Lorsque vous observez le lien de navigation, vous vous rendrez compte que le tiroir recouvre le lien d'accueil. Vous voyez, il y a un lien dans le coin supérieur gauche de l' écran, le lien d'accueil. Nous devons donc l'aligner correctement pour que la maison arrive juste après le tiroir de navigation. Nous avons donc besoin d'un espace entre les deux. Faisons-le lors de la prochaine conférence. 38. Défi de liens intérieurs: Sur la base de l'observation faite lors de la conférence précédente, nous nous sommes rendu compte que le tiroir de navigation recouvrait la voie d'accueil, et c' est exactement le problème que j'ai promis de vous révéler. Je n'ai pas dit ça. Réparons-le rapidement. Pour en revenir à S cot, dans la tête S, vous devez faire défiler la page vers le haut où se trouve la tête en forme de tag, et la voici. Ce que nous allons faire ici est de spécifier une largeur de 100 %, soit W. L'équivalent CSS réel sera une largeur de 100 %. Et lorsque vous passez la souris dessus, dans l'intellisens, vous le verrez juste là Sauvegardez sur le navigateur, ce sont celles-ci. Tu peux voir ? Magnifique. Maintenant, lorsque vous cliquez sur la page d'accueil, la page d'accueil est surlignée et le reste du lien de navigation devient un peu pâle Lorsque vous cliquez sur le portfolio, il sera surligné et la couleur du test sera le noir. Pareil ici, pareil ici. Alors pareil ici. Tout fonctionne parfaitement comme prévu. Ce que je veux que nous fassions ici est de rendre la page d'accueil multiple. Je voudrais vous montrer quelque chose très rapidement. Ouvrez les pages, puis affichons rapidement le composant d' accueil à plusieurs reprises. Je veux juste le faire pour que nous puissions obtenir un parchemin. Nous allons maintenant pouvoir faire défiler le site Web. Vous remarquerez donc que lorsque je fais défiler la page vers le haut, vous pouvez voir que l'en-tête devient blanc et que l' ombre de la boîte devient bleue. Et ici en rendant les liens de navigation plus visibles. N'est-ce pas magnifique ? J'adore ça. C'est bon. Il est réactif sur notre plateforme. Tu peux voir ? Sur iPad. Magnifique. Très bien, les gars, c'est exactement ce que nous allons réaliser dans cette conférence. Revenez rapidement au code VS. Supprimez les multiples rendus, puis un seul composant d' accueil sera affiché à l'écran C'est bon, tout va bien. Et c'est exact. 39. Ouvrir et fermer le menu de navigation button: Dans le cours précédent, nous avons implémenté le menu de navigation. Mais lorsque vous cliquez dessus, rien ne se passe. Dans cette conférence, nous allons procéder à la mise en œuvre de la fonctionnalité d'ouverture et de fermeture. Il est sur VS Code. En haut, nous allons importer. Utilisez le routeur, com Utilisez le nom du chemin. Et cela vient de next s Navigation. Le routeur use est une fonction, il faut donc l'invoquer. Ensuite, nous lui attribuerons une variable. Const Router equ. Faisons de même pour le nom du chemin d'utilisation. C pathname est égal à U pathname. Le nom du chemin d'utilisation est un hook de composant client qui vous permet de lire le nom du chemin URL actuel. Cela fait, remplaçons ce d par un fragment de réaction. Dans le fragment, nous allons avoir un df, donner le nom de la classe pour le styliser Nous allons avoir une position relative. Dans ce d, nous allons avoir un autre df, donnez-lui le nom de la classe. Nous voulons maintenant utiliser l' interpolation de chaînes de caractères afin pouvoir écrire de pouvoir écrire un script Java entre les deux L'indice z, indice 50. À l'heure actuelle, nous allons avoir une certaine condition. Si le nom du chemin est comme celui-ci, c' est-à-dire le pointeur vers le composant d'accueil, nous allons le faire à partir de zéro pixel, sinon à partir du haut, il fera 100 pixels. Nous allons donc avoir le contre ou être pointés du doigt. Nous voulons qu'il soit fixé au sommet. Le menu dans le tiroir aura exactement la même hauteur que le menu dans le composant d'en-tête. OK ? Ne vous inquiétez pas, vous aurez certainement une idée claire. Accédez donc au composant d'en-tête, faites défiler la page vers le bas et copions tout ici. À partir de la hauteur. Viens ici. Puis collez-le. Magnifique. Ferme-le. Un autre, donnez le nom de la classe, dans le nom de la classe, nous allons le styliser Viens aussi ici. Copions cette plongée car ce sera exactement la même chose. Remplaçons-le. Ferme-le. Une autre chose que nous devons faire dans ce pdf est de venir ici. Nous voulons spécifier le clic. En cliquant sur ce pdf, nous voulons fermer le menu. Nous allons nous ouvrir à la force. C'est ce que nous allons faire. Si c'est ouvert, c'est vrai, nous voulons afficher le SVDic fermé Ouvrez donc rapidement le point de ressource de code MD. Surligner à partir des lignes 192 à 2205. Copiez, venez ici et collez-le entre les deux. Et s. Nous devons également afficher l'icône du menu. Surlignez le texte, venez ici et collez-le entre les deux. Il suffit de formater le code. Lorsque vous enregistrez dans le navigateur. C'est bon. Rien ne se passe Donc, pour l'instant, il se peut que vous ne puissiez pas voir l' effet à l'écran. Laisse-moi te montrer quelque chose. Passons le BG au rouge pour que vous compreniez de quoi nous parlons. BG, rouge, 500. Ceci fait, appliquons rapidement les étoiles. Ouvrez le dessin en diagonale sur CSS. Nous devons faire en sorte qu'ils dessinent dans leur tête lorsqu'ils sont acclamés Copiez, venez ici, point, ils vont dessiner. La largeur du tirage sera de 100 %. Hauteur 100, hauteur de vue. La position va être fixée au sommet. Transformez l'origine, nous le voulons en haut à droite. Transformer, traduire, -100 %, -100 %. Transction, nous voulons la transformer 0,5 seconde en un. Le Coso va être un pointeur. L'indice z est de 100. Passons maintenant à la diagonale ouverte, le ciel. Si cette ouverture est définie sur true, nous devons également styliser cette classe ici Copiez le dessin en diagonale, venez ici et collez. Point ouvert. Tout ce que nous avons à faire ici est de transformer, traduire 00. C'est aussi simple que ça. Retournez au composant d'en-tête, juste en haut, nous allons utiliser le pot do point slash, header slash Ils vont dessiner du CSS à points. Lorsque vous sauvegardez, vous verrez certainement quelque chose de bon à l'écran. Tu peux voir ? Lorsque vous cliquez, vous le fermez. Cliquez pour l'ouvrir, vous le fermez. Maintenant, je vais tout expliquer ligne par ligne. Vous vous rendrez compte que lorsque je clique sur ce menu, le tiroir de navigation apparaît du coin supérieur gauche de l'écran vers la droite. Jetez-y un coup d'œil. C. Ensuite, lorsqu'elle apparaît, vous verrez l'icône X, qui est l'icône de fermeture. Maintenant, lorsque je clique sur l'icône de fermeture, si vous êtes suffisamment vigilant, vous verrez une icône de menu. Maintenant, regarde. Tu vois ? Une icône de menu apparaît avant cet autre menu. Laisse-moi zoomer un peu. Jetez-y un coup d'œil. Tu vois ? Il s'affiche avec une icône de menu. C'est donc exactement ce que nous avons fait dans le tiroir. Laisse-moi te montrer. Si son ouverture est définie sur true, nous allons afficher l'icône de fermeture, et la voici, l'icône x. Et si l'ouverture est réglée sur forcer, c' est-à-dire si vous fermez le tiroir de navigation, nous allons rapidement afficher cette icône avant qu'elle ne se ferme. Alors jetez un œil, observez-le attentivement. C'est bon. Bien. Cela fait, en haut, nous avons conçu la disposition du tiroir. La couleur est donc rouge, et voilà. Il a exactement la même taille que celui du composant principal. Tu peux voir ? Nous avons maintenant pu initier le est ouvert et est fermé. Dans la prochaine conférence, nous commencerons à implémenter les éléments du menu. C'est bon, tout va bien. Mais une chose que nous devrions faire ici est de changer le BG en bleu. OK ? En fait, je l'ai fait en rouge pour les documents pédagogiques, il faut donc le remettre dans cette couleur. Lorsque vous enregistrez dans le navigateur. Maintenant, quand tu cliques, tu peux voir ? C'est bon. Tout fonctionne parfaitement bien. Passons à la prochaine conférence où nous allons implémenter les éléments du menu. Rendez-vous lors de la prochaine conférence. 40. Liens de navigation dans le tiroir: Passons donc à la conception du menu. Ouvrez le dessin en diagonale Gs. C'est bon. Faites défiler la page vers le bas Juste après ce jour de clôture, nous allons avoir un en-tête. Stylisons rapidement l'en-tête. Donnez le nom de la classe, nous allons utiliser une interpolation forte La position va être fixée. La largeur sera complète, ce qui la portera à 100 %. La transition sera tout. La durée, faisons-en 500. L'indice z est de 40 magnifiques. Cela fait, nous allons avoir une condition ici. Si le nom du chemin est égal à ceci. Nous allons recommencer à zéro. Oui, nous allons l'avoir du haut à 98 pixels, ou vous pouvez le faire à 100 si vous le souhaitez OK. Donc, dans la tête, nous allons avoir un dif, lui donner le nom de la classe, lui donner une position relative Un autre df avec le nom de la classe. Ici, nous allons avoir la position de l'indice z, positionnons-la de manière absolue. Transformez le GPU. Nous allons le faire entrer et sortir. La durée est de 500. La transition, c'est tout. Échelle, nous voulons la redimensionner à 100. Traduisez x, aucun. Soulignons cela. Copie, viens ici. Coller. Ce sera la traduction Y. Donnons-lui de l'opacité, 100 Le bar a été construit deux, deux, 3740. Fermons-le. Nous sommes toujours en train de le styliser. Nous n'en avons pas encore fini avec le style. L'opacité BG, qui est l'opacité de l'arrière-plan, sera de 95 La largeur est de 100 %, nous allons avoir une colonne flexible. Ensuite, sur les petits appareils, nous allons avoir son rouleau flexible. Nous en avons terminé avec ça. Maintenant, dans ce contexte, nous allons avoir du culot. Le test à l'intérieur du nerf sera blanc. Les polices, nous voulons utiliser le tableau des couleurs. Testez l'alignement c. T pour Excel. Faisons en sorte qu'il se transforme. C'est bon. Bien. Cela fait, nous allons avoir l'UL. Gagnez l'UL. Donnons-lui rapidement le style. Nom de la classe, display flex. La direction de flexion est la colonne. Gagnez l'UL, nous allons avoir un tag LI. Donnons le nom de la classe pour la styliser. Nous allons le regrouper. Motion en haut et en bas. Il y en aura quatre, A Excel, nous allons avoir quatre en haut et en bas de l'écran Cela correspondra à la marge supérieure et marge inférieure sur le point de rupture de 15 à 36 pixels. Après cela, lorsque vous enregistrez dans le navigateur, cliquez sur le menu. C'est bon. Cela arrive. Pouvez-vous voir que le tiroir arrive effectivement, mais essayons de le finaliser pour voir si nous avons des problèmes Dans la balise LI, nous allons avoir un d, donner le nom de la classe. Nous allons avoir un bloc d' affichage en ligne. La position est relative. Nous sommes dans le D, nous allons avoir le tag A. Nous faisons beaucoup de choses ici en ce qui concerne l'en-tête. H REF, la référence hypertexte. Nous allons faire Slash Home. Ainsi, lorsque vous cliquez sur celui-ci, vous accédez au composant d'accueil. Spécifiez le clic. Cliquez, nous allons mettre l'index sélectionné de un à zéro, simplement parce que c'est la valeur par défaut pour la maison. Et j'espère que vous comprenez ce que nous faisons ici depuis la conférence précédente où nous avons déclaré les variables d'état à utiliser. Ainsi, lorsque l' index 1 sélectionné est égal à zéro, cela signifie que nous sommes sur la page d'accueil. Comprenez-vous, ne vous inquiétez pas, fur et à mesure que nous évoluons, vous comprendrez certainement tout Ici, nous allons définir l'ouverture à la force. Parce que lorsque vous cliquez sur le lien, nous devrions pouvoir fermer le menu. Mettons-le donc en force. Fermons le tag A. Le code HTML interne, nous allons afficher à la page d'accueil. Lorsque vous consultez le navigateur, cliquez sur, pouvez-vous voir, il arrive. Lorsque vous cliquez dessus, vous accédez au composant d'accueil et le tiroir de navigation disparaît. C'est exactement l'idée. Après avoir fait tout cela, nous voulons qu'il soit mis en évidence lorsque vous cliquez dessus. En dehors de la balise A, nous allons avoir du script Java. Si l'index 1 sélectionné est égal à zéro, nous voulons lui donner du style. Maintenant, nous allons avoir un d, donner le nom de la classe. Nous allons avoir sa position absolue. En partant du haut, il y aura deux en partant de la gauche, moins deux. Chaque fois que vous me voyez préfixer la classe utilitaire tail wind par un signe moins, vous devez comprendre que nous voulons spécifier une valeur négative À gauche, deux. Il restera, moins deux. La largeur sera pleine, ce qui la portera à 100 %. La hauteur sera également complète, ce qui la portera à 100 % de hauteur. Transformez le GPU. La transiction dure toute la durée. Faisons-en 300. Nous allons le faire pivoter de moins six moins six. L'opacité 100. Le groupe DV fait une rotation à six. Groupe dv. L'opacité Hva sera de 100. Désolé, l'arrière-plan, nous allons le faire graver dans Excel parce que nous voulons que les bords soient incurvés Pour l'indice z, nous allons avoir un dix négatif. OK, sauvegardons-le et voyons ce qui se passe. Oups, avant de sauvegarder, nous devons fermer le d comme ça La date de clôture ne devrait pas être là. Coupe-le, puis fermons-le ici. Il ne se passe rien. Assurez-vous de fermer le sous de ici. Ensuite, surlignez à nouveau cette annonce, C P. Viens ici. Oups. Nous devons également fermer le sous-d , puis le coller ici. Nous allons maintenant apporter quelques modifications. R Cela va être le cas. Faites pivoter zéro, l'opacité sera nulle. Et c'est quoi encore ? Je pense que c'est tout. Lorsque vous enregistrez dans le navigateur, lorsque vous cliquez, lorsque je survole le menu, jetez un œil Il va surligner le rouge, et ce rouge est en cours de rotation. Compris. Magnifique. Passons maintenant à la couleur réelle. Je pense que la couleur réelle sera le bleu clair, nous devons donc la copier d'ici. La copie du ciel. Où avons-nous la couleur ? OK. Le voici. Commande D pour effectuer une sélection multiple. Essuyez-le sur les deux lignes, puis collez-le. Enregistrez dans le navigateur. Encore une fois, quand vous y allez, jetez un œil. J'adore ça. Nous allons surligner la balise LI puis la dupliquer trois fois, comme nous l'avons fait lorsque nous avons implémenté les liens au sein du composant principal. Appuyez sur dix chances, puis appuyez sur la flèche vers le bas pour dupliquer un, deux et trois. Magnifique. Lorsque vous enregistrez sur le navigateur, vous l'avez maintenant comme ça. Mais j'ai des doutes au fond de moi. Ce type est censé couvrir l'écran, c' est-à-dire ce menu, et je ne sais pas pourquoi il n' apparaît pas comme ça. OK. Tu peux voir ? Ça a l'air bien. Commençons maintenant à apporter quelques modifications. Il s'agit de la première balise LI de la page d'accueil. Pour celui-ci, nous allons mettre à jour l' index sélectionné à un, et je définis que l' index sélectionné est égal à un, alors nous devons le faire. Et voici un portfolio. Cela nous reliera à la composante du portefeuille. La deuxième étiquette LI N C. Pour la troisième étiquette LI. Nous allons mettre à jour l' index 2 sélectionné. Dans ce cas, s'il est égal à deux, nous voulons passer au composant À propos de moi. Et d'ailleurs, nous devons également changer la référence. Donc, ici, je vais parler du composant. Faites défiler l'écran vers le haut Ici, il faut le changer deux. Portefeuille. Et c' est la dernière. Mettons-le donc à trois. S'il est égal à trois, nous devons passer aux composants iami Ici, nous allons spécifier un M, directement dans le lecteur. Qu'est-ce que c'est encore une fois ? Nous devons très bien le vérifier. D'accord ? OK, c'est bon. Si nous manquons quelque chose à l'avenir, nous pouvons certainement y remédier. Lorsque vous enregistrez dans le navigateur, ouvrez et démarrez. Maintenant, lorsque vous survolez, vous voyez des choses comme ça. Tu peux voir ? Dans la prochaine conférence, nous allons donc implémenter les icônes des réseaux sociaux. 41. Défi de tiroir de navigation (fixer la hauteur): Le Diagono Dra est donc en demi-écran, et je ne suis pas content du résultat final Bien sûr, il y a un problème de hauteur. Je veux donc que vous le releviez comme un défi, publiiez la vidéo et que vous essayiez autant que possible de le corriger de votre côté. Je n'ai pas essayé de régler le problème de votre côté. Rapidement, laissez-moi également vous montrer comment je l'ai réparé. Retournez au code VS. Gagnez le Dagono Dra do s, voici l'en-tête. Nous devons spécifier la hauteur de ce t. Nous avons donc la direction de flexion de la colonne. La bonne chose à faire est de lui faire afficher la flexion, puis la direction de flexion est une colonne. Cela fait, nous devons également créer un écran HD. Cela permettra de mapper la hauteur à 100 hauteurs de vue. Lorsque vous enregistrez, vérifiez-le dans le navigateur. Maintenant, vous pouvez voir que tout est bien aligné. Quand j'y vais, jetez un œil. Ça a l'air bien, et je l'aime bien. Fermer. Ouvrez, fermez. Donc, en gros, le problème est résolu et tout fonctionne parfaitement comme prévu. Conférence sur le retrait, nous allons commencer à implémenter l'icône du réseau social juste dessous du Nav, qui est le lien Nous allons l' implémenter ici. Faisons-le dans la conférence de Dine. 42. Icônes de réseaux sociaux: Très bien, commençons donc à implémenter les icônes des réseaux sociaux. Gagnez un diag pour un match nul, juste après le dernier point sensible Nous allons avoir une section. Donnons-lui un nom de classe. La marge supérieure et la marge inférieure seront égales à 14 appareils et plus petits. La marge supérieure et la marge inférieure seront de 12. Très bien, donc sur les petits appareils, nous allons avoir sa position absolue. Sur O G, nous allons l'avoir relatif. Encore une fois, sur un appareil plus petit, à partir de la droite, il y aura zéro. La hauteur va augmenter avant de passer à la hauteur, également mise en œuvre sur un grand appareil J'espère que tu peux y voir clair. C'est bon. Sur Small the device, la hauteur sera pleine, ce qui la portera à 100 %. Sur LG, la hauteur sera automatique. C'est bon. Donc, dans la section, nous allons avoir une balise H. Donnons le nom de la classe. Nous allons avoir un bloc d'affichage. Sur un appareil plus petit, nous voulons qu'il soit masqué. Sur un appareil plus petit, nous voulons qu'il n'en affiche aucun. Maintenant G, nous allons avoir un bloc d'affichage, le code de police Le test, nous devons spécifier un test personnalisé. Testez Dash pour Excel. Ensuite, nous allons devoir transformer les majuscules. La marge inférieure sera de cinq. Dans le code HTML interne, nous allons me suivre partout. Juste comme ça. Lorsque vous enregistrez, consultez le navigateur. Ouvrez le tiroir. Oups. Voyons voir quelque chose. Laissez-moi économiser à nouveau. Charger. C'est bon. Le voici. Magnifique. La ligne suivante consiste à afficher l'icône du réseau social. Dans la section, nous allons avoir un D. Donnons le style. Nous allons avoir un écran flexible. Dans le sens de flexion, ce sera le rouleau. Sur les appareils plus petits, le sens de flexion sera celui de la colonne. Grand appareil, nous voulons qu'il soit flexible. Dans le D, nous allons avoir un remorqueur. Dans le remorqueur A, donnons-lui une référence. Ici, vous devez spécifier votre pseudo Twitter. Le lien, et je viens de coller le mien. Bien. Donne-toi le nom de la classe. Le test va être gris, puis nous devons spécifier la valeur pour le rendre plus épais. Au survol, nous voulons remplacer le test par. Texte blanc. Transition, couleur, puis durée. Faisons-en 300. La ligne suivante consiste à copier-coller le SVG Twitter. Revenez maintenant à la ressource de code MD. Voici le SVG de Twitter. Copiez à partir des lignes deux, 27, 2238. Surlignez et copiez. Retournez au code. Dans le code HTML interne de la balise A, il suffit de le coller. Lorsque vous enregistrez, formatons le code pour obtenir une indentation appropriée C'est bon. Bien. Enregistrez et consultez le navigateur. Vous voyez, nous avons maintenant l'icône Twitter. Une chose que j'observe, c'est qu'il n'y a pas beaucoup d'espace entre le tag H et l'icône. Voyons voir quelque chose. C'est bon. C'est là que réside le mystique. Il s'agit bien d'une erreur typographique. Ce sera B, qui correspond au bas de Magin. OK ? Lorsque vous enregistrez dans le navigateur, jetez maintenant un œil. Tu peux voir ? Magnifique. J'adore chaque détail des partitions. Et j'espère que vous écrirez un merveilleux commentaire pour vraiment apprécier mon travail manuel. Merci pour cela. L'idéal est donc de surligner le tag A, puis le dupliquer autant de fois que vous le souhaitez. Je vais le dupliquer trois fois. Je pense que c'est suffisant. C'est bon. C'est sympa. Encore une fois. Et lorsque vous enregistrez sur le navigateur, jetez un œil. Ça a l'air sympa. Donc, ce que je vais faire maintenant, c'est changer les icônes et la référence hypotexte Ouais. Pour moi, je l'ai fait de mon côté. Vous devez donc copier l'URL de votre profil, puis le coller directement dans le Hage Reve Maintenant, le deuxième Hage Reve, nous allons avoir le cadeau. Je vais juste le faire ici git. Il ne s'agit pas de l'URL de mon profil Git. Tu peux faire le tien de ton côté. Ouvrez votre compte git, accédez à votre profil, puis copiez l'URL, collez-la dans le HRF Cela fait, nous devons changer le SVG car il s' agit d'un SVG Twitter Retournez à la ressource de code. Maintenant, voici le git. Copiez les cadeaux comme ceci. Découvrez-le aux lignes 242, deux, 254. Copiez, revenez, puis collez-le ici. Formatez rapidement le code. Nous allons également avoir celui-ci pour Dribble. Copiez l'URL de votre compte Dribble et collez-la dedans. Ce que je vais simplement faire, c'est changer le SVG et ensuite vous pourrez faire le reste de votre côté Supprimez-le, revenez à la ressource de code, surlignez, puis copiez-le. OK, collez-le ici. Un moyen de s'assurer de formater. Au fait, vous pouvez appuyer sur les touches Shift et t , puis appuyer sur la touche F pour formater. C'est le raccourci pour formater avec Predia. Et voilà, nous allons participer. Copiez également votre compte Link Den et collez-le ici, le lien. Je vais juste spécifier Link Dn. Supprimez le SVG. Retournez à la ressource de code, puis copions le SVG pour le lien D. Surligner et copier. Viens ici, collez, maintenez le shift enfoncé et le d, appuyez sur le FG de votre clavier pour formater. Ici aussi, vous pouvez faire tout cela de votre côté, même sans regarder la conférence. Voilà, je vais faire Instagram. Copiez votre compte Instagram. Pour cela, il me suffit de copier mon propre compte Instagram. Effacez-le, collez l'URL de votre compte Instagram. C'est le mien, et d'ailleurs, tu peux me suivre sur Instagram. Nous devons donc également modifier le SVG pour Instagram. Juste comme ça. Décalez un impair et appuyez sur la touche F pour formater. Voyons maintenant le résultat final. Est-ce que vous voyez extrêmement beau ? Sur iPad, il est aligné vers la droite. Ensuite, sur un appareil mobile, jetez un coup d'œil. Cela fonctionne parfaitement bien, exactement ce à quoi nous nous attendions. C'est adaptatif sur toutes les plateformes, et je l'aime bien. Vous pouvez donc cliquer pour ouvrir mon compte Instagram, puis vous assurer de me suivre. C'est bon. Tout fonctionne donc parfaitement comme prévu. Rendez-vous lors de la prochaine conférence. 43. Mise en page de l'écran et affichage des articles: Nous reviendrons en classe. Dans cette section du cours, nous allons procéder à la conception des composants du portefeuille. En gros, ce que nous allons faire dans cette conférence est de configurer la mise en page d'arrière-plan. Où après je le ferai. Commençons. Ouvrez rapidement l'explorateur, puis SRC, nous devons l' implémenter dans les pages . Avant de continuer, nous devons effectuer les saisies nécessaires concernant la police Ouvrez le composant, la maison, puis les maisons. Nous devons copier de la ligne 5 à la ligne 10. Surlignez et copiez-le, fermez-le, revenez à la page, qui est la page parent. Commun B pour fermer l'explorateur. Ensuite, nous devons le coller ici. Magnifique. Le nid et la ligne servent à spécifier la hauteur ici. Donnons-lui rapidement un nom de classe. Bon sang, écran. Nous allons avoir sa position relative. La hauteur minimale sera de 100 v. Cela fait, dessous du rendu du composant d'accueil, nous allons configurer la mise en page du portfolio. Maintenant, nous allons avoir un développeur. Donnez-lui un nom de classe, et dans le nom de la classe, nous devons lui appliquer des styles. Le sommet de la marge doit être égal à zéro. Ensuite, le Padin en haut, la marge en bas, nous allons avoir -40 moins la marge en bas, Fermez le développeur. De plus, nous devons spécifier l'identifiant du d. Je vais venir ici. Nous allons faire de l'identification, de l'équa, du portfolio. Il faut donc être précis ici. Ouvrez l'explorateur. Retournez à l' en-tête, point d'en-tête G. Nous devons donc chercher «   OK ». Le voici. C'est tout à fait correct. Assurez-vous donc que cela correspond à ce que nous avons ici, car lorsque vous cliquez sur ce lien, nous voulons ouvrir ces composants Magnifique. Tout ce que je dis, c'est trop. Fermez l'en-tête, fermez l'explorateur. Et maintenant, nous allons continuer. Cela fait, nous devons également donner ce style DV. Nous voulons utiliser un style intégré ici. L'image de fond, dégradé linéaire, nous allons la faire pivoter de -62 degrés Coma, et la couleur sera bleu clair. Nous allons avoir EF seven F B. Nous allons l' avoir zéro, 50 %. Et cette portion va occuper zéro, 50 %. Si le coma et l'autre partie doivent être blancs, ils occuperont de zéro à 100 %. Vous pouvez également le recalculer de votre côté et rendre plus beau en termes de division de l'écran Mets-toi dans le coma juste ici, puis redescendons. Séparez-le par une virgule. Viens ici sauf si la largeur est spécifiée. La largeur sera de 100 %. Lorsque vous enregistrez, assurez-vous que l'application est en cours d'exécution, puis consultez le navigateur. Pour l'instant, il est possible que vous ne voyiez rien à l'écran. Affichons rapidement quelques éléments pour les rendre visibles. Ce ne serait pas D ? Nous devons rapidement formater le code. Juste à l'intérieur du d, nous allons avoir un autre D, donnez-lui un nom de classe. Ensuite, nous devons le rendre réactif dans notre plateforme, notre conteneur. Ensuite, le magine sera automatique. Dans ce df, nous allons avoir une balise P, et l'élément interne de la balise P sera un portfolio. Nous voulons que ce portfolio soit relégué au second plan. Enregistrer. Maintenant, voici le portfolio. Donnons-lui une étoile. Nom de la classe, où se trouve le nom de la classe. Nous allons faire le test. Faisons en 300 pixels parce que nous voulons qu'il soit grand Pour l'instant, vous pouvez voir le portfolio ici, s'il est correct. Maintenant, donnez-lui 300 pixels lorsque vous revenez dans le navigateur, et vous verrez beau Maintenant, je veux que vous observiez attentivement l'écran du portfolio. Vous vous rendrez compte qu'il est divisé en deux parties. La première partie est blanche et le bord droit de la partie est bleu clair. Nous voulons donc que ce portfolio soit placé uniquement dans cette partie, la partie blanche. Nous allons donc faire en le trop-plein soit masqué, puis nous lui appliquerons plus de styles Mais pour l'instant, il suffit de noter que l'écran est divisé en deux parties, et voici l'implémentation. Ce type est là. Ici. Magnifique. OK. Continuons. Le test, nous allons avoir un test de couleur personnalisé, F seven FB, cod Sur les appareils de taille moyenne, le motif restant sera de 50 pixels. Sinon, le paddn à gauche et à droite sera de cinq Le maximum avec, nous sommes à 2750 pixels. La largeur est de 100 %. Puis débordez. Faisons en sorte que ça frappe. Lorsque vous enregistrez, le portfolio ici va maintenant occuper la première partie de l'écran. Jetez-y un œil, et le voici. C'est bon. Maintenant, nous allons avoir un style. Nous allons le faire transformer, traduire, zéro pixel, -20 pixels. Maintenant, après le tag p, nous allons avoir un autre d. Nous allons avoir exactement le même style, donc je dois juste souligner cop. Viens ici. Jetez-y un coup d'œil et collez-le dans le D. Dans le code HTML interne du d, nous allons avoir une balise P. Donne-toi le nom de la classe. Le test, nous allons avoir un test bleu. Pour A, FDE, sur les appareils de taille moyenne, ce sera huit pixels. Sinon, le rembourrage à gauche et rembourrage à droite. Il y en aura cinq. l'avant, nous voulons qu'il y ait un corps supplémentaire , entre les deux pointes, puis nous devons sélectionner un corps supplémentaire Le texte 5 Excel. Gagnez le code HTML interne de la balise P, nous allons faire des travaux récents. Enregistrer. Allons y jeter un œil. C'est bon. Magnifique. Nous avons maintenant les travaux récents. OK. J'ai déjà remarqué quelque chose, mais je vous le dirai quand nous aurons terminé Après la balise P de clôture de l'œuvre récente, nous allons avoir une autre balise P. Donnons l'étoile. Nous voulons utiliser l'interpolation de chaînes. La largeur maximale, passons-en à Excel. Sur les appareils médians, le pardon est parti. Maintenons 80 pixels. Pad à gauche, pad et pad à droite, maintenons-en cinq. Le test portera sur les pixels du système. La couleur de test pour sept, c26d. Ensuite, la hauteur de la ligne, faisons-la, marge en haut, et cinq. Maintenant, attribuons-lui le téléphone, afin d'utiliser le Google Hind Je vais faire le nom de la classe Hind Point. Parfait. Dans le H T ML interne de la balise P, nous allons copier-coller quelque chose. Ouvrez le travail terminé. Je dois juste le souligner. Cliquez et copiez. Vous pouvez écrire tout ce qui décrit votre entreprise ou vous-même. Je dois juste le coller ici. Formons le code, sauvegardons. Et voilà. Tout fonctionne bien, mais nous devons résoudre certains problèmes. Le portefeuille se chevauche, tout comme le test Vérifions-le sur le travail terminé. Vérifiez que le travail est terminé, tout se trouve dans la première partie. plus, le portfolio est utilisé comme arrière-plan pour le reste du document, et vous pouvez le voir c. Que faisons-nous en ce moment ? Retournez au code. C'est assez facile à faire. Lorsque vous faites défiler l'écran vers le haut, ce n'est pas vers la droite. Faisons en sorte que cela fasse moins de 250 pixels pour qu'il puisse pousser l'élément vers le haut. Maintenant, lorsque vous enregistrez dans le navigateur, regardez, tout est bien aligné. J'adore ça. Magnifique. Une autre chose que je tiens à porter à votre attention est que les éléments situés sur le bord gauche de l'écran se trouvent dans un conteneur en pleine croissance. La façon dont nous pouvons résoudre ce problème est de faire en sorte que ce conteneur soit plus grand que le conteneur situé à l'extrémité droite de l'écran. J'espère que vous pourrez observer et voir de quoi je parle. Viens ici. Voyons où nous avons divisé l'écran. Juste ici. Maintenant, faisons en sorte que ce soit 45 %. Lorsque vous enregistrez dans le navigateur, tout est bien aligné, et c'est exactement le résultat attendu. Nous avons maintenant terminé de configurer la mise en page. Dans la prochaine conférence, nous passerons à la mise en œuvre des slider cards C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Restez concentré et prenez toujours soin de vous. 44. Carte de portefeuille: Allons-y pour afficher les éléments à l'écran. Retour au code VS. La première chose que nous allons faire ici est d'importer les données. Minimisez le code VS, faites-le glisser vers le bord droit de l'écran, puis ouvrez les ressources du portefeuille. Dans les ressources du portefeuille, vous allez voir la source de données, ouvrir la source de données et voici les données g. Retournez au code VS. Commun B pour ouvrir l'explorateur. Maintenant, glissez et déposez les données directement dans le répertoire de l'application. Magnifique. Maximisez maintenant le code IAS. Cela inclut les données que nous allons utiliser dans le slider card C'est juste un tableau d'objets. Dans l'objet, nous avons le titre, nom, la description et les images. , en ce qui concerne le deuxième élément, nous avons exactement la même chose. Et ainsi de suite. Affichons rapidement tous ces éléments à l'écran. Ouvrez les composants. Cliquez avec le bouton droit sur la carte coulissante. Ici sur Nouveau fichier. Mon point de curseur, G, est Un autre, cliquez avec le bouton droit sur Nouveau fichier. Carte coulissante Dot GS. Générez le composant fonctionnel directement dans les fichiers. Fermez l'explorateur. Passons à mon slider GS. Pour afficher les éléments à l'écran. Tout d'abord, nous devons l'importer dans ce composant. Importez un tableau de données à partir des données de l'application Slash. Bien entendu, les données S se trouvent directement dans le répertoire de l'application. Après avoir fait cela, venez ici. Essuyez-le. Dans le D, nous allons cartographier les données. Nous allons maintenant créer une carte à points du tableau de données. Nous allons prendre un index de colonne d'articles. Cet élément représente chaque élément du tableau. Laissez-moi vous montrer le titre, le nom, la description, les images, etc. Chaque fois que nous voulons récupérer le titre, nous allons créer le titre par point de l' article, le nom du point de l'article, la description, etc. Vous pouvez modifier le nom de l' article comme vous le souhaitez, mais assurez-vous de lui donner un nom descriptif qui décrit l'intention. Ici, nous allons le configurer sur une fonction flèche, ouvrir et fermer des perentens Nous allons renvoyer l'interface utilisateur. Nous allons avoir un d avec le nom de classe de M slider. Gagnez mon slider, nous allons afficher la carte slider, c' est-à-dire ce type ici Alors, allez en haut. Nous devons maintenant importer le curseur depuis la carte Dot Slash Slider. Donc, en toute simplicité, je vais faire du slider. Rapprochez-vous grâce à l'étiquette à fermeture automatique. Et maintenant, nous allons transmettre l'élément et l'index tant qu'accessoires dans le slider card Je vais donc faire article par article. Et puis indexez equ index. Nous passons donc ces accessoires bas dans la carte coulissante . Quelles nouvelles ? Allons-y pour recevoir les accessoires directement dans le curseur Faites glisser une découpe, puis nous devons déstructurer un élément, un index Je pense que nous devrions utiliser un fragment de cheveux. Surlignez-le, effacez-le, et je vais faire réagir fragment de point W dans les fragments, nous allons avoir un D, donner le nom de la classe. La hauteur sera de 200 pixels. Il s'agit d'une hauteur personnalisée. Sur un appareil de grande taille, la hauteur sera de 450 pixels. Sur un appareil de taille moyenne, la hauteur sera de 400 pixels. Sur un appareil plus petit, votre téléphone, la hauteur sera de 200 pixels. Sur un appareil de grande taille, la largeur sera de 650 pixels. Sur un appareil de taille moyenne, la largeur sera de 450 pixels. Faisons en 300 pixels. Nous allons avoir une position relative. La marge sera haute , fermée sur la base. Gagnez le dv, nous allons avoir un autre df. Donnez-lui un nom de classe. La hauteur sera pleine, ce qui la portera à 100 %. La largeur est pleine. Donnons-lui un groupe. Ensuite, nous allons faire défiler Coso all. L'indice z correspond à 50 positions acides relatives. Fermez le d, et dans le D, nous allons avoir une balise de messagerie instantanée, S R C equ Maintenant, souvenez-vous que nous avons reçu les accessoires ici, et que cet élément représente chaque élément du R A. H, et ici, nous cartographions le tableau de données, puis nous transmettons l'élément N'oubliez pas que cet élément, un index a été envoyé dans le composant slider en tant que probs Donc, ici pour accéder aux images, je vais créer des images par points. Et voici les images. Nous voulons donc obtenir la première image du tableau. H. Je parle trop. Pour accéder au premier élément d'un tableau. Bien sûr, tu le sais. Il suffit d' utiliser un index de tableau égal à zéro. Fermez-le à l'aide de l'étiquette à fermeture automatique. Quand tu es toi-même. Voyons ce que nous avons sur le navigateur. Rien ne s'affiche à l'écran. Tu sais pourquoi ? Laisse-moi te montrer. Ouvrez l'explorateur. La page que Jz fera défiler vers le bas ne fera-t-elle pas défiler ? Après le dif de fermeture, laissez-moi vous montrer que ce dif était le nom de classe du conteneur Nous allons avoir un autre dif. Donnez-lui un nom de classe. Pour l'instant, nous n' allons pas appliquer de style. Ici, nous allons afficher mon slider. Fermez-le de l'étiquette à fermeture automatique et assurez-vous de l'importer en haut. Enregistrez dans le navigateur. Ce sont ceux-là. Tu peux voir ? Nous avons maintenant réussi à afficher les images. Ça a l'air bien. Mais nous devons le dimensionner correctement. Stylisons-le pour qu'il apparaisse bien. Le t va être. La largeur sera de 100 %. La hauteur sera de 200 pixels, mais sur un appareil de grande taille. Faisons en 50 pixels. Sur un appareil médian, faisons-le 300 pixels. La largeur maximale est de 100 %. Tu peux voir ? Maintenant, les images ont exactement la même taille. Faisons en sorte que les bordures soient légèrement arrondies. Maintenant, je vais utiliser Rounded Dash G. Sf et le navigateur. Jetez-y un coup d'œil. Tu peux voir ? Maintenant, les bordures sont toutes arrondies. Après ce d, nous allons avoir un autre d. Donnons cette position absolue. En haut, 14 appareils et plus petits. À gauche, 12, en partant de la gauche, LG arrondi. Nous voulons également que les bordures soient arrondies. Nous créons le chevauchement de la carte, donnez-lui la couleur blanche. La hauteur sera de 200 pixels. Ensuite, sur un grand appareil, la hauteur est de 30 à 50 pixels, sur la médiane, 300 pixels, la largeur sera de 100 % Donc, pendant la plongée. OK. Juste avant de continuer, nous devons lui donner une ombre. Laisse-moi te montrer quelque chose. Maintenant, je vais faire du VG, Red 500. Je veux vraiment que tu voies les cartes se chevaucher. Tu peux voir ? Maintenant, tu vois que c'est beau, vraiment ? Ça a l'air sympa. Il s' agit du chevauchement des cartes. Sur le fond rouge. Maintenant, changeons-le en blanc. Donc, pour le rendre visible car s'il est sur du blanc, vous risquez de ne pas le voir clairement. Tu peux voir ? Elle n'est pas assez visible. Donc, ce que nous devons faire, c'est appliquer une ombre dans les coins. Je vais donc faire Stale Box Shadow. 48 A de l'E. Nous voulons appliquer l' ombre de la boîte à la fois par la gauche, droite, le haut et le bas. Moins dix pixels, dix pixels, 20 pixels, dix pixels. Sauvegardons et voyons voir. C'est bon. Magnifique. J'adore ça. Ça a l'air sympa, vraiment. Formatez le code avec predia. Où dans cette annonce, nous allons afficher le nom de l'article. Nous allons avoir un autre div avec le nom de la classe. Nous allons avoir sa position en hauteur relative, toujours 200 pixels. Sur un grand appareil, la hauteur sera de 50 pixels. Sur un appareil de taille moyenne, la hauteur sera de 300 pixels. Bien sûr, ce sont toutes mes spécifications, vous pouvez donc le faire vous-même de votre côté. 100 %. Fermez le D. Dans le d, nous allons avoir une balise p. Gagnez le hetemel intérieur du tag P. Nous allons faire le nom du point de l'article. Permettez-moi de vous montrer où se trouvent les données. Voici les noms. OK ? Enregistrez dans le navigateur. Oups. C'est bon. Il apparaît donc réellement, mais il se trouve derrière l'image. Donc ce que je vais faire maintenant, c'est lui donner du style. Nous devons le positionner de manière absolue. Et puis les trois derniers. Et lorsque vous consultez le navigateur, le voici. C'est bon. Je n'aime pas la façon dont cela apparaît sur le côté gauche. Il n'y a aucune marge. Ce que je vais faire maintenant, c'est par la gauche. Allons loin. Le test, ce sera O G, la police de caractères. Faisons-en 300. OK. C'est bon. Tout est bien aligné maintenant, et j'adore le résultat final. Jetez un œil. N'est-ce pas magnifique ? Une autre chose que nous allons faire est d'afficher l'icône cliquable Juste après le tag IMD, nous allons avoir un D, donner le nom de la classe Nous allons avoir sa position absolue. À partir du bas, 270 pixels, sur un gros appareil. Nous essayons donc en fait de cibler tous les points de rupture. Donc oui, il va apparaître à 44, un appareil de taille moyenne. Il va en apparaître deux sur un appareil plus petit. Il va apparaître en 270 pixels. Mais ce que nous devons faire ici, c'est passer à 100 pixels. Ouais. Je pense que c'est plus juste. À gauche, six, à partir de la gauche, ça va commencer à six. Ensuite, nous voulons qu'il soit arrondi LG, transiction, la durée sera de 300 J'espère que tu peux y voir clair. L'opacité est nulle. Faisons en sorte qu'il soit groupé. Nous voulons que l'icône apparaisse uniquement lorsque nous passons la souris sur l'image Groupe. Maintenant, l'opacité va être de 100 Bg, le fond, 47 cm2. Le cos, le Coso va être un pointeur. Nous allons lui faire afficher Flex, aligner les éléments au centre, justifier le contenu au centre. Couleur d'accent de l'ombre. G pour 76 à 6 d. La largeur de l' icône sera de dix, la hauteur de dix, et celle de l' appareil de taille moyenne, la largeur de 12. Encore une fois, sur un appareil de taille moyenne, la hauteur sera de 12 et LG, je ne parle pas de LG en termes de produit. Plutôt sur un gros appareil. W 20, toujours sur LG H 20. C'est bon. C'est assez complexe ici. OK ? Fermons donc le D. Beautiful. Tu peux le relire une fois de plus. Si cela devient si stressant, vous pouvez copier-coller mon code. Ce n'est pas du tout un crime. Maintenant, affichons le SVG. Retournez à la ressource de code. Vous allez voir I S V G pour Card Slider. Copions ce SVG ici. Retournez au manteau. Collez-le dans ce tamis. Formatons le manteau. S sur le navigateur. C'est bon. Maintenant, quand je passe le curseur sur le navigateur, vous voyez le « je suis ». Tu peux voir ? J'adore ça. Tu peux voir ? Tu vois ? Donnons-lui une ombre en forme de boîte. Va styliser le d. Positionnez votre souris ici. Appuyez sur la touche Entrée, le style, l'ombre de la case. Il en sera de même pour l'ombre découpée par le curseur. Je dois juste venir ici, puis coller. Enregistrez dans le navigateur. Maintenant, nous l'avons. J'adore le résultat final. Jetez-y un coup d'œil. C'est bon. C'est beau, fantastique. Je pense que nous en avons terminé avec cette composante, et c'est fait pour de bon. Nous avons maintenant terminé d' afficher la carte. Un point très important que je tiens à vous signaler est le système de routage dynamique. Nous ne voulons pas afficher cette icône en tant que design. Nous voulons qu'il fonctionne. C'est donc plus une question de fonctionnalité que de design. Lorsque je clique sur cette icône, nous devrions être en mesure de transmettre ces éléments une page de détails du portefeuille. Lorsque je clique sur ce gars, le nom, les images et tout ce qui concerne ce type sont transmis sur une nouvelle page. Tout comme celui-ci et les autres. L'idée est simple. Nous voulons obtenir un message individuel lorsque vous cliquez sur cette icône. Mettons-le en œuvre en conférence Internet, simplement parce que je voudrais l'expliquer en détail. Voir la conférence sur Internet. Restez concentré. Je prendrai toujours soin de moi. 45. Implémentation du curseur: Nous avons les éléments alignés sur une colonne. Mais lorsque vous examinerez le projet terminé, vous vous rendrez compte que les éléments sont tous alignés sur une ligne. Mettons-le rapidement en œuvre à l' aide de React Slick Retournez au code FS C B pour ouvrir l'explorateur. Cartes à curseur, ouvrez mes points de curseur. Encore une fois, nous devons copier certaines directement depuis le composant d' accueil, le composant d'accueil, composant d' accueil Nous devons copier des lignes deux à quatre. Copiez-le, puis collez-le ici. Le but est d' implémenter les paramètres du curseur. Ne t'inquiète pas, je l'ai déjà préparé. Reprenons-le donc rapidement à partir de la ressource de code do MD. Le voici. Vous devez surligner et copier partir des lignes 340 à 2482 Copiez, venez ici, puis collez-le dans le composant comme ceci. Sauf, il faut l'appliquer. Nous allons donc avoir une boucle cohérente. diapositive à montrer sera une, diapositive à faire défiler en sera une. C'est la vitesse. La flèche est configurée pour tomber car nous ne voulons pas qu'elle ait une flèche vers la gauche ou une flèche vers la droite. Le mode central est vrai. Le rembourrage central est de 400 pixels. Les points sont définis sur true. Nous voulons avoir besoin de points juste en dessous des curseurs d'image Maintenant, ici, nous voulons le styliser sur les appareils mobiles. Au point d'arrêt de 1 700, nous allons avoir la diapositive à montrer comme telle Glisser pour visser en est une. Nous allons le faire examiner en permanence. Les points sont définis sur true. Le rembourrage central est de 400 pixels. Nous l'avons donc réactif au point d'arrêt de 640. À ce point de rupture, la diapositive à afficher est un, défilement est un, infini, ce qui signifie que nous voulons qu'elle défile continuellement. Le point est réglé pour forcer. Le mode central est réglé sur force, puis la séparation centrale est définie sur zéro Appliquons ces paramètres du curseur aux éléments. Maintenant, nous devons effacer ce d. Ici, nous allons faire un slider Juste dans le curseur, nous devons répartir les paramètres. Juste comme ça. H surligner et découper, puis nous devons l' emballer au-dessus de la tête. Magnifique. SF. Examinons le navigateur. Oups. Il indique que le nom slider est défini plusieurs fois. Faisons défiler la page vers le haut pour voir ce qui se passe. Nous avons un slider ici, et nous avons également un slider Il y a donc un conflit de nom. Vissez sur le dessus et réparons-le. Faisons-en une carte coulissante à une carte coulissante. Nous devons également l'appliquer ici. SF, et sur le navigateur, ce sont ceux-ci. Tu peux voir ? C'est tellement beau. J'adore ça. Maintenant, voici les points. Tu peux voir les points juste en bas ? Vérifions-le donc sur un appareil mobile. Sur un appareil mobile. La diapositive à afficher est une, et la diapositive à faire défiler en est une également. Maintenant, nous avons désactivé les points en bas. Tu peux le voir ? Mais sur iPad, la diapositive à afficher en est une, et la diapositive à faire défiler en est une également. Nous ne pouvons pas afficher deux diapositives. Vous voyez, nous n' avons qu'une seule émission , c'est ce gars au centre. Tout fonctionne parfaitement bien. Oups, nous devons effacer la console à cause de cette erreur ennuyeuse, car nous l'avons déjà corrigée . C'est bon. Maintenant, si vous observez attentivement, vous vous rendrez compte que l'espace entre la balise P et le curseur est assez énorme Nous allons donc appuyer légèrement le curseur vers le haut. Et voici un autre défi pour vous. Publiez donc la vidéo de votre côté , puis essayez de trouver une solution rapide. C'est bon. Alors laisse-moi t'aider. VS Code, ouvre les points de page. Juste ici, dans ce deve où nous avons affiché mon slider Supprimons le nom de la classe. Faites défiler l'écran vers le haut. Nous allons copier ce style à partir d'ici. Surlignez le texte. Gagnez ce D. Nous allons le coller. Ensuite, vous économisez, le. Très bien, ça a légèrement augmenté. Alors voilà, je vais en faire 100. Cela revient plutôt à spécifier que la marge supérieure soit de -100 pixels, ce qui poussera l'élément vers le haut C'est beau, mais nous voulons aussi le pousser plus haut. Faisons 170 tartes. Moins 170 pixels. C'est beau, et ça résout le problème. Tu peux voir ? J' adore le repos final. 46. Itinéraire dynamique: Bonjour. Bienvenue chez Claus. Dans cette conférence. Nous allons procéder à la mise en œuvre de la page de publication unique. Lorsque je clique sur cet article, nous devrions être en mesure de le transmettre sur une nouvelle page. De plus, lorsque je clique sur ce type, nous devrions être en mesure de transmettre précisément chacune d'elles dans une nouvelle page. Nous pouvons l'appeler page de détails du portefeuille. C'est exactement là qu'intervient le routage dynamique. Allons-y pour le mettre en œuvre rapidement. VS code, ouvrez l'explorateur. Carte coulissante, carte coulissante. Ici, si vous le remarquez, vous vous rendrez compte qu'il n'y a pas de clic. Même quand tu cliques sur ce gars, rien ne se passe. Tu peux voir ? Vous ne pouvez que le survoler pour qu'il apparaisse. Mais lorsque vous cliquez, rien ne s'accentue. Nous devons implémenter sur le clic D. D D ici qui héberge le SVG Par défaut, Next es s'exécute côté serveur. Pour implémenter le rendu au clic, nous devons passer du rendu côté serveur au rendu côté client Scrot top, pour avoir un switch, nous allons utiliser un client Nous allons également apporter notre contribution. Nous allons importer Use Router à partir de la prochaine barre oblique de navigation Le routeur use est une fonction, il faut donc l'invoquer. Utilisez un routeur. Attribuez-le à une variable. Coût du routeur equ Ue router. Définissons rapidement le clic ici sur le Steve. Nous allons cliquer dessus, régler sur une fonction flèche. Ainsi, à l'aide d'un routeur, nous serons en mesure de placer l'article dans une nouvelle page. Et la façon dont nous procédons est simple. Je vais faire des points de routeur, pousser, ouvrir et fermer Perentenss, puis nous voulons utiliser l'épaisseur du sac Nous voulons obtenir les articles par identifiant de manière dynamique. Donc, ce que je vais faire c'est slash, détail du portfolio, slash, l'identifiant Rappelez-vous que dans la conférence précédente, je vous ai dit que nous utilisions l'index comme identifiant, et nous l' avons déstructuré ici en tant que probs. Bien enseigner. Magnifique. Je ne l'ai pas fait. Lorsqu'un utilisateur clique sur le PDF contenant cette icône. En d'autres termes, lorsqu'un utilisateur clique sur cette icône, nous voulons transmettre cet identifiant une nouvelle page appelée portfolio Dt. Donc, lorsque vous enregistrez et consultez le navigateur, reprenons. Lorsque vous cliquez, un message d'erreur 404 s'affiche, indiquant que la page est introuvable. Une chose est le réglage. Nous avons réussi à saisir l'identifiant de manière dynamique. Lorsque vous vérifiez dans l'onglet, vous verrez que le D de ce message est zéro, qui est l'index du message. Compris. Parfait. Lorsque vous reviendrez en arrière, cliquons dessus. Jette un coup d'œil. Dans l'onglet, vous allez voir l'identifiant. L'identifiant est un. Revenons maintenant au code VS pour créer la page dynamique. Commun B pour ouvrir l'explorateur. Je vais copier le détail du portefeuille, que nous avons spécifié ici comme itinéraire. Copiez, cliquez avec le bouton droit de la souris dans l'application, Nouveau dossier. Collez le détail du portfolio, sur l'entaky Prenez des notes. Ce que vous avez ici doit correspondre exactement à ce que vous avez indiqué comme itinéraire. Si vous faites autrement, cela ne fonctionnera pas. Oups, jetez un œil. C'est bon. Gagnez le détail du portefeuille, nous allons maintenant créer l'itinéraire dynamique lui-même. Nouveau dossier. Pour créer un itinéraire dynamique, nous devons le placer entre crochets. Ce que nous allons saisir ici, c'est l'identifiant inscrit sur la touche Entrée. Cela fait, nous devons créer une page dans l'ID. Cliquez avec le bouton droit sur l'ID, nouveau fichier. J'appellerai cette page point Gs. RFC pour générer le composant fonctionnel. Nous allons avoir un tag Hage One pour les articles pédagogiques. Je vais faire une page dynamique. Donnons le nom d'une classe et testons sept Excel. Consultez le navigateur. Quand je clique sur « Oups », quelque chose s'est mal passé. C'est bon. Oh, je me trompe. Les gars, nous devons spécifier la barre oblique comme ceci. Je pense que nous l'avons déjà fait. Lorsque vous rechargez l' application, cliquez. Tu peux voir ? Nous avons maintenant une page dynamique. Cliquons sur cet homme. Tu peux voir ? Nous avons la page dynamique ? Magnifique. Tout fonctionne parfaitement comme prévu, et j'adore le reste final. Voici la page sur laquelle J Maintenant, nous avons pu implémenter notre itinéraire dynamique. Lors de la prochaine conférence, nous allons récupérer le message et le faire afficher à l'écran. Croyez-moi, le résultat final va vous époustoufler. C'est désactivé pour le moment. Rendez-vous lors de la prochaine conférence. Restez concentré, prenez soin de vous. 47. Obtenir l'id sur une nouvelle page (dyamiquement): Lors de la conférence précédente. Nous avons réussi à transmettre l'identifiant de chaque article sur une nouvelle page. Lorsque vous cliquez sur l'un des éléments ici, nous transmettons dynamiquement l'identifiant sur une nouvelle page. Lorsque vous observez l'onglet, vous le verrez certainement là-bas. Cet article possède l'identifiant de l'un d'entre eux. Rappelez-vous que nous utilisons l'index comme identifiant. Dans cette conférence, nous allons procéder à la saisie de cet identifiant, et cela se fera avec des paramètres. Ouvrez le code VS. Dans l'application, nous allons créer un nouveau dossier appelé page. Dans cette page, nous allons créer un autre répertoire appelé portfolio Dt design. Dans le design du portfolio Dt, créons rapidement une nouvelle page Cliquez avec le bouton droit sur le nouveau fichier, puis nous l' appellerons point d'index GS. Une fois cela fait, fermez la page. Ouvrez maintenant le détail du portefeuille. Dans le cadre de l'itinéraire dynamique, nous devons ouvrir la page. Détail du portefeuille, identifiant et page. Fermez l'explorateur. Ce que nous devons faire ici, c'est mettre en évidence et effacer les composants fonctionnels de base que nous avons générés. Ensuite, nous allons avoir const portfolio, le définir sur une fonction flèche Exportons rapidement le portefeuille par défaut. Importons React depuis React. Nous devons prendre des accessoires. Le but est de récupérer l'identifiant et les données. Nous devons importer la conception détaillée du portefeuille. Importons rapidement le tableau de données. Terminé. Ici, nous allons renvoyer l'interface utilisateur. Nous allons utiliser des fragments de points de réaction. Enroulez les fragments, créons le design du portfolio. Conception détaillée du portefeuille. Fermez-le avec l'étiquette à fermeture automatique. La ligne d'imbrication consiste à transmettre les données sous forme d'accessoires dans la conception du portefeuille Data equal, data array, et ici nous allons faire props dots Params point ID N'oubliez pas que nous accueillons des accessoires ici, c'est magnifique. L'ID est égal aux accessoires et aux paramètres ID. Enfin, tableau de données égal, tableau de données. Consolons les paramètres. ID des paramètres P du journal par points de la console. Cela fait, en haut, nous allons utiliser le client. Nous devons passer du rendu côté mer à un rendu côté client. Cliquons pour consulter la console. Ainsi, lorsque vous cliquez sur un élément, je viens sur un I pour ouvrir la console. Ensuite, vous allez voir que l'identifiant de l'article est zéro. Rendons-le plus lisible. Voilà ce que je vais faire. L'identifiant est quel qu' il soit. Enregistrez, et ici, je veux cliquer sur un autre élément. Cliquons sur cet homme. Ouvrez la console et vous verrez que l'identifiant est deux. Deux 48. Une seule page (design de détails du portfolio): Continuons avec le design du portfolio Dido. Configurons rapidement la mise en page d'arrière-plan. Juste après le dernier df de la position absolue. Le voici. Nous allons avoir un autre df, donnez-lui un nom de classe. W dans le nom de la classe, nous allons lui faire afficher la grille, colonne du modèle de grille est 12. Faisons en sorte que sa position soit relative. L'espace gauche et droit est égal à zéro. Sur un appareil de grande taille, l'espace gauche et droit est également égal à zéro. Fermez le d, dans le d. Maintenant, donnons-lui l'étoile. Le contexte. Dégradé linéaire. Nous voulons avoir ses RGBA 238, 247, 251 et un à 90 degrés 247, 251 et un Nous voulons que cette part soit de 58 % sur 100. Ensuite, l'autre portion RGB A deux, 255 2551. Nous voulons qu'il occupe 52 % de l'écran. Ce n'est que mon cahier des charges. Tu peux faire plus de ton côté. Maintenant, dans la définition, nous allons avoir un autre de, lui donner un nom de classe, puis Column span 12. Sur un appareil de grande taille, colonne, étendue huit, marge inférieure. Nous voulons faire défiler la page. Sur un appareil de grande taille, le taper à gauche et de se séparer à droite est Sur un appareil plus petit, le taper à gauche et de séparer à droite est également Faisons en sorte que ce soit 20. Ensuite, nous savons tous que chaque article du portfolio contient plusieurs images. Affichons rapidement les images. Données, points, images, carte à points. Prends un objet. Prenons un D, donnez-lui un nom de classe. Appliquons rapidement la classe utilitaire. Nous allons avoir un écran flexible. Justifiez le contenu au centre. Mais sur un appareil de grande taille, nous voulons justifier le contenu jusqu'au bout ? Alignons les éléments au centre. Fermez le d. N'est-ce pas ce d, nous allons avoir le tag IMD, S R C equ, item, qui est ce type ici Fermez-le avec l'étiquette de fermeture SF. Quand vous voyez ventrical, le navigateur, et le voici. Tu peux voir ? Voici toutes les images qui correspondent au site Web de l' entreprise de livraison de nourriture. Nous avons toutes ces images dans la zone. Vous pouvez aller le vérifier dans les données au fur et à mesure. Nous avons maintenant réussi à afficher les images. Appliquons-y rapidement des styles. Sur les photos du portfolio. La hauteur sera automatique. Donnons-lui un nom de classe. La marge supérieure est de 20. Nous voulons que les bordures des images soient arrondies. Sur le navigateur, le voici. Tu peux voir ? Tout semble très beau. Une chose que nous ne voulons pas ici, c'est que la première image soit un conteneur débordant Contrôlons-le donc en appliquant la largeur. La largeur de votre sauvegarde dans le navigateur sera de 800, et maintenant nous l'avons. Magnifique. La ligne suivante consiste à implémenter les éléments situés à droite de l'écran. D'ailleurs, lorsque vous retournerez à la page d'accueil, si vous cliquez sur l'un de ces éléments, nous les récupérerons dynamiquement. Après avoir divulgué df. Nous allons avoir un autre DF. Maintenant, je veux être un peu rapide. Sur un appareil de grande taille, il suffit de le copier, puis de le suivre. De même, sur un appareil de grande taille, nous voulons que le px soit nul. Petit appareil, nous voulons également que le P X soit nul. Bien sûr, vous devez connaître l'équivalent CSS du Px et du reste des poêles Je vous ai tout montré. Nous allons maintenant avoir un autre dif, donnez le nom de cette classe div La marge tb est de dix, mais sur un appareil plus petit, la marge tb est de 24. La largeur sera totale. Sur LG, nous allons avoir une largeur maximale de 300 pixels. Toujours sur LG, nous allons avoir l'extrémité gauche de la séparation pardan droite pour n'en faire qu'un Le rembourrage à l'extrémité gauche, pardon à droite, sera de trois. Nous allons donc le faire adhérer du haut vers le haut. Au bas de la page, il y en aura 14. Cela aura donc sa position constante. Je pense que c'est la seule classe d'utilité que je n'ai pas expliquée. Et maintenant je l'ai expliqué. Magnifique. Après avoir fait cela. Nous allons avoir une étiquette Hedge One. Gagnez le Hedge one, nous allons afficher le nom du portefeuille. Donc, le nom du projet, pour ainsi dire. Je vais faire le nom du point de données. Voyons ce que nous avons. C'est bon. Voici Yum Food Company R. Donnons rapidement le style. Nous allons accéder à la classe utilitaire text d three cell. La marge inférieure est de quatre, donc la couleur du texte doit être cohérente dans nos couleurs. Utilisons donc un bleu clair. Pour huit FDE. Si vous le remarquez, vous vous rendrez compte que nous avons toujours été cohérents avec nos couleurs, y compris la taille de la police et le reste. C'est simplement parce que lors création d'une application professionnelle, nous devons être cohérents avec les polices, la couleur et le reste du design. Bien entendu, il s'agit d'un point important dont vous devez tenir compte. Oups, jetez un œil. Faisons en sorte que ce soit 20. heure actuelle, nous l'avons ici. Continuons. OK les gars, il n'y a aucune marge entre l'image et le nom. Allons-y. Nous devons régler ce problème à la fin. Le nom du projet n'est pas affiché. Passons à l'affichage de la description 1 et de la description 2. Nous devons maintenant utiliser une balise P. Description des points de données. Le voici. Donnons-lui rapidement le style. La taille du test sera de 14 pixels. Nous allons utiliser la taille de police. La marge inférieure sera de quatre. Ensuite, nous devons également être cohérents dans la couleur du test. Deux, deux, 370. C'est bon. Maintenant, nous l'avons fait. Un autre tag P. Mettez cette balise P, nous voulons afficher le point de données, la description 1. Voyons ce que nous avons, et en voici la description. Donnez-lui le nom de la classe et appliquons la classe utilitaire. Pour les classes utilitaires, tout sera pareil. Je dois donc juste surligner le copier-coller, venir ici. Quand tu économises, c'est magnifique. J'adore ça. C'est bon. Ceci fait, affichons le ciel juste après le tag P. Nous allons avoir un d pour donner ce nom de classe D. Nous allons l' avoir Display Flex, et nous allons l' avoir Flex Rb. Une étiquette « H ». Donnez rapidement ce style. Les gars, avant de poursuivre, je pense que nous allons avoir un surlignage entre les balises P. Juste après ce tag P, nous allons avoir un autre tag P. Donnez un identifiant au tag IP, puis surlignez. Nous allons faire des descriptions de projets. Voyons voir si c'est le cas. Ce que je vais faire maintenant, c'est lui donner un nom de classe. La marge en haut et la marge en bas seront deux. Le texte, nous allons le retoucher. 20 pixels, la police est Sis. C'est bon. C' est exactement le lieu de villégiature attendu. Continuons avec ce D. La marge droite sera de cinq. Le texte, faisons-en 14 photos. Nous restons cohérents ici. Le terrain du bar sera d'un bleu très clair. 65f1. Sur un appareil de grande taille, nous voulons changer la couleur de fond de la barre. Px deux, Py, un. Nous voulons que les coins soient arrondis, les polices, les marges en bas. Les textes, sur grand appareil, nous voulons changer la couleur du test en 6a787 d. Gagnez le terme H intérieur de la balise H one, vous allez afficher Design UI X. Enregistrez et voyez ce que nous avons sur le navigateur. C'est bon. Jetez-y un coup d'œil. Ça a l'air très joli. Ce que je vais faire maintenant, c'est le surligner et le dupliquer autant de fois que je le souhaite. Mettez en surbrillance l'étiquette Hadron. Je vais en dupliquer un, deux, trois, quatre, cinq. Sûr, beau. Ça a l'air tellement beau. Vous pouvez modifier les échelles. Le point suivant est Vous pouvez réagir, et ainsi de suite. C'est bon. Maintenant, nous en avons terminé avec le design et tout semble exceptionnel. La ligne de fin suivante consiste à créer un espace entre les descriptions et l'image. Faisons cette correction dans le prochain leurre. 49. Défi spatial du portefeuille (création): Lors de la conférence précédente, nous avons rencontré un défi avec l' image et la description. Si vous observez attentivement, vous vous rendrez compte qu' il n'y a pas d'espace entre les deux. Je veux donc que vous publiiez la vidéo et que vous essayiez autant que possible de la corriger de votre côté. OK. Alors laissez-moi vous montrer comment je l'ai réparé. C'est vissé en haut, là où se trouve le parent de. C'est le parent de qui contient tous les objets juste après la fin du travail. Tout ce qui se trouve ici se trouve juste à l'intérieur ce d. Si vous observez le dv, vous vous rendrez compte que sur un appareil de grande taille, nous avons spécifié que les marges gauche et droite étaient nulles Modifions-le en deux s dans le navigateur. Nous avons maintenant un petit espace entre les deux. Allons-y pour augmenter la valeur. Je vais faire en sorte que ce soit sûr. Et au fait, c' est une spécification mentale. Vous pouvez essayer une autre valeur à la fin. Tu peux voir ? Maintenant, il y a de l'espace entre les deux. Et tout fonctionne parfaitement comme prévu. Vérifions-le sur appareil mobile. Tu peux voir ? Sur un appareil mobile, ce fond est bleu. Le contexte du test ici met en évidence l'échelle, et c'est exactement le résultat attendu. Très bien, donc tout fonctionne parfaitement bien. Le plus important en ligne est de mettre en œuvre le suivant, l'embarquement en avant-première. Faisons-le lors de la prochaine conférence. 50. Button suivant et précédent: Le. Bon retour en classe. Dans cette conférence. Nous allons implémenter les fonctionnalités suivantes et précédentes afin que, lorsque l'utilisateur clique sur le bot suivant, nous puissions ouvrir le projet suivant dans les détails du portefeuille Il en va de même pour le boulonnage précédent. Permettez-moi de vous le démontrer rapidement afin que tout le monde le comprenne suffisamment bien. Voici le projet final. Lorsque je fais défiler l'écran vers le bas, vous verrez le boulonnage précédent et le boulonnage suivant Je veux que vous observiez attentivement. Maintenant, si vous observez attentivement, vous vous rendrez compte que dans le boulonnage précédent, nous avons l'image du portfolio Dans le prochain boulonnage, nous avons l' image de la livraison de nourriture. Tu sais pourquoi. Tout simplement parce que lorsque vous cliquez sur le boulonnage précédent, le projet précédent à afficher est le portfolio, Axal le projet suivant est la livraison de nourriture Permettez-moi de vous montrer, lorsque je clique sur Suivant, voyez-vous, voici maintenant le projet de livraison de nourriture. Si vous observez le prochain embarquement, le site Web de l'immobilier est le suivant, et le précédent est le site Web de la gestion de l' hôtel. Implémentons-le dans le code VS. Tout en haut, nous allons importer le crochet d'état utilisé et le crochet d'effet d'utilisation. Nous devons également importer le routeur d'utilisation. À partir de la barre oblique suivante, navigation. Importons rapidement la police Google. que nous avons déjà fait. Il ne nous reste plus qu'à copier. Ouvrez la page, faites défiler la page vers le haut, copiez des lignes quatre à neuf. Fermez-le, collez-le. Magnifique. Déclarons les variables d'état nécessaires et l'ensemble des fonctions. Au sein du composant. Initialisons rapidement le routeur d'utilisation. C'est une fonction, bien sûr, il faut l'invoquer, puis l'affecter à une variable. Cost router equ use router, déclarant les variables d'état Nous allons avoir le prochain tableau de bord défini. De plus, nous allons avoir, il suffit de le surligner puis de le dupliquer. Ici, nous allons avoir le précédent, et nous allons définir le précédent. C'est aussi simple que ça. Dans le cadre de l'effet d'utilisation, nous devons implémenter la fonctionnalité. Si Js est un point passe, si Js est un identifiant de passe point, les données égales sont lues longuement. Tapons rapidement le code, et je vous expliquerai mieux quand nous aurons terminé. Ici, nous allons nous fixer à zéro. Sinon, nous allons placer à côté de Json point paz ID plus un Après avoir fait cela pour le suivant, dupliquons-le rapidement pour le précédent. Remplaçons toutes les occurrences de set next two set previos Commande D pour surligner les deux, puis ici Nous allons définir le précédent, et passer à moins un parce que nous sommes en train de décrémenter Lorsque vous cliquez sur Suivant, vous procédez à une incrémentation. Mais lorsque vous cliquez sur précédent, vous revenez en quelque sorte en arrière. Oui, donc c'est ce que c'est. Ceci fait, implémentons les bodins, puis appliquons cette fonctionnalité Juste après ce d de fermeture, nous allons avoir un autre d. Donnez à ce d un nom de classe. Nous allons connaître sa position relative. Faites-lui afficher la flexibilité, l' arrière-plan sous forme de couleur. La hauteur sera de 48. Le texte, parce que nous allons afficher le texte à l'intérieur, sera de couleur blanche. Dans ce df, nous allons avoir un autre div, donnez-lui un nom de classe. Nous allons maintenant utiliser l' interpolation de chaînes car nous attendons une expression de script Java entre les deux D'ailleurs, la touche arrière est située dans le coin supérieur gauche du clavier juste en dessous de la touche d'échappement. La largeur sera de 1/2, ce qui, dans le CSS réel, atteindra 50 %. Nous allons avoir un affichage flexible : aligner les éléments au centre, justifier le contenu au centre. Housse BG. Ensuite, nous voulons utiliser la police Google ind point, fermer le D. Encore une fois, nous devons utiliser notre étoile réelle. Bien entendu, vous devez savoir ce que nous voulons faire en ce moment. Nous voulons spécifier l'image de fond. Utilisons un sac en plastique. URL. Rayon de données a pris des images de points précédentes. Et nous allons saisir la première image directement dans le tableau d'images. Enregistrez et voyez ce que nous avons. Composants, carte coulissante, ma carte coulissante. Tu es sérieux ? Oups, les gars. C' est quoi ça, bordel ? Essuyez-le. Nous n'en avons pas besoin ici. Et je pense que tout ira bien maintenant. Vas-y, vas-y. Oups. Encore une fois, passons à la page a. Oh, mon Dieu. J'ai fait une erreur, ma part, et j'en suis désolée. Collez-le ici. H. D'accord. Nous avons maintenant une erreur, impossible de lire les propriétés d'une image de lecture non définie Une chose que nous allons faire maintenant, c'est avant le point, appliquons un point comme celui-ci, et cela résoudra ce problème. Jetez-y un coup d'œil. Nous avons maintenant le précédent. Vous en comprendrez certainement l'essentiel. Nous allons avoir un tag A. Stylisons rapidement le tag A. Nous avons un centre de contenu Display Flex Justify, puis la couleur est la couleur réelle que nous avons utilisée. Le pointeur du ferme-porte, la transition, la couleur 3D, la durée, donc c'est 300 Le terrain du bar 405 b66. L'opacité du BG, portons-la à 90. Aligner les articles au centre. La largeur sera totale, et bien sûr, vous devriez connaître l'équivalent CSS maintenant. Et la hauteur sera totale. Cela fait, implémentons rapidement le système en un clic. Dans le code HTML interne de la balise A, nous allons faire le projet précédent. Saf, sur le navigateur, et puis vous l'aurez Cela fait, nous devons afficher l'icône précédente. Ouvrez la ressource de code. Voici l'icône précédente. Surlignez et copiez-le. Collez-le ici. Formatez le code pour obtenir une indentation correcte. Réglé sur le navigateur, vous l'avez maintenant. Magnifique. Maintenant, lorsque vous cliquez sur ce bouton, rien ne se passe. Implémentons rapidement le système en un clic. E Dans le tag A. Il va y avoir un clic. En cliquant sur ce bouton. Nous allons tracer un point. Poussez. Qu'allons-nous faire valoir ? Cochez le sac, puis coupez les détails du portefeuille. Il devrait donc en être exactement de même ici dans le système de routage dynamique. Détail du portefeuille. OK. Slash, précédent, enregistrez les modifications C'est bon. Essayons donc de sélectionner un article. Faisons défiler rapidement la page vers le bas. Maintenant, lorsque vous cliquez sur précédent, cela nous amène au projet précédent. Tu peux voir ? Mettons-le maintenant en œuvre pour le prochain. Il y a de l'air dans le terminal. OK, les gars, voyez ce que nous allons faire maintenant. Vissez vers le haut. Laisse-moi te montrer. Alors, je le fais. Nous allons faire quelque chose comme ça. Enregistrer. Voyons voir. Et le précédent Cela exigeait que nous le fassions pour le titre. Faisons-le ici. Faisons-le ici. Faisons-le partout. Enregistrer. Faisons de nouveau grève. Nom du jour 177. espoirs bien datés. Le voici. Maintenant, le problème est résolu. OK. Sympa. Magnifique. Je pense que nous devons également mettre en œuvre le suivant afin que tout soit équilibré. Maintenant, ce que je vais faire rapidement, c'est souligner ce de. Tu vois ce dé par ici. Ça s'arrête là. Écrivez aux lignes 138. Copions deux lignes, une, 38. Surlignez et copiez, venez ici puis collez-le. Enregistrez dans le navigateur. Maintenant, nous avons le précédent. Modifions rapidement les propriétés. Tout d'abord, voici le prochain projet. Sauvegarder et C. Maintenant, nous avons le suivant. Vous pouvez voir que la flèche pointe vers la gauche Utilisons donc le propol SVG pour le prochain W dans la ressource de code, copiez le SVG suivant, puis effacez-le et collez-le Enregistrez et formatez le code pour une indentation correcte. Lorsque vous consultez le navigateur, nous avons maintenant le suivant. Code. Que devons-nous faire d'autre ? Nous devons maintenant appeler l'image réelle pour la suivante. Ce que je vais faire ici, c'est ce que je vais faire ensuite. Nous devons mettre à jour le suivant ici, puis appeler l'image. Comme nous sommes ici, nous devons l' emballer pour le prochain projet. Lorsque vous enregistrez et quittez le navigateur. Passons à la suivante. Rentre chez toi. Maintenant, repartons à zéro. Cliquons sur cet homme. Précédent. C'est bon. Ensuite, magnifique. Ensuite, magnifique. Prochaine. Tout fonctionne parfaitement bien. Cela fonctionne. Très bien, les gars, nous en avons donc terminé avec le portage suivant et précédent. J'espère que cette conférence vous sera utile. C'est bon. C'est éteint maintenant. Dans la prochaine conférence, nous commencerons à implémenter la section Abt M. Rendez-vous lors de la prochaine conférence. 51. À propos de la mise en page: Bonjour. Bon retour en classe. Dans cette conférence, nous allons concevoir les composants de l'Aba M. Rapidement, il nous faut le faire. Commençons. VSCode, ouvrez l'explorateur S RC components, dans le répertoire Abad M, cliquez avec le bouton droit pour créer un nouveau fichier appelé Abat Mi Dot s. Générez le composant fonctionnel Fermez l'explorateur. Passons à la conception de la mise en page. Comme d'habitude, nous allons utiliser les fragments. Fragment de point React. Gagnez les fragments, nous allons avoir un d. La couleur de fond sera f3d Donnons-lui les 250 premiers pixels du brevet. Donnez-lui une marge dans les dix premiers. Le fond du rembourrage est de 100 pixels. Sur un appareil de grande taille, le fond du rembourrage. Faisons en 600 pixels. Nous allons avoir sa position relative. Sur un appareil de grande taille, la hauteur sera de 800 pixels Un autre. Nous allons l' avoir dans un conteneur, et la marge sera de. Tout ce qui se trouve dans ce t sera centré car les marges gauche et droite seront égales. Maintenant, nous allons avoir une étiquette Hedge One. Dans le code HTML interne de la balise Hage one, nous allons nous occuper de moi. Mettons-le au courant. Appliquons également les classes utilitaires sur la balise Hage one. Le texte fera 240 pixels, le W 8 %. Chauffage par trop-plein. Position absolue. Sur un gros appareil, il y aura 40 en partant de la gauche. Sur un appareil de taille moyenne, il y aura 30 en partant de la gauche. En haut, nous allons avoir -50 pixels. La couleur du texte e7fc. Bien. Vérifiez-le dans le navigateur. C'est bon, rien ne se passe. Reproduisons rapidement ces composants dans les pages. Sortez du Steve. Ensuite, nous allons faire un rendu sur moi. Et assurez-vous d'importer ces composants en haut de la page. Il a été automatiquement importé pour moi. C'est bon. Maintenant, nous revenons ici, en toute sécurité sur le navigateur. rouge. C'est bon. Et voilà. D'accord, donc, l'arrière-plan n'apparaît pas. C'est simplement parce que nous avons espacé le support carré pour un style personnalisé. Effectuons rapidement les ajustements nécessaires dans le support carré. Et il l'a fait. Magnifique. Après le remorqueur Hedge One, nous allons avoir un autre remorqueur Hedge One, et cette fois-ci, je vais me concentrer sur moi-même Donnons-lui rapidement l'étoile. Faisons en sorte que sa position soit relative. La police sera Rector Block. Texte, cinq fichiers Excel. Encore une fois, en ce qui concerne la couleur du texte, nous allons rester cohérents avec la couleur de l'en-tête. Je vais faire 48 AF eD. Maintenant tu l'as compris. Marge inférieure. Ce sera cinq, et la marge maximale sera également de -40 Sur un appareil médian, le rembourrage à gauche et le rembourrage à droite seront de 24 Et E, nous allons taper à gauche et faire le patron à droite pour obtenir cinq points sur l'autre point de rupture allons enregistrer et voir ce que nous avons si le titre est correctement fait, et le voici. Magnifique. Tout est correctement aligné. C'est bon. Parfait. Bien. Avant de continuer, donnons rapidement un identifiant à ce D. OK ? ID, equ, enregistrez le projet, commande B pour ouvrir l'explorateur, passez à la tête gz Regardons le lien pour voir si la référence est correcte. Il s'agit de l'Abt M, et nous avons ciblé ici le composant A. Je vous conseille de surligner et C. Retournez à Abt M , puis collez-le comme ceci Enregistrez, voyons si cela fonctionne. Maintenant, je clique sur le bouton À propos de moi. Boum. Il se déplace vers les composants Abat me Portfolio, boum, Hm. Enfin, Hm. Maintenant, faisons-le encore une fois. À propos de moi et de Boom. Magnifiquement fabriqué. C'est bon. Continuons. Fermez l'explorateur. Maintenant, tu dois écrire sur toi-même. Après le tag Hage one, nous allons avoir un tag H four. À l'intérieur. Je vais juste faire du Knack in Software avec un fonctionnement frontal et dorsal Oups, jetez un œil. C'est bon. Enregistrer. Vérifions-le. Bien. Stylisons rapidement le H f t. Faisons en sorte qu'il soit relatif. Faisons en sorte qu'il soit relatif La largeur sera totale. La largeur avant sera de 300. Sur un appareil de taille moyenne, nous allons avoir une largeur de 3/4, ce qui correspond à 70 % en CSS. Sur un grand appareil, W 2/3. Sur un appareil de grande taille, la largeur sera de 66,6 % de l'onglet Sur un très grand appareil, W 1/2 Le front sera recteur. Le texte. Nous allons rester cohérents avec le texte, deux, trois, 740. La taille de police et la hauteur de ligne sont deux Excel. La marge inférieure est de dix, le pardon à gauche et le pardon à droite sont cinq, sur un appareil médian. Le P x, qui représente le pardon gauche et le pardon droit, sera de 24. Voyons voir s'il est bien aligné maintenant. H. Magnifique. Nous sommes en train de nous faire. Faisons d'autres arrêts. Après la chaleur, tirez quatre. Formatons le code. Bien. Nous avons maintenant une indentation appropriée Après la quatrième manche, nous allons avoir une section. Dans la section, nous allons avoir une balise p. Avant de passer à la balise P, donnons-lui l'étoile. Nous allons avoir sa position relative. Nous allons faire en sorte que ce soit Display Flex. Le sens de flexion est indiqué par deux points. Sur un appareil de grande taille, le sens de flexion va être enroulé. séparation à gauche et à droite est de cinq. Sur un appareil de taille moyenne. Bien sûr, ce qui devrait rester cohérent. Il y aura 24 heures de séparation à gauche et à droite. OK. Bien. Dans le tag P, je dois juste écrire des points sur moi-même. J'ai donc copié puis collé l' écriture dans la balise P. Vous devez savoir exactement ce qu'est la tête droite pour décrire vos capacités. Cela fait, lorsque vous consultez le navigateur, ce sont ceux-ci. Nous allons donc diviser l'écran en trois parties différentes sur un gros appareil. W dans le tag P. Donnons le nom de la classe. Nous allons utiliser la chaîne dans la tapulation à cause de l'astuce de Google La largeur est pleine. Faisons-le rapidement sur un gros appareil. Sur notre appareil, nous allons avoir une largeur de 1/3. Maintenant, c'est la première partie. Il occupe une partie de l'ensemble de la section. Compris, magnifique. Le test, la couleur du test, bien sûr, nous allons rester cohérents. Je dois juste le récupérer d'ici. C'est fait. Le voici. Coller. La marge droite sera nulle. La marge inférieure est de cinq. Sur un appareil de grande taille, la marge droite sera de quatre. Je n'aime pas la façon dont la police est faite, nous voulons la rendre un peu plus claire. Ouais. Accédez rapidement à la page vers s, qui est la page parent. Copions rapidement les pods. Faites défiler l'écran vers le haut, puis collez. Encore une fois, nous allons saisir celui-ci des lignes sept à dix. Alors collez-le ici. Faites défiler vers le bas. Appliquons maintenant la police. Nom de la classe Ind point. Enregistrez dans le navigateur. Vérifions-le. Cela semble tellement beau. J'adore ça. C'est bon. Mais je remarque quelque chose qui n'est pas en forme. Ne vous inquiétez pas, nous allons certainement y apporter une solution lorsque nous aurons terminé. Et c'est exactement ainsi que je veux que la conférence se termine. OK, très bien. Souligne rapidement le tag P, dupliquez-le deux fois. SF, c'est exactement le résultat attendu. Et j'adore ça. Vous pouvez modifier l'écriture ici et ici. Maintenant, je vais juste publier la conférence, puis revenir à mon portfolio, copier et coller. L'ensemble de ce droit à un cheveu décrit un six. De votre côté, faites tout ce qui est en votre pouvoir pour vous décrire correctement. Parfait. Maintenant, la ligne suivante consiste à implémenter les clics sur les éléments. Je pense que nous devrions le faire lors de la prochaine conférence. Mais avant de passer à la prochaine conférence, vous verrez ceci à propos de mon contexte. Je veux le pousser un peu vers le haut. Je veux en faire un défi pour chacun d'entre nous. Posez rapidement la conférence, puis essayez autant que possible de la corriger de votre côté. Ce défi est très important car il nous ouvrira les yeux sur les erreurs courantes que nous commettons lors de l'utilisation de t wind CSS. Maintenant, publiez la conférence et réglez-la vous-même. C'est bon. Laisse-moi régler ça avec toi. Retournez au code VS. Faites défiler l'écran vers le haut, où se trouve la haie et l' étiquette de l'Aba me. Maintenant, lorsque vous arriverez à cet endroit, vous vous rendrez compte que par le haut, nous voulons que cela commence à -50 pixels Mais pour le moment, il y a quelque chose qui ne va pas. Là où nous avons le top, nous ne l'avons pas implémenté avec le tableau de bord. Vous devez suffixer la classe utilitaire Tail Wind avec un tiret pour qu'elle fonctionne Le voici. Tu vois, maintenant c'est en haut. Magnifique. Tout va bien, portfolio sur ma maison. Alors dites-moi, ça n'a pas l'air bien ? Bien sûr, c'est le cas. C'est désactivé pour le moment. Rendez-vous lors de la prochaine conférence. 52. À propos de la logique des composants: Nous voilà de retour en classe. Dans cette conférence, nous allons configurer les variables d'état nécessaires et définir les fonctions à utiliser. Faisons-le rapidement. Code VS en haut. Importons le State Hook. Les hooks ne sont pas autorisés dans les composants du serveur. Par conséquent, nous devons passer aux composants clients. Importons rapidement les données. Une donnée issue d'une barre oblique. Et au sein des composants. Const est inversé, set est inversé. E indique, l' état initial sera f. Il suffit de surligner le duplicata trois fois. Ici, nous allons l'avoir délavé. Ensuite, cet ensemble passe à quatre. Celui-ci va être un index de sélection. C Définissez l'index du sélecteur. Assurez-vous de remplacer ce type par un majuscule Set selector index Nous allons le mettre à zéro. OK. Données cartographiques. Configurons-le pour définir les données cartographiques. L'état initial portera sur les données. Nous allons avoir le premier élément des données, qui servira d'état initial. C'est bon. Après avoir fait cela. Réunissons tout cela dans une fonction. Maintenant, nous allons avoir const mes fonctions, définies pour fonctionner, dans lesquelles nous allons intégrer le OK. Set inversé Restons faux. Satisfait. Automne. Définissez les données cartographiques, définissons-les en données. C'est bon. Faisons cliquer sur la carte d'identification. Const. Gérez le clic sur la carte. Et ici, nous allons prendre en compte les données, les index. Donnons-lui un format rapide. Cette fonction va mettre à jour l'état initial vers un nouvel état. Let's set passe à true. Set est passé à true. Définissez l'index sélectionné sur index. Nous allons faire des choses ici. Définissez un délai d'expiration. Mes fonctions, puis la transmission de données, et nous les voulons. En gros, ce que nous essayons de faire, c'est que lorsque vous cliquez sur la carte, elle s'estompe. Il va falloir un certain temps pour s'estomper et passer sur une autre carte. Ne t'inquiète pas. Encore une fois, lorsque nous commencerons à le mettre en œuvre, vous en comprendrez certainement l'essentiel. Fais-moi confiance. Vous en comprendrez certainement l'essentiel. Ceci fait, nous allons implémenter la fonction suivante et la fonction précédente. C et suivant. Réglez-le sur une fonction R. Nous allons maintenant avoir une instruction e ici, qui dit que si l'index sélectionné est inférieur à cinq, nous allons appeler la fonction handle click. Gagnez la fonction, nous allons obtenir les données, puis sélectionner l'index plus un. Nous allons obtenir les données, puis les incrémenter d'une unité. Encore une fois, index sélectionné plus un. Flèches, cliquez sur Gérer le panier. À propos des données. Nous allons conserver le premier article. Si le bouton n'est pas cliqué, nous allons conserver le premier élément Nous allons tout garder par défaut. C'est bon. Je parle trop. Maintenant, implémentons le handle previos. Il suffit de le surligner puis de le dupliquer. Vous pouvez également copier et coller. Gérer le précédent. Si l'index sélectionné n'est pas égal à zéro, nous allons appeler la fonction Handle Click, accéder aux données qu'il contient, puis les décrémenter d' C'est aussi simple que cela, sinon nous allons conserver le cinquième article, comme celui-ci. OK, très bien. Maintenant que nous avons fini de configurer la logique, ne vous inquiétez pas. Lors de la prochaine conférence. Lorsque nous commencerons à utiliser cette logique, vous aurez certainement le dernier mot. C'est pour le moment. S lors de la prochaine conférence. Restez concentré et prenez toujours soin de vous. 53. Implémentation en button grille: Nous avons maintenant terminé d'implémenter la logique. Appliquons-le rapidement à l'interface utilisateur. Faites défiler vers le bas. La première chose que nous allons faire ici est de créer la mise en page d'arrière-plan. Bien entendu, c'est ce que nous avons fait tout au long des conférences. Ce que je vais faire maintenant, c'est copier et coller rapidement . Collez-le ici. Fermez le d. Nous avons juste le fond, un dégradé linéaire. Nous ne faisons que préciser la disposition d'une tête. Sur un appareil de grande taille, nous avons fixé la marge maximale à -60. Dans cette annonce, nous allons avoir une section. Appliquons les classes utilitaires. Réglons-le sur container. Nous allons le faire afficher la flexion, direction de flexion est en colonne, la marge Dash Auto. Ensuite, sur un appareil plus petit, nous allons le faire fléchir. La direction de flexion sera le roulis. Le rembourrage de gauche à droite est de cinq. Sur un appareil de taille moyenne, le rembourrage gauche-droite est 24 La cuve à marge, faisons-en 50 pixels. Sur un appareil plus petit, la marge de tolérance sera nulle. Faisons en sorte qu'il se transforme. Traduisez Y, cela fera -100 pixels. Dans cette section, nous allons avoir un autre D, à donner le nom de la classe. Ensuite, nous allons le diriger sur un appareil plus petit, nous allons l' avoir Display Flex. Ça va être plein. Encore une fois, sur un appareil plus petit, la largeur sera de 50 % 1/2. Sur un grand appareil, la largeur, faisons-la 7/12. Comment. Ferme-le. Maintenant, dans les profondeurs, nous allons cartographier les données et les afficher à l'écran Mais avant de poursuivre, je voudrais vous montrer quelque chose. Faites défiler l'écran vers le haut. Ici, où nous avons pris l' index et les données. Auparavant, j'ai aimé ça, ce qui n'est pas correct. Vous devez savoir que ce sera un index. Magnifique. Juste une petite erreur typographique Et je pense que tout le monde fait des erreurs. Et d'ailleurs, je ne suis pas un robot. C'est bon. Nous allons maintenant créer une carte à points de données. Je vous en prie, je veux que vous fassiez attention ici. Nous cartographions les données. Nous allons prendre en compte le premier paramètre, qui représente chaque élément du tableau ou des données. Ensuite, le deuxième paramètre est l'index, qui sert d'identifiant. Maintenant, en dehors de la parentalité, nous allons avoir une fonction flèche Cette fois-ci, nous allons renvoyer l'interface utilisateur. Pour cette raison, nous devons utiliser la parentalité, et non le co-bracket F W dans la parentalité, nous allons maintenant écrire l'interface utilisateur Tout d'abord, nous allons avoir une étiquette A. Spécifiez le clic sur cette balise A. D'ailleurs, chaque fois que vous souhaitez spécifier le clic, vous devez absolument passer du rendu côté serveur au rendu côté client Faites défiler l'écran vers le haut, puis le voici. Si vous ne l'avez pas fait de votre côté, laissez-moi l'effacer pour plus de clarté. Je vais juste utiliser le client. est aussi simple que ça. OK. Continuons. R à l'intérieur. Nous allons invoquer le clic sur la carte d'identification. Je me suis rendu compte qu'il y avait également une erreur dans l'orthographe du clic sur la poignée. Voici donc exactement comment l'épeler. Si le vôtre n'est pas comme ça, il ne sera pas enregistré. Alors fixez-le ici, ça va être Handle Card Click. Publiez la vidéo, apportez les corrections nécessaires, allons-y. Gérez le clic sur la carte. Ensuite, nous allons prendre en tant qu'élément un index. Donnons-lui un style. La boîte Shadow 48 e DE. Il faut rester cohérent. Nous allons avoir moins cinq pixels, ou aux quatre coins de la carte, nous allons appliquer l'ombre de la boîte Dix pixels, 20 pixels, zéro pixel. L'ombre de la boîte ne sera pas visible sur l'un des côtés. Cool. Maintenant, donnons-lui un nom de classe. Dans le nom de la classe, nous devons le faire en cochant la case arrière. La position va être relative. Le fermeur sera un pointeur, une transaction, tout. Ensuite, nous allons le faire transformer. La durée, ça va être de 300. Recadrons-le. Les bordures de cette carte vont être arrondies. Cette carte va donc servir de butin. Ne vous inquiétez pas, vous aurez une idée lorsque nous aurons terminé les implémentations. Il n'y a pas de quoi s'inquiéter. D'ailleurs, tu peux toujours poser des questions autant de fois que tu le souhaites. Et je serai là pour vous répondre immédiatement. Excel arrondi. Nous allons l'avoir au centre, le rembourrage, faisons-en six Sur un gros appareil, le rembourrage, faisons-en dix. Faisons-le afficher la flexion, direction de flexion est une colonne, justifier le contenu au centre, puis aligner les éléments au centre, et c'est tout pour la balise A. Dans la balise A, donnez-lui un nom de classe. Ce d va donc servir de conteneur à l'image. Nous allons donner la largeur avec d 16, hauteur 16. Puis un appareil plus petit, largeur dix. Également hauteur dix. Un appareil plus grand, la largeur sera de 16. Encore une fois, avec un appareil plus grand, la hauteur sera de 16. Magnifique. Nous allons avoir un IMG pour afficher l'image, S RC, et ici, cet élément qui représente chaque élément du tableau. Nous allons donc faire item point. Ainsi, chaque fois que nous voulons accéder aux éléments que nous avons dans le tableau, nous allons utiliser ce paramètre. Point de l'article, IMG. Rapprochez-vous grâce à l'étiquette à fermeture automatique. Laissez-moi vous montrer rapidement. Nous avons ici les données g. Lorsque vous parcourez, vous verrez les données à propos. Nous avons donc le décompte, le titre, l'IMG et les tableaux d'informations Et tous les stups se trouvent directement dans l'objet du tableau, d'accord ? Et nous l'avons réparti en six endroits. Ainsi, lorsque vous faites un point, comptez, vous obtenez le compte d'un. Titre de l'article par point, faites IMG ou R etc. Fermons-le donc rapidement, fermons l'explorateur. Lorsque vous enregistrez, voyons s' il apparaît dans le navigateur. Cela semble beau, mais ce n'est pas le résultat escompté. D'accord ? Les images sont parfaitement dans le D. Je crois que je l'ai expliqué tout à l'heure. L'article est sur un rouleau. Ce n'est pas ainsi que nous voulons que les articles soient. Faisons quelque chose comme ça. Nous allons avoir un d, donner le nom de la classe. Nous allons avoir une grille d'affichage, sur un appareil plus petit, du grain C à une très grande, du grain trois. L'écart est de six, marge droite, zéro. Sur un appareil de grande taille, la marge droite sera de dix. Fermez le d. Maintenant, dans ce d, laissez-moi vous montrer. Copiez du support d'ouverture vers le support de fermeture. Il vous suffit d'appuyer sur la marque d'option , puis d'appuyer sur la touche fléchée pour la déplacer dans le Steve. Ou vous pouvez aussi bien le surligner, couper puis le coller dans le Steve. Enregistrez et voyez ce que nous avons. Maintenant, tout est aligné comme prévu. Magnifique. Mais pour le moment, lorsque vous survolez les boutons, vous pouvez voir que rien ne se passe Même lorsque vous cliquez, rien ne se passe. Tu peux voir ? Implémentons donc le on hover. Ensuite, lorsque l'utilisateur clique sur le bouton, nous voulons que le bouton soit surligné Nous devons également afficher le titre dans le boton. OK ? Revenez au code FS. Après le D de fermeture qui sert de conteneur IMG, nous allons avoir une étiquette H four. Gagnez le H Four. Nous allons faire le titre de l'article par points. Enregistrez et voyez ce que nous avons. Les titres sont maintenant affichés, mais ils ne sont pas bien alignés. Alignons-le rapidement. Donnez-lui maintenant un nom de classe. Nous allons utiliser l'interpolation de chaînes car nous attendons un script Java à l'intérieur Faisons-le tester, aligner, centrer. Mais sur un appareil plus petit, la taille de police et la hauteur de ligne sont de 0,8 RM. Sur un appareil plus grand, testez Excel. La police, tableau recteur. Le B doit être sur Cp. Couleurs de transcription, durée 500. Encore une fois, devons-nous faire quoi ? Groupe, nous allons l' avoir en groupe, survolez. Texte, blanc. Lorsque nous survolons le bas, le texte passe au blanc Sinon, pour le texte en couleur, nous allons conserver la couleur que nous avons utilisée jusqu'à présent F sept, 626d, la marge supérieure étant C'est bon. Passons maintenant aux conditions. Faisons-le comme ça. Si l'index sélectionné est égal à index, nous voulons afficher le texte en blanc. Texte blanc, sinon, rien ne se passe, enregistrez et voyez si cela fonctionne. Vous voyez, lorsque je survole, le texte devient blanc Une autre chose que nous allons faire est d'afficher le décompte. Lorsque nous survolons ce type, nous voulons afficher le nombre de cet élément directement dans le tableau S'il apparaît comme numéro un, numéro deux , trois, nous devons le faire. Juste après la balise H four, nous allons avoir un di, donner le nom de la classe. Encore une fois, utilisons l'embout à barres. Nous allons avoir sa position absolue. À partir de la droite, nous allons l' avoir moins deux, et à partir du haut, nous allons l'avoir moins deux. Nous allons le faire transformer. C'est la transition qui va être terminée. Durée, 500. L'opacité est nulle. Fermons rapidement la profondeur pour que l'erreur de moine puisse se produire. Groupez, survolez, implémentons le survol. Lorsque vous passez la souris dessus, l' opacité sera de 100. N'oubliez pas que nous avons défini l'opacité par défaut à zéro. Lorsque vous placez le pointeur sur la carte, vous réglez l'opacité sur 100, puis l'élément s'affiche à l' est aussi simple que ça. Le show shadow Excel. La largeur sera de 12, la hauteur de 12. Les coins vont être arrondis. Le contexte. Pour les articles pédagogiques, nous allons utiliser un arrière-plan aléatoire. B, tiret vert, 500. Ne vous inquiétez pas, je vais utiliser le fond d'origine. Nous allons avoir un écran flexible. Justifiez le contenu pour le centrer. Les éléments sont alignés au centre. Que devons-nous encore faire d'autre ? Les polices de caractères, allons-y. polices font un bot. Tex et blancs. Et la police de caractères, rappelle-la déposée. De plus, le texte X est bon. Gagnez le d, nous devons afficher le nombre, le point de l'article, le nombre, c'est aussi simple que cela. Enregistrez et voyez ce que nous avons. Lorsque je passe la souris sur la carte, le décompte s'affiche dans le coin supérieur droit de la carte Jette un coup d'œil. C'est donc le numéro un du tableau, deux, trois, quatre, cinq, six, et j'espère que vous aurez compris. Que pouvons-nous faire d'autre maintenant ? Nous voulons qu'il apparaisse d'une très belle manière. Faisons-le pivoter en quelque sorte. Maintenant, ce que je vais faire. Parfois, la meilleure explication que vous puissiez donner est la mise en œuvre. Permettez-moi donc de mettre en œuvre ce que j' ai en tête afin que vous le compreniez. Si l'index sélectionné est égal à l'index. L'opacité sera de 100 et non de zéro. Faisons-le ensuite pivoter de 12 degrés. Nous allons donc le faire pivoter un peu, et ensuite, que se passe-t-il ? Groupez, faites une rotation de 12. Vérifions-le rapidement. Tu peux voir ? Remarquez que lorsque je passe la souris sur les boutures, le nombre de coupes est incliné Cela est dû à la classe utilitaire de rotation que nous avons implémentée. Cela fait, nous voulons mettre en évidence le point lorsque vous cliquez dessus Faisons-le rapidement. Faites défiler la page vers le haut , où se trouve la balise A. D D. Voici le nom de classe de la balise A. Gagnez le batik. Passons maintenant à quelques scripts Java. Si l'index sélectionné est égal à l'index, nous le garderons en surbrillance, ce qui signifie simplement que si un utilisateur clique sur le bouton Si un utilisateur clique sur le tag A, pour ainsi dire, nous voulons qu'il soit surligné. Pour cela, il suffit de préciser la couleur. BG. Utilisons le rouge, 500. Lorsque vous économisez, nous devons implémenter la maison avant qu'elle ne fonctionne. Bien. Enregistrer. Tu peux voir ? Tout fonctionne. Bien. Maintenant, une autre chose importante que nous devons implémenter est que lorsque nous survolons les éléments, nous voulons changer de couleur Et d'ailleurs, le rouge ne concerne que les articles pédagogiques. Ne vous inquiétez pas, nous allons tout réparer. OK. Même si nous voulons spécifier la couleur, nous voulons également une animation agréable. OK. Animation très simple. Traduire Y. Y moins deux. C'est ainsi que nous pouvons préfixer si vous souhaitez appliquer une valeur négative Sur Ha, la couleur de fond, rendons-la bleue. Le va shadow, ça va être Excel. Nous allons donc le faire traduire par moins deux. Je dois juste mettre en évidence et copier ce type, le badigeonner. C'est quoi encore ? La couleur. Faisons-le blanc. BG White. OK. Maintenant, économisons. Formatez rapidement le code pour obtenir des indentations appropriées. Enregistrez et consultez le navigateur, ceux-ci. Cliquez. Tu peux voir ? Lorsque vous passez la souris dessus, la couleur change et lorsque vous cliquez, elle est surlignée C'est bon, c'est tellement beau. Et je veux que vous remarquiez l'animation. Tu peux voir ? Jette un coup d'œil. J'adore ça. Maintenant, il faut utiliser la bonne couleur. Pour le fond Whoa, nous allons utiliser une couleur personnalisée, la surligner, l' effacer, ouvrir et fermer le crochet, et à l'intérieur du crochet, nous avons cette couleur La même chose s'applique à Ils sont surlignés comme ça avec exactement la même couleur. De plus, je pense que nous devons changer quelque chose d' autre à ce stade. C'est vrai. Donnons-lui la même couleur de fond pour le décompte. OK. Magnifique. Tout est cool. C'est bon, les gars. Tu vois ? Ça a l'air bien. Tu peux voir ? Jette un coup d'œil. OK, j'adore ça. Ce n'est pas le cas pour le moment, et lors de la prochaine conférence, nous procéderons à la mise en œuvre de la carte de démonstration. À bientôt. 54. Affichage de cartes de compétence: de la conférence précédente, nous avions affiché l'image et le titre, juste à l'intérieur de la balise A, que nous utilisions comme boutonnage. Lorsque vous en avez un, il fonctionne parfaitement comme prévu. Dans cette conférence, nous allons afficher les données relatives à chaque titre. Par exemple, lorsque je clique sur le développeur du front-end, nous voulons afficher les données relatives au front-end, c'est-à-dire l'échelle plus, lorsque je clique sur le backend, nous devrions être en mesure d'afficher les deux ou les données relatives au backend, pour ainsi dire Permettez-moi de vous montrer rapidement ce que contiennent les données. Ici, dans les données s, nous avons les données à propos, et à l'intérieur, nous avons un objet dans l'objet, nous avons un nombre égal à un, le titre, qui est I x, l'image. Ce que nous avons fait lors de la conférence précédente, nous avons affiché le titre et l'image. Ici. Dans cette conférence, lorsque vous cliquez sur le bouton, nous voulons afficher tous les poêles La même chose s'applique au reste de l'objet à mettre dans le tableau. Lorsque vous cliquez sur le backend, nous voulons récupérer les données associées au backend, savoir le nœud S, Mongo DB et le reste Le tableau de noms ici peut être modifié. Vous pouvez le renommer en éléments ou en n' importe quel nom qui, selon vous, décrit votre intention Passez à la composante « À propos de moi ». Après cette annonce, laissez-moi vous montrer ce pdf ici. C'est le dernier d. Dans ce d, nous allons avoir un autre dif, donner le nom de la classe La largeur sera complète, ce qui la portera à 100 % de largeur. Sur un petit appareil, la largeur sera de 1/2, soit 50 %. Sur un gros appareil, la largeur sera de 5/12 Débordement visible. En mettant à gauche et à droite, le hachage zéro. Sur un petit appareil, la partie gauche sera six sur un gros appareil. En mettant la gauche et la droite, il y en aura dix. Fermez le df, et dans ce def, nous allons avoir un autre df. Donnons-lui le nom de la classe. Le fond sera blanc. Nous voulons donc que les quatre coins soient arrondis. séparation est dix heures. Sur un appareil de très grande taille, la séparation est de 14 Ombre, accent, couleur. Nous avons sa position relative, et dans le deve, nous allons avoir une section Ferme-le. Appliquons rapidement du style à la section. Donnez-lui un nom de classe. Nous voulons maintenant utiliser l'interpolation de chaînes de caractères. Gagnez le bati, nous allons lui attribuer un nom de classe de feet left Prenez note du nom de cette classe. Nous allons le styliser à l'avenir. Débordez, faisons-le chauffer pour qu'il ne pousse pas hors de son contenant Maintenant, ajoutons un script Java à l'intérieur. Nous allons faire si faded est égal à true, puis nous allons attribuer le nom de classe Fad out, sinon aucun nom de classe ne sera Gagnez le D, nous allons avoir une balise p qui servira d'étiquette. Je vais écrire mon texte es A. Ensuite, nous allons avoir le ciel textuel ci-dessous. Mais avant cela, sauvegardons et partons dans le navigateur. Bien. Le voici. Mon ciel de texte est le même, quels que soient vos repères textuels lorsque vous cliquez sur l'un de ces tableaux. Pour la carte, laissez-moi vous montrer. Voici le D. Sur fond d'Excel blanc et arrondi, ce qui permet d'arrondir tous les coins de ce dv J'espère que tu peux voir parfaitement. W dans la balise P, donnons le nom de la classe, et nous voulons également utiliser l'interpolation de chaînes Maintenant, nous allons avoir le texte. Conservons la couleur. Nous allons donc avoir ici le 476 26d. Seven C. Bien. Vous ne le remarquerez peut-être pas, mais la couleur a été appliquée. Passons maintenant à la police. Nous pouvons le faire ici. Il n'y a aucun problème. Nous allons faire un nom de classe int point. Encore une fois, sauvegardez. C'est bon. Maintenant, jetez un œil. Bien. Le texte sera G, qui correspondra à la taille de police et à la hauteur de ligne, soit 1,2 m. Sur un petit appareil, le texte Bs sur G, text, excel. Faisons une transaction, puis la durée Faisons en sorte que ce soit 500. Faisons en sorte qu'il se transforme. L'opacité, l'opacité doit être de 100. C'est bon. Après la balise P, nous voulons afficher les titres. Faisons une étiquette H one. Faisons-le avec un tag H two. Avec les deux H, laissez-moi vous montrer, nous allons créer le titre des points de données cartographiques. Lorsque je clique sur le front end, nous avons maintenant le front end. Lorsque je clique sur le backend, nous avons le backend. Pour faire des choses, nous avons l'outil et les choses nécessaires. Affichons les objets, les compétences associées. Avant de continuer, nous devons styliser le tag H two. Donnons rapidement le nom de la classe d'étoiles. Les polices, le corps droit. La couleur du texte sera la même, venez ici et collez. Texte à trois cellules. Sur un petit appareil, envoyez d à Excel. Sur un appareil de taille moyenne, textez trois fichiers Excel. Nous essayons maintenant d'appliquer une taille de police différente sur chaque écran. Chaque point de rupture. Marge inférieure 6, largeur 44. Sur un appareil de taille moyenne, la largeur sera de cinq ou six. Faisons une transaction. La durée, 50. Ensuite, nous allons procéder à une transformation. Spécifiez une opacité de 100. C'est aussi simple que ça. Enregistrez sur le navigateur, magnifique. Jette un coup d'œil. Exactement le résultat escompté. Revenez au code. Après le tag H two. Formatons rapidement le code pour une indentation correcte. Appuyez ensuite sur le clavier Shift et Option Ken, puis appuyez sur la touche F. De plus, vous pouvez cliquer sur Formater le document avec le format pré-code. Après le tag H two, nous allons avoir un tag UL. Nous voulons maintenant supprimer la clé correspondante au titre. Faisons-le rapidement. Ici, nous allons faire une carte à points matricielle de données cartographiques. Nous allons prendre en compte les compétences, qui représentent chaque élément du tableau. Réglez-le ensuite sur une fonction de flèche. Nous voulons renvoyer une interface utilisateur, vous devez donc ouvrir et fermer la parentenss Et veuillez ne pas utiliser le support Ci. Maintenant, nous allons avoir un tag LI. Dans le tag LI, nous devons afficher la compétence. Save et C. Oups. Ce devraient être des compétences. C'est bon. Vérifions-le. Maintenant, faites défiler la page vers le bas. Nous l'avons ici. Magnifique. Donnons le style et donnons à la police un aspect extrêmement impressionnant. C'est bon. Le tag UL, donnez-lui le nom de la classe. Nous allons utiliser l'interpolation de chaînes de caractères. Tout d'abord, la police sera le nom de la classe d point. Le poids de la police est de 300. Dernier disque. Le dernier type de style est le disque. La couleur du texte sera la même avec cette copie surlignée collée ici M huit, marge gauche, huit, et appareil d'agrandissement, M dix. Le texte B, qui correspond à la hauteur de la ligne et à la taille de police. Sur un appareil de grande taille, textez G, S transction, Désolé. La durée est toujours de 500. Transformez ensuite. L'opacité est de 100. OK, Save. Voyez comment il apparaît maintenant. Oups dit : Oh, mon Dieu, jetez un œil. Qu'il en soit ainsi, les gars. Enregistrez et vérifions-le. OK. Magnifique. Tout a l' air bien, et j'aime ça. Lorsque vous cliquez sur B end, la compétence associée au backend apparaît ici Oh mon Dieu. Dites-moi, ça n'a pas l'air bien ? Bien sûr que oui. OK, continuons. Sur un appareil mobile, nous voulons masquer cette disposition en grille ici, ces boutures, et seule cette carte sera affichée Nous avons donc besoin d'un autre point dans la carte pour passer d'une balance à l' Faisons-le lors de la prochaine conférence. 55. Nombre de compétences: Nous voulons faire quelque chose d'exceptionnel. Nous voulons créer une nouvelle carte dans le coin supérieur droit de cette carte. Faisons-le rapidement. Après la balise de fermeture de la section, nous allons avoir un d avec le nom de la classe. Donnons-lui une position absolue. Perspective. 500. Nous allons lui donner moins sept à partir du haut. Sur un petit appareil, moins huit à partir du haut. Le droit, c'est zéro et un petit appareil. La droite est 20. Cela va commencer à 20 sur un appareil plus petit. Sinon, donnons-lui le nom de classe de la carte. Veuillez prendre note de cette carte. Nous allons le styliser à l'avenir. Passons maintenant au script Java. Fermez le D. Maintenant, à l'intérieur, nous allons faire si flipped est égal à vrai, nous allons avoir un nom de classe inversé et sinon, nous n'allons pas avoir de nom de classe Formatez également le code pour qu' il ait une indentation appropriée. Dans le D, nous allons avoir un autre dif, donner l'intérieur de la carte de nom de classe Nous allons styliser l'intérieur de la carte avec des C. À l'intérieur de la carte, nous allons avoir un autre dif, vous donnera le nom de la classe Nous voulons que les frontières soient arrondies. Les C, mettons-le au clair. Le texte de cette carte, nous allons en faire sept Excel. Sur un appareil de très grande taille, le texte neuf excelle. La police sera recta black. Texte blanc. BG, donnons-lui une couleur de fond pour le sac, et nous voulons que la couleur du bagrand exactement la même couleur de texte que celle que nous avons utilisée. Copiez tout dans le style personnalisé, puis collez-le dedans. Enregistrez et voyez ce que nous avons, opérations. Nous devons fermer le D. Rien n'est encore affiché. Maintenant, après la couleur de fond, nous voulons que le rembourrage soit de cinq Un appareil de très grande taille, rembourrage sera de huit La largeur est de 28. La hauteur est de 28. Un appareil de très grande taille, d'une largeur 48. Encore une fois, un appareil extra large, de la hauteur 48. Formatons le code. Nous allons le transformer, le faire transctionner, d'une durée de 500 Ensuite, nous allons passer à Transform Preserve. Maintenant, nous voulons le faire pivoter de moins, de six. Encore une fois, nous allons transformer la préservation. Cela fait, nous devrions pouvoir voir la carte ici. Vous voyez, maintenant nous avons une carte ici. Ce que nous voulons faire, c'est afficher le nombre sur la carte. Ici, nous allons faire de l' envergure. Dans le laps de temps, nous allons faire des points de données cartographiques Ct. Avant de continuer à le surligner et à le couper, nous voulons le faire en dehors du délai imparti. Voyons maintenant à quoi cela ressemble dans le navigateur. Parfait. Stylisons le span. Donnez-lui un nom de classe en tiret pour Excel, un appareil de très grande taille, texte de six Excel. Marge droite, deux, et un petit appareil, M R, qui est la marge droite, seront trois. Cela fait, nous allons avoir une étoile entre les travées pour la rendre belle. Maintenant, nous l'avons compris. Tout apparaît comme prévu. Magnifique. Magnifique. Tommy. Ça n'a pas l'air bien ? Bien sûr, c'est le cas. Parfait, les gars. D'accord. Le voyage a été très long. Après avoir fait cela. La prochaine étape consiste à implémenter le vote suivant et précédent, directement dans la carte Tout simplement parce que sur les appareils mobiles, les robots situés directement dans la grille seront invisibles. Laisse-moi te montrer. C'est uniquement sur iPad et. Passons à l'iPhone. Faites défiler la page vers le bas Tu vois, les botins ont tous disparu. Nous voulons donc un point pour passer d'un ciel à l'autre, là où se trouve la carte Très bien, alors faisons-le lors de la prochaine conférence. 56. Button Flip: Très bien, le composant À propos de moi est défini, et tout fonctionne parfaitement comme prévu. Encore une chose. Nous devons mettre en œuvre le vote suivant et précédent. Mets-le dans la carte. Vous savez tous que le réseau va se heurter à un appareil mobile Nous avons donc besoin d'un robot pour passer d'une balance à l'autre, et le bout sera là Laissez-moi vous montrer sur un appareil mobile. Est-ce que tu vois ? Il n'y a plus de bruit sur le réseau. Nous devons implémenter le butage directement dans la carte. Faisons-le rapidement. Après ce d de clôture, nous allons avoir un autre D. Donnez le nom de la classe. Nous allons le positionner de manière absolue. Ou alors. À partir de la droite, nous allons en avoir dix. Les cinq derniers. Ensuite, nous allons avoir un écran flexible. À l'intérieur, nous allons avoir une étiquette A. Dans la balise A, nous devons afficher le SVG. Cette balise gérera les fonctionnalités de la précédente. Implémentons rapidement le clic, afin que vous le compreniez. En cliquant sur la balise A, nous allons appeler le handle previos Non Dans le A tug, nous allons coller le SVG Retournez aux résultats du code do MD. Ensuite, vous allez voir le SVG précédent pour at me flip Copier à partir des lignes 527 à 2541. Surlignez le texte, dans la balise A. Coller. Assurez-vous de formater, enregistrer et de voir ce que nous avons. Comme le SVG est blanc, il est possible que vous ne le remarquiez pas à l'écran Modifions-le en rouge. Voyons ce que nous avons. Rechargeons. Je l'ai déjà vu. Tu peux voir ? C'est ici ? C'est bon. Stylisons-le rapidement. Faisons en sorte qu'il soit blanc. Donnons un nom de classe à la balise A. La largeur est de 12, la hauteur est de 12. Arrondi, Excel. Nous voulons que la frontière soit un peu sinueuse. Je pense que nous devrions spécifier l'arrière-plan afin que vous puissiez le voir à l'écran. BG 47, 626d. C. Voilà. Tu peux voir ? Magnifique. Maintenant, nous allons continuer. La marge de droite sera de un. Nous allons procéder à une transformation. Tranction, durée, faisons-en 300. Le voici. La couleur doit être ponctuelle. Tout d'abord, lorsque vous passez le pointeur sur le bouton, nous allons traduire par un Il va monter un peu plus haut avec une jolie animation. Laisse-moi te montrer. Étalons-le. Maintenant, quand je le survole, il se déplace vers le bas. Non, nous voulons qu'il passe à la hausse. Nous devons spécifier une valeur négative pour l'augmenter. Nous allons faire moins, traduire par un, ce qui correspond à moins un. Essayez-le. Tu peux voir ? Ça remonte ? Bien. Je vous ai dit que je vais vous expliquer tous les aspects de la classe utilitaire Tail Wind. Nous allons justifier le contenu au centre. Ensuite, les éléments s'alignent au centre. Nous allons placer le SVG au centre de la carte. Je n' apparaissais toujours pas au centre. Regardez, le SVG est toujours là. Avant que tous les éléments ne fonctionnent, nous allons faire en sorte que l'écran soit flexible. Et vous voyez, maintenant les objets seront centrés. Tu peux voir ? Nous devons afficher Flex avant de pouvoir aligner et justifier l'article. D'accord ? Je pense que c'est souvent le cas maintenant. C'est cool comme ça. C'est bon Nous n'avons pas besoin d'en faire trop ici. Donc, ce que je vais faire maintenant est simple. Nous devons dupliquer les surlignages du tag A des lignes 182, deux, 199, le dupliquer ou vous pouvez le copier-coller. Nous avons donc le premier tag A. Il s'agit de la première balise A. Et puis voici le deuxième tag A. Quand tu économises, c'est vrai. Nous l'avons donc comme ça. Maintenant, lorsque vous cliquez, cliquez sur. Nous avons donc les boutons qui font exactement la même chose. Tu peux voir ? Ceci est antérieur. Montre D'accord. Nous devons maintenant l' implémenter pour le prochain. Tout d'abord, nous devons supprimer ce SVG, surligner à partir de 242217. Effacez-le, revenez au point de ressource du code MD. Ici, nous devons mettre en évidence ce SVG, le prochain SVG pour une flotte de véhicules A. Surlignez le texte, venez ici et collez. Maintenant, formatez rapidement le code. Essuyez la poignée précédente. Nous allons nous occuper de la suite. Lorsque vous voyez le navigateur, tout apparaît comme prévu. Précédent, précédent, et ça peut passer à la suivante, à la suivante. En arrière, en arrière, en avant, en avant, en avant et toujours. Magnifique. Tout fonctionne parfaitement bien. Nous devons donc le vérifier sur un appareil mobile. Bonne nouvelle Maintenant, sur un appareil mobile, nous avons le bouton pour passer d'une compétence à l'ordre. Nous avons maintenant les compétences de développeur principal. Ainsi, vous pouvez revenir en arrière, avancer, revenir en arrière. Tu peux voir ? Tout fonctionne parfaitement bien. Et j'adore le résultat final. C'est bon. Passons donc rapidement à la prochaine conférence où nous allons commencer à mettre en œuvre le f. C'est pour le moment. Rendez-vous lors de la prochaine conférence. 57. Animation par retournement: Bon retour en classe. Dans cette conférence, nous voulons implémenter l'animation sur les retournements lorsque l'on clique sur la carte À l'heure actuelle, vous pouvez voir la façon dont il se retourne traditionnellement. Ce n'est pas beau comme ça. OK. Ajoutons-y de bonnes animations. Retournez au code VS. Ouvrez l'explorateur. Juste dans le répertoire À propos de moi. Cliquez avec le bouton droit sur le nouveau fichier. Je vais l'appeler Abt M point CSS. Il faut d'abord styliser la carte. Carte à points. Laisse-moi te montrer. Dans ce D ? Maintenant, nous allons obtenir la carte. Le voici. Oui. Alors faisons-le ici. La perspective 800 pixels. Le pointeur du curseur, nous allons avoir un flex d'affichage, justifier le contenu vers la droite. La carte A, la carte NA. Encore une fois, laisse-moi te montrer. Le voici. Donc, pour cette carte, je pense que la meilleure façon de vous montrer les choses est de changer la couleur de fond. Supposons que la couleur de fond soit le rouge 500. Maintenant, lorsque vous enregistrez et consultez le navigateur, pouvez-vous voir ? Voici la carte intérieure. Maintenant, je vais vous montrer la carte-conteneur. Voici la carte-conteneur. Faisons BG, Blue 500. Sauvegardez sur le navigateur, le voici. Vous voyez, cette carte est posée sur cette autre carte. Alors stylisons-le rapidement. Trouvons la largeur 100 %, la hauteur 100 %. Transaction. Nous allons le faire transformer en 0,6 seconde. Ensuite, le style de transformation. Conservez trois d. Avant de continuer, nous devons lier le composant au fichier CSS. Retournez à « À propos , faites défiler le curseur vers le haut et allons-y. Nous allons mettre s Abt M C S S. Après cela, revenez à About M Css Nous devons styliser les points de la carte. Retournez la carte dans Ops. Jette un coup d'œil. Ce devrait être un concatnateur Transformer. Nous voulons effectuer une rotation sur Y x angle de 90 degrés. Faisons-en un angle négatif. Fit Dash left. Et au fait, laissez-moi vous montrer les cours. Voici le fil qui reste, puis le fil de sortie. Pour la gauche d'alimentation, nous allons avoir une transction d'une opacité de 0,5 seconde Transformez également 0,5 seconde, et ici celle de l'opacité Transformation, translation sur l'axe X. Mettons-le à zéro. Pour l'ajustement à gauche et à l'ajustement , l'opacité est au rendez-vous Transformer. Transformez, traduisez x, faisons-le à 40 %. Après avoir fait tout cela, revenons rapidement au navigateur et vérifions si tout est bien fait. Jette un coup d'œil. Allons cliquer. Magnifique. Vous voyez, dans la carte, il y a un joli flip d'animation. Tu peux voir ? Mais nous voulons également que cela affecte cette carte ici. Que faisons-nous maintenant ? Voyons ce qui va se passer. Avant de continuer, nous devons changer la couleur de la carte. Il a exactement la même couleur. Ce type n'a pas de couleur, mais il a un B G. D'accord. Magnifique. Revenons au CSS. Commencez à partir d'ici, la carte, le chariot, le tout découpé, découpé, découpé. Oh, mon Dieu. Les gars, enlevez les affaires. Quand tu le fais comme ça, tout va fonctionner. Oui, M. R. Réessayez, réessayez encore et encore. C'est vraiment fantastique. Jette un coup d'œil. Ensuite, nous pouvons le changer avec les boutons. Sur iPad. Cela fonctionne. C'est incroyable. C'est bon. Nous en avons terminé avec le composant À propos. Mais ce que nous devons faire lors la prochaine conférence, c'est corriger certains points, comme le haut de la marge sur les appareils mobiles. Voyons voir. Tu peux voir ça ici ? Le haut de la marge sur un appareil mobile devrait baisser légèrement. 58. Paramètres du curseur: Bonjour. Bon retour en classe. Dans cette conférence, nous allons concevoir le composant de témoignage Mais avant de continuer, nous devons implémenter les paramètres du curseur. Ouvrez rapidement l'explorateur, common B, ouvrez le composant. Dans le composant, cliquez avec le bouton droit de la souris sur New Fod. Témoignage. Faites donc un clic droit sur le témoignage, aucun fichier, le point de témoignage GS RFC pour générer le Nous allons afficher le témoignage sur la page parent. Juste en dessous du composant Apart M. Nous allons faire un témoignage. Et assurez-vous de l' importer en haut de la page. Enregistrez, puis revenez au témoignage. Implémentons rapidement les paramètres du curseur. Pour implémenter les paramètres du curseur, nous devons effectuer quelques importations Ouvrez les maisons des composants d'accueil. Soulignons rapidement les lignes deux à quatre. Montez en haut puis collez. Nous allons également utiliser la main. Nous devons également copier des lignes cinq à dix. Puis colle. Enfin, copions rapidement les propriétés du slider. Ouvrez la ressource de code MD, puis faites défiler la page vers le bas. Vous allez voir les paramètres du curseur pour le témoignage. Surligner. Points forts de 584 2667. Copiez, revenez au code et collez. Permettez-moi de passer rapidement en revue les paramètres. Nous avons ici un paramétrage variable. Bien entendu, cette variable est un objet. Dans l'objet, nous avons les propriétés du curseur. Nous avons défini l' infini sur true, ce qui fera défiler le curseur en continu sans fin Ici, nous avons fait une diapositive pour en montrer trois. diapositive à faire défiler est une seule, vous ne pouvez donc faire défiler qu' une seule diapositive à la fois. La vitesse est de 3 000 millisecondes. La flèche est réglée pour forcer, c' est-à-dire la flèche gauche et droite, nous n'en avons donc pas besoin ici. Nous avons réglé l'autoplate sur true, ce qui signifie que le curseur commencera à défiler sans avoir à le faire manuellement Le mode central est défini sur true, puis le pad central, qui correspond à l'espace entre chaque curseur Il est réglé sur dix pixels, puis nous avons ici la vitesse automatique 3 000 millisecondes Maintenant, dans le domaine de la réactivité, c'est un domaine d' objet, bien sûr, puis il y a le point de rupture Maintenant, au point d'arrêt de 17 60, nous voulons modifier les paramètres, les paramètres ici Sur ce point d'arrêt, nous allons avoir deux diapositives à montrer La diapositive à faire défiler en sera une. Infinite est défini sur true pour une boucle continue, puis le point est réglé pour tomber, puis le point est réglé pour tomber, et ainsi de suite jusqu' vous atteigniez le plus petit point d'arrêt Formate le code. Bien. Nous en avons maintenant terminé avec les paramètres du curseur. Passons rapidement à la prochaine conférence où nous commencerons à concevoir le témoignage Rendez-vous lors de la prochaine conférence. 59. Design de curseur témoignage: Passons à la conception du témoignage. Ici, avec en retour. Essuie ça. Nous allons donner un identifiant à ce D. Témoignage. Dans ce d, nous allons avoir un autre d, vous donner le nom de la classe. La hauteur maximale sera de 450 pixels. Le score entre le haut et le bas est égal à 12. Sur un appareil de grande taille, placer la séparation gauche à droite est 12 Sur un appareil de taille moyenne, placer la séparation gauche à droite est cinq Et le rembourrage par défaut sera de trois. Nous allons l' arrondir G. Ceci fait, créons rapidement la mise en page. Ouvrez maintenant le point de page. Nous voulons copier ce style intégré pour la mise en page. Placez une souris ici. Puis collez. Tout sera pareil, avons donc pas besoin d' apporter de modifications. Sur le navigateur, nous avons maintenant la mise en page. Laissez-moi vous montrer, le voici. Lorsque nous commencerons à exposer les articles, vous pourrez les voir très propres. Dans ce d, nous allons avoir un autre d, donnez-lui le nom de la classe. Sur un appareil de grande taille, nous allons l'avoir dans un conteneur. La marge de gauche à droite est automatique. Padin à gauche, tournez à droite à zéro. Sur un petit appareil, la hauteur maximale est de 350 pixels. Maintenant, dans ce df, nous allons avoir un autre df, donnez-lui un nom de classe. Le texte va être aligné au centre. Maintenant, nous allons avoir une balise d'en-tête, et je vais faire ce que mes clients disent de moi. Et voilà. Ce sera un titre. Maintenant, donnons-lui rapidement le stand. La police Extra Wood. Le texte 5 Excel. Nous voulons qu'il soit grand, alors maintenant vous l'avez. Marge inférieure et B six. Le texte. Donnons-lui une taille de texte, et nous voulons rester cohérents avec la couleur de test du titre, qui sera 48 ADD. Lorsque vous économisez, et le voici. C'est bon. Magnifique. Après la balise H two, nous allons avoir une balise p. Ensuite, cette balise P sera la description. Accédez rapidement à la ressource de code, copiez la description du témoignage et collez-la entre les deux Lorsque vous économisez, et le voici. Donnons-lui un style. Donnez un nom de classe à la balise P. Nous voulons utiliser l'interpolation de chaînes. Max D W pour Excel. Les étons 200. Reco une planche. La marge gauche et droite est automatique. La marge inférieure est de 12. Sur un grand appareil, la marge inférieure est de 24. C'est bon. Maintenant, vérifions-le. Bien. Ça a l'air très joli. Mm. Ceci fait, implémentons le curseur. Juste après cette mort. Nous allons afficher le slider. Rappelez-vous que nous avons importé le slider depuis React Slip. Donnons-lui un nom de classe. Ensuite, nous allons faire partie des dix premiers. Puis aussi le cos scroll, all scroll. Concevons rapidement les éléments contenus dans le curseur. Nous allons avoir un d pour le nom de la classe. Nous allons avoir un écran flexible. La partie à gauche est zéro. Gagnez ce d, nous allons avoir un autre d. La largeur est de 100 %. Oui Oups. Jetez-y un coup d'œil. Il ne doit pas y avoir d' espace entre les deux. Ouais. Sur un petit appareil, la largeur est de 95 %. Rembourrage gauche, 20. La marge est orale. Les bords seront arrondis au format Excel. Nous essayons donc de concevoir la carte. Ouais. Donnons-lui le rembourrage de quatre Sur un appareil de grande taille, le rembourrage est de six. Donnons-lui une hauteur moyenne de 250 pixels. Et c'est tout. La carte est affichée dans le navigateur. Mais il ne sera pas visible simplement parce que nous n'avons pas précisé le co. Quand vous venez faire du PG, Green 500. Nous avons maintenant la carte dans le navigateur. Nous ne voulons pas l'utiliser. Nous voulons plutôt définir une mise en page dans la carte. Vissez rapidement vers le haut et copions le style en ligne. Collez-le ici. Effacez la largeur et effectuons les réglages nécessaires. Ici, nous allons avoir cinq degrés. Cette portion sera positionnée à cinq degrés avec la couleur bleue, 48 AFD E. Maintenant, jetez-y un œil Pouvez-vous voir que la carte est maintenant divisée en deux parties égales, la partie blanche en haut et la partie bleue en bas. Mais ce n'est pas ce que nous voulons. Passons maintenant à dix parce qu'il est trop grand, et faisons en sorte que la partie blanche soit 90. Magnifique. Affichons les éléments contenus dans la carte. Maintenant, dans la carte, nous allons avoir un D, qui vous donnera le nom de la classe. DisplayFlex. Un autre. Bon sang, 100 pixels pour la moyenne w. Ensuite, nous allons avoir une balise IMD, SRC Les images que nous allons utiliser se trouvent directement dans le répertoire public. Vous pouvez y jeter un œil, puis je vais faire Papo point PNG Maintenant c'est sûr, et maintenant nous avons du violet à l'écran. Très bien, nous voulons faire quelques arrêts ici en ce qui concerne les paramètres. Nous savons tous que les images ne sont pas toutes arrondies. Ce que nous allons faire, c'est donner à l'image une taille telle que lorsque vous avez des images à quatre coins, elle puisse également être arrondie. Maintenant ce que je vais faire. Donnons-lui rapidement un nom de classe. 20 de hauteur, 20 arrondis. Voici papa. Tu peux voir ? Magnifique. Encore une fois, nous devons spécifier l'alternative. Et je vais prendre des photos de clients. Merci de ne pas créer d'image client. J'ai appris que l'image est désormais une voie essentielle. Nous avons maintenant la photo du client. Hmm, je n'ai pas affiché l'image. Nous devons également afficher le droit. Après ce df, nous allons avoir un autre df. Vous devez avoir besoin d'un conteneur pour définir la forme de votre site Web. Le D est donc quelque chose auquel vous ne pouvez pas échapper. Dans le nom de la classe, faisons-la afficher flex, la colonne Flex, qui est la direction de flexion. Ensuite, nous allons faire gab x quatre, qui est l'écart entre les colonnes Sur un appareil de taille moyenne, nous voulons que la colonne de direction soit flexible. Également sur un appareil de taille moyenne, les éléments s'alignent au centre. Bien. Donc, dans cette définition, nous allons avoir une autre définition. En tant que développeur front-end, le df est votre ami. L'esprit frontal sera moyen. Base de texte en tiret, qui correspondra à la taille du front et à la hauteur de la ligne. Terminé. Donc, dans le cadre de la définition, je vais m'occuper de Daisy Papo. C'est bon. Ça a l'air drôle, non ? Le voici. Que devons-nous encore faire d'autre ? Maintenant, après ce d de fermeture, nous allons avoir un autre d avec le nom de la classe. Mais cette fois-ci, nous voulons utiliser l' interpolation de chaînes de caractères À l'avant, nous serons 300. Utilisons ensuite le Google hind Hind, nom de classe. Couleur du texte. aura la même couleur de test que le titre. Je n'ai pas besoin de le faire deux fois. Je le surligne, je le copie, puis je le soulève ici. Fermez le d. Et dans le d, je vais m'occuper de YouTube Students. Das Papo a commenté ma chaîne YouTube, je dois donc en parler ici Je ne l'ai pas fait. Nous allons avoir un tag P. Gagnez le tag P, revenons rapidement à la ressource de code et copions la critique de Des Papo. Le voici. Surlignez et copiez-le, collez-le dans la balise P. Lorsque vous enregistrez dans le navigateur, le. Magnifique. Alignons rapidement la balise p. Donnez-lui un nom de classe. Encore une fois, nous voulons utiliser l'interpolation de chaînes. Marge en bas, ça va être six, la police. Vous pouvez donc voir que la police est trop en gras. Je ne l'aime pas comme ça, alors nous voulons qu'il paraisse un peu plus clair. Donc, la police spécifie 200 pour le w. Maintenant, vous voyez Code. Utilisons le bloc recteur. Hauteur moyenne, 70 pixels. Le texte, faisons-le 15 pixels. Marge en haut. Faisons en trois. Maintenant, sauvegardez Beautiful. Formatons d'abord le code. Vous voyez, ce type aligné au centre, et ce n'est pas le résultat escompté. Allons-y, vérifions-le. Il s'agit du « d » sur l'élément médian de l'appareil aligné au centre. Je ne pense pas que cela soit nécessaire. Alors maintenant, nous l'avons. Ceci fait, appliquons rapidement la diapositive. Faites défiler l'écran vers le haut, où se trouve le curseur. Tout d'abord, je tiens à vous dire que l'écart entre le curseur et la description est trop Je pense donc que nous devons supprimer quelque chose. Où avons-nous le slider ? Slider, où es-tu ? Oh, mon Dieu. Le voici. Enlevons le tampon dans la cuve. Cela fait, nous allons appliquer le curseur ici, puis les paramètres. C'est aussi simple que ça. Maintenant, ce que je vais faire , car nous avons besoin de plusieurs éléments pour que la diapositive fonctionne. Le point fort en D. Nous allons mettre en évidence les lignes 1, 2 et 42160. Vous pouvez copier, mais pour moi, je dois juste le dupliquer autant de fois que je le souhaite. Enregistrez, voyons ce que nous avons sur le navigateur. Lit. Maintenant, tout fonctionne parfaitement comme prévu. Examinons rapidement la réactivité mobile. Sur iPad, la diapositive à montrer est une. Vérifions-le sur téléphone portable. De plus, la diapositive à montrer en est une. Il est en effet responsive sur notre plateforme. C'est magnifique. Tout semble beau, et j'adore ça. C'est éteint maintenant. En effet, nous allons commencer à concevoir le À bientôt, Idee. 60. Badge de pied de page: Salut. Bon retour en classe. Dans cette conférence, nous allons concevoir le composant fa. Oui, allons-y. Commun B pour ouvrir l'explorateur. Assurez-vous d'ouvrir le composant dans le filtre, cliquez avec le bouton droit de la souris, créez un nouveau fichier. Gaz rapides. Un autre. Gagnez le filtre. codon s. Générez le composant fonctionnel Enregistrez et revenez au fa s. RO de C pour générer le composant fonctionnel React. Le filtre restera cohérent tout au long du projet. Nous devons donc le rendre dans la mise en page. Ouvrez les points de mise en page. Nous allons passer au filtre de rendu. Fermez-le avec l'étiquette à fermeture automatique et assurez-vous de l'importer en haut. Sécurisez, puis fermez le point de mise en page comme. Commençons maintenant par le fa. Donnons rapidement à cet identifiant DV un identifiant égal. Fa. Voyons maintenant ce que nous avons sur le navigateur. Tu vois que c'est le filtre ici ? Et même si vous ouvrez la page de détails du portefeuille. Lorsque vous faites défiler l'écran vers le bas, vous verrez le filtre. Tu peux voir ? Cela se produit simplement parce que nous l'avons rendu dans la mise en page sous forme. Le filtre sera affiché sur toutes les pages. Essuyez-le. Donnons-lui rapidement un nom de classe. Marge en haut vide. Faisons en 90 pixels. Dans le d, nous allons avoir un autre df, donnez-lui un nom de classe. La couleur de fond sera le blanc. Participez au top zéro. Sur un appareil de grande taille, participez aux 100 meilleures photos. Vous fermez le d, et maintenant nous allons avoir un autre df, donnez-lui un nom de classe. Le w max max. 11 40 pis. F L' arrière-plan sera bleu d 500. Arrondi, excellent. Fermons le D. Faisons en sorte qu'il soit réactif. Px 20 pixels. Sur un petit appareil, px 64 pixels. Py 64 pixels. Mm auto. Voici le rembourrage à gauche et à droite. Le rembourrage gauche à droite sur un petit appareil, le rembourrage en haut et en bas Nous allons maintenant avoir un style intégré. Nous allons le faire transformer. Traduisez zéro pixel, 70 pixels. Maintenant, lorsque vous consultez le navigateur, le voici. Tu peux voir ? Sympa. C'est bon. Tout va bien. Affichons le contenu du. Nous allons avoir un d. Nous allons avoir un modèle de grille d'affichage dans la colonne 12. Un autre. La colonne de la grille est 12. Sur un grand appareil, la colonne de la grille est de neuf. Dans le d, nous allons avoir une étiquette P, et dans le remorqueur P, je vais préparer à démarrer Et c'est lui. Maintenant, alignons-le rapidement correctement. Le texte est de 30 pixels. La couleur du test est le blanc. Alignons rapidement le test sur le centre. Sur un appareil de grande taille. Nous allons commencer par texto. Et maintenant tu l'as. Sur un appareil de grande taille, cela va commencer à partir d'ici, mais sur un appareil plus petit, le test sera aligné au centre. Jetez-y un coup d'œil. Tu peux voir ? Magnifique. Juste après le tag P, nous allons avoir un autre tag P. Ensuite, je vais coller le droit correspondant à. Vous pouvez utiliser ce tag P pour indiquer à votre client votre entreprise. Quand vous voyez, nous l' avons maintenant comme ça. Donnons-le rapidement. Le texte va être blanc. La police sonne. Encore une fois, nous allons avoir exactement la même chose ici. Je dois juste surligner le texte, puis le soulever ici. Enregistrez et voyez ce que nous avons. Magnifique. Encore une fois, sur un appareil plus petit, il va s'aligner au centre. Génial. Encore une fois, que devons-nous faire d'autre ? Maintenant, nous avons besoin de la navigation de plaisance. Juste après cette fermeture D. Nous allons avoir un div avec le nom de classe call spam 12. Sur un appareil de grande taille. Encore une fois, je dois juste souligner et copier ce type. Viens ici Coller. Modifions-le à trois. Fermez le d, juste à l'intérieur du d. Nous allons en avoir un autre. Faisons en sorte qu'il affiche Flex, Justify le contenu au centre. Les cinq premiers de la marge. Mais sur un gros appareil, la marge est supérieure à zéro. Dans le d, nous allons avoir un tag. Un remorqueur, dans le thème H intérieur du tag A, nous allons le faire, inscrivez-vous maintenant Nous l'avons à la portée du conteneur. Stylisons-le rapidement. Donnez-lui un nom de classe. Font Sans. La famille de polices est Sans. Les C, soulignons-le. P X dix, P Y, cinq. Le BG, qui est la couleur de fond. Maintenant, nous allons faire quelque chose de différent ici. 01, d9ff. Oups, jetez un œil. Maintenant, nous avons les fesses. Mais nous voulons que les bords soient un peu courbes. Ce que je vais faire maintenant, c'est du tiret arrondi, Excel. Ça a l'air bien. Le texte est blanc. La police, nous allons la rendre moyenne. Texte g, et cela correspondra à la taille de police et à la hauteur de ligne. C'est bon. Je pense que c'est tout. Lorsque vous enregistrez, formatez rapidement le code pour une indentation correcte Et maintenant, nous avons quelque chose de beau comme ça. Cela fait, passons à la prochaine conférence où nous allons concevoir le parent. J'attends la prochaine conférence. 61. Icônes de pied de page: Continuons avec le pot de nourriture. Ouvrez le point de ressource de code MD. Copions rapidement les éléments puta, qui sont le tableau de données Je dois juste souligner le 6852 708. Faites défiler l'écran vers le haut, puis collez-le dans le composant comme suit. Une fois cela fait, le nid et la ligne doivent afficher le logo. Juste après le jour de clôture, nous allons avoir un pot tag. Donnons-lui rapidement un historique. PAR 223740. Dans le pied, nous allons avoir un d.M X auto, qui représente la marge gauche et droite. Écran Max W Excel. Spacieux, huit. P X quatre, et le P Y sera 16. Bien entendu, vous devriez maintenant être familiarisé avec les cours d'utilité liés au vent arrière. Sur un petit appareil, P X six, sur un grand appareil, espace, y, 16 LG, Px huit. Formatons le code. Un autre, faisons-en un contenant. X auto. P pour D sur un appareil médian. Nous voulons qu'il chauffe. Ensuite, nous devons afficher le bloc, la marge supérieure, le stylo. La marge gauche et droite est réglée sur automatique. La largeur maximale est de 12 à 80 pixels, et nous spécifions la marge supérieure et le bouton de marge. Vous connaissez le reste des cours. Magnifique. Maintenant, affichons le logo. Sur un appareil de taille moyenne, nous voulons qu'il soit masqué. Sinon, faisons en sorte qu'il soit affiché en bloc. Un autre. Le texte est au nombre de cent. Faisons preuve de flexibilité en matière d'affichage, en justifiant le contenu pour le centrer. La marge supérieure est de dix. Ce que nous devons faire maintenant est de copier le SVG, puis de le coller entre ce d. Retournez au point de ressource de code MD Soulignons le 712 2742. Surlignez entre le SVG d'ouverture et le SVG de fermeture. Copiez, revenez au code, puis collez-le dedans. Formatons le code. Magnifique. Après ce jour de clôture nous aurons un tag P, et je vais le faire, vous méritez qu'on le voie. Stylisons rapidement le tag P. Donnez le nom de la classe. Marge au-dessus des quatre as maximum. Cela fera en sorte que la largeur maximale soit de 20 m. Texte. Quelle couleur de texte allons-nous utiliser ici ? Sept b858b. Les polices, c'est-à-dire la famille de polices. Alignons-le ensuite au centre. C'est bon. Passons maintenant à un tag P. Et ce sera un droit de copie. Nous allons avoir exactement la même couleur, exactement la même couleur de test, il suffit donc de la soulever là-haut. Encore une fois, exactement la même police, surlignez et copiez-la, collez-la ici comme ça et boum. Encore une fois, ce que nous devons faire après avoir divulgué d, nous allons avoir un autre d. Nous allons lui faire afficher la grille d'affichage L'écart six, la colonne du modèle de grille, six, et le dispositif médian, partie et en haut, est de 20. Et maintenant, nous voulons afficher le logo sur un appareil plus grand. Je vais le faire sur un appareil de taille moyenne. Nous allons le bloquer, sinon, cachons-le. Nous allons maintenant avoir un autre d. Text Blue 500. C'est bon. Nous devons également copier-coller le SVG. Est déjà surligné. Je dois juste copier. Collez-le dans le code au format d. Si vous faites défiler l'écran vers le haut, nous allons avoir exactement les mêmes informations ici. Je dois juste surligner toutes les balises P. Ensuite, collez-le juste après cette profondeur. Une fois cela fait, vérifiez-le sur le navigateur. Très bien, nous avons le logo. Le logo bleu apparaîtra sur un grand appareil, et sur un appareil plus petit, nous allons changer le logo vert et ainsi de suite. Alors laissez-moi vous le montrer rapidement. Faites défiler l'écran vers le haut. Le premier ici, nous avons le logo Heating sur les appareils de taille moyenne. Et puis il n'apparaîtra que sur un appareil plus petit. Et le deuxième logo d'un ici, nous l'avons chauffé sur un appareil plus petit et nous l'avons affiché sur des appareils de taille moyenne, et puis voici le logo. est aussi simple que ça. Mais le problème que nous avons maintenant, c'est que les choses ne sont pas bien alignées. Voyons donc ce qui se passe. Faites défiler la page vers le haut. C'est bon, les gars. Jetez-y un coup d'œil. P X. Modifions-le et voyons si nous allons obtenir le bon alignement. Rechargez. Même chose ici. Nous devons revenir au code. C'est bon. Donc, vous savez, nous avons extrait ce code d'ici, n'est-ce pas ? Nous devons donc modifier certaines propriétés. Nous ne voulons pas qu'il soit aligné au centre. Une fois cela fait, faites défiler l'écran vers le haut. La colonne du modèle de grille ici sera de cinq. Et je pense que cela résoudra le problème. C'est bon. Magnifique. Vérifions-le ou plus par appareil. C'est le résultat attendu. C'est bon, les gars. Le pied de page prend progressivement forme. Le nid en ligne sert à exposer les objets. Faisons-le lors de la prochaine conférence. 62. Articles de pied de page: Affichons rapidement les objets puta. Et juste en haut. Nous avons donc une gamme de services. W dans le tableau, nous avons tous les éléments que vous pouvez afficher. Et d'ailleurs, tu peux le modifier de ton côté. Ouais. Vous pouvez donc spécifier le type de service que vous rendez. Ici aussi, nous avons un éventail de compagnies. Nous avons une évaluation du compte Bat Meet the Team. Et nous avons ici un éventail de réponses, qui contient le contact, les fréquemment posées et le chat en direct Et voici les politiques légales. Nous allons maintenant afficher tous les éléments à l'écran. Juste après la clôture de son DVD. Nous allons avoir un d, lui donner un nom de classe sur un appareil de taille moyenne. Nous allons l'avoir en bloc d'affichage, sinon nous allons le cacher sur un appareil plus petit. L'idée est donc d'utiliser l'accordu pour activer et ouvrir les éléments sur un appareil plus petit Passons maintenant à un tag P. Je vais faire des services. Donnons-lui un plat périmé Le support de police, qui est le set de polices. Texte blanc. Taille de police. C'est bon. Après le tag P de fermeture, nous allons avoir sur cette liste, une URL, dans l'UL, nous allons cartographier les éléments. Ici, je vais faire une carte à points de Servis. Nous essayons donc de cartographier cet ensemble de données, qu'est le service. Lorsque nous cartographions ce tableau, tous ces éléments seront divisés à l'écran, c' est-à-dire les éléments du service. Tous les trucs sont en fait les éléments de base. Nous allons maintenant faire un élément, et cet élément représente chaque élément du tableau. Nous allons donc renvoyer l'interface utilisateur. Dans l'interface utilisateur, nous allons avoir une balise LI. Dans le tag LI, nous allons avoir un remorqueur A, puis il ne nous reste plus qu' à exposer l'article Enregistrez et voyez ce que nous avons. C'est bon. Maintenant, nous l' avons ici. Donnons-lui rapidement le s. Donnez un nom de classe au A tug. Le texte, sept B, 858b. La police Dash, Sans, qui est la famille de polices. Sur Hova, l'opacité sera de 75. Sauvegardons et voyons, sauvegardons. Maintenant, nous l'avons dans le navigateur. Sur Hova, tu vois ? Encore une chose, rapprochons-nous du pointeur. Elle est déjà belle, mais je ne suis pas satisfaite de l'alignement. Voyons donc si nous pouvons styliser le tag UL. Donnez-lui un nom de classe. Marge supérieure de six, espace de quatre. Ensuite, la taille du texte sera SM. Enregistrez le projet. C'est plus beau comme ça. Maintenant que c'est fait, faites défiler l'écran vers le haut. Nous en avons un, deux, trois, cela signifie que nous allons le dupliquer trois fois. Points saillants de cette plongée d'ouverture à celle de clôture. Je vais juste le dupliquer trois fois. Vous pouvez le copier-coller trois fois. OK, laisse-moi copier et coller. J'ai copié, puis je viens ici, je colle, colle, colle. Je veux qu'il soit facile pour tout le monde de suivre. Si vous économisez, nous avons maintenant les mêmes articles à trois endroits. Nous allons donc rapidement assembler les différents éléments. Si vous faites défiler l'écran vers le haut, cela va être un compagnon. Il s'agit du premier article. Il s'agit du deuxième élément. Nous allons cartographier l'entreprise, et ici le tag P, nous allons établir la politique de Copanin Je pense que ça sonne mieux comme ça . C'est bon quand tu verras. Bien. Pouvez-vous voir Beautiful Scroll en haut la page ? Nous avons l'hépatite C. Voici l'entreprise, puis nous allons cartographier l' aide Que faisons-nous ici ? Liens utiles. Ouais. Enfin, nous devons cartographier le lego. Et voilà. Je vais donc élaborer une ou plusieurs politiques juridiques. Qu'est-ce que tu en penses ? Nous allons maintenant créer une carte à points de l'ego, puis les éléments seront affichés à l' écran. Jetez-y un coup d'œil. Magnifique. Nous en avons donc fini avec le pied de page sur les gros appareils. Lorsque vous vérifierez l'appareil mobile, vous vous rendrez compte que rien ne s'affiche là-bas. Ne vous inquiétez pas, je comprends que le témoignage est trop grand pour son contenant Nous allons certainement y remédier à l'avenir. Rien ne s'affiche à l' écran sur un petit appareil. Voyons ce que nous avons sur l'iPad A. Bien. Sur iPad, c'est comme ça. Et j'adore chaque détail du design. Parfait. Le nid et la ligne servent à afficher les icônes des réseaux sociaux. Faisons-le lors de la prochaine conférence. 63. Afficher des icônes de réseaux sociaux: Bon retour en classe. Très bien, allons-y pour afficher les icônes des réseaux sociaux. Juste après ce d, nous allons avoir un autre d. Un appareil de très grande taille, le w maximum sera de six excel. De plus, nous allons devoir exceller au maximum avec sept Excel. Px dix sur un appareil de taille moyenne, Px 20. Un appareil de très grande taille, px 44, Mx ou deux. Sur un appareil plus petit, le Pi sera chauffé à dix reprises par trop-plein Maintenant, nous allons avoir un autre d, donnez le nom de la classe. Faisons en sorte qu'il affiche Flex. Ensuite, nous allons l' enrouler de manière flexible. Le flex wrap va être un wrap. Justifiez un contenu, espacez les deux. Éléments alignés au centre. Un autre. La largeur sera égale à une paire de l'écran. Un petit appareil, la largeur va être automatique. Encore une fois, sur un petit appareil, marges gauche et droite correspondent à la marge inférieure dix et sur un petit appareil, à B zéro. Oups Jetez-y un coup d'œil. Magnifique. Maintenant, nous allons avoir une étiquette A. Dans la balise A, nous devons coller le SVG. Ouvrez la ressource de code. Faites défiler la page vers le bas Vous allez voir les icônes FO. Copions le SVG pour Twitter. Surlignez et copiez. Viens ici, collez-le entre le tag A. Formatez le code. Enregistrez et voyez ce que nous avons à l'écran, et maintenant nous l'avons comme ça. Donnons-lui rapidement un style. Donnez un nom de classe à la balise A. Faisons en sorte qu'il affiche Flex. Direction de flexion, est une colonne. Objets, centre d'alignement. De plus, justifiez le contenu au centre. C'est bon. Lorsque vous cliquez sur l'icône du réseau social, nous voulons ouvrir un nouvel onglet Target est donc vide Dans la référence aux hypothèses H REF, assurez-vous de coller le lien de votre fil ou de coller votre tweeter, pour ainsi dire, s'il y a quelque chose comme ça maintenant Cela fait, sous la balise de fermeture du SVG. Nous allons avoir un H cinq. Je vais créer un fil Twitter. Vous pouvez créer un fil de discussion si vous avez un compte de fil de discussion, et vous pouvez également utiliser le fil de discussion SVG Mm. Donnons maintenant le nom de la classe. Ce sera recteur. Mting Top, ça va être fait. Sur un grand appareil, les trois premiers de Ming. Du texte S et un autre appareil, texte B. La police, la famille nous allons avoir ses fils, et puis le test, la couleur du test sera le gris 200. La transition sera réglée sur les couleurs. La durée est de 300. Groupe, Hove. Nous allons recevoir un texto. Maintenant, lorsque vous passez le curseur sur le test, nous allons avoir une couleur de test bleue 48, e d'Ed. Faisons des économies et voyons ce que nous avons. Bien. Jetez-y un coup d'œil. Tu vois ? Maintenant, ce que je vais faire est simple. Nous allons mettre en évidence ce déselect à partir des lignes un, neuf, trois, deux, deux, un, deux. Je le dupliquerais quatre fois. Vous pouvez copier-coller quatre fois. C'est bon. Lorsque vous sauvegardez, et voici le résultat final. Tout est magnifique. Remplaçons donc tous les éléments. Nous allons avoir Instagram, dribble, etc. Il me suffit donc de publier le leurre, puis de l' implémenter de mon côté C'est extrêmement facile à faire. Par exemple, ouvrez la ressource de code, puis voici le Git SVG Surlignez et copiez ici. Je vais utiliser Twitter. Maintenant, je vais remplacer ce SVG, et celui-ci est pour Git Assurez-vous de coller l'URL de votre profil ou de votre profil Gits dans le format H. Is lend to Ici, je vais faire Git. OK, laisse-moi le faire pour toi. Regardez la conférence à la fin. Celui-ci est pour Dribble, surligner, effacer, coller Maintenant, je vais faire du dribble. Voici le dribble. Le suivant est le lien D. Copiez le lien, puis nous le nous ferons également Nous l'avons également pour Instagram. Lorsque vous sauvegardez, jetez-y un coup d'œil. Magnifique. Ainsi, lorsque vous cliquez , une nouvelle page s'ouvre. Par exemple, si vous avez collé l'URL de votre Github, lorsque vous cliquez, cela ouvrira votre compte GitHub dans Implémentons-le également pour Gmail. Nous devons également le dupliquer une fois de plus. Surlignez à partir des lignes 28223 sur trois lignes dupliquées. Ce sera G mail. Remplaçons-le par le G mail SVG. C'est bon. Lorsque vous enregistrez et quittez le navigateur, voici le résultat final. C'est vraiment génial. Cela fait, passons rapidement à la prochaine conférence afin pouvoir afficher ces éléments sur un appareil plus petit. Si vous le consultez sur un petit appareil, vous remarquerez que tout fonctionne correctement à l'exception des articles. 64. Menu de pied de page sur un appareil mobile: Il est là. Bon retour en classe. Dans cette conférence, nous allons implémenter le menu Futa. Lorsque l'utilisateur clique sur le menu, les éléments s' affichent à l'écran. Mettons-le en œuvre rapidement. Ouvrez le répertoire des filtres. Filtrez le point z. plus, nous devons ouvrir le codon Oups, jetez un œil. Fermez l'explorateur. Dans le filtre, la première chose que nous allons faire est d' importer le codon Envoie le codon à partir du codon point slash. Une fois cela fait, la prochaine étape consiste à transmettre l'ensemble de ces éléments sous forme d'accessoires dans le codon Comment s'y prend-on ? Permettez-moi de vous montrer rapidement. Faites défiler la page vers le bas Écrivez placer la section après le s. Nous allons faire le rendu de l'accordéon Fermez-le avec l'étiquette à fermeture automatique. Maintenant, nous devons prendre en compte le titre, et nous allons faire des services. Ici, transmettons le contenu égal, défiler l'écran vers le haut et laissez-moi vous le montrer. Ce gars ici, qui est la gamme de services. Surlignez et copiez. Viens ici et colle. Maintenant, surlignez, nous devons le dupliquer trois fois. Maintenez la touche Shift enfoncée, puis appuyez sur la flèche vers le bas pour dupliquer. Dupliquez un, deux et trois. Il faut maintenant changer le titre et le contenu. Voici ce que nous allons avoir. En fait, vous pouvez le vérifier d' ici. Laisse-moi te montrer. Voici donc les titres. La politique de Copaning, les liens utiles et les politiques juridiques également Je pense donc que nous avons maintenant la politique d'entreprise. Surlignez et copiez, venez ici et collez. Vissez vers le haut. Nous devons transmettre cet éventail de sociétés comme accessoires à l'acodéon Donc, ce que nous devons faire maintenant, c'est le transmettre en tant que contenu ici, car le contenu est déjà un attribut qui entre dans l'accodon Voici les liens utiles. Puis surlignez, essuyez-le, collez-le. Nous avons une septicémie. Faites défiler l'écran vers le haut. Ici, nous allons aborder l'aide, l'éventail des formes d'aide. Enfin, pour le titre, nous allons avoir les politiques légales. Faites défiler l'écran vers le haut, où nous avons le tableau des lois. Surlignez et copiez. Viens ici Nous devons également le remplacer. Cela fait, le nid et la ligne doivent recevoir ces accessoires dans l'acodon Faites quoi enregistrer, revenez à l'accordéon gs, dans le paramètre de cette fonction Nous allons déstructurer le titre et le contenu. Laisse-moi te le montrer encore une fois. Voici le titre et voici le contenu. Assurez-vous d'orthographier correctement afin de ne pas avoir de problèmes. Maintenant, tout est fait correctement. Déclarez les variables d'état nécessaires à utiliser. Ici, nous allons porter le U State Hook. Le crochet Ute est une fonction. Nous devons donc l'invoquer. Nous fonctionnons dans l'état U. Nous allons prendre l' entrée en vigueur comme état initial. Ensuite, nous allons avoir un tableau de deux entrées. Le coût est ouvert, le jeu C est ouvert, puis attribuez-le comme ceci. Il s'agit de la variable qui contient l'état initial et de la fonction seta qui sera utilisée pour mettre à jour l' état initial. C'est aussi simple que ça. Je pense que tu devrais me donner quelques acolytes pour ces belles explications Maintenant, nous allons avoir une fonction. C, nous allons l'appeler Tg , Tg accordu. Réglez-le sur une fonction. Gagnez la fonction, nous allons faire en sorte que le réglage soit ouvert pour ne pas ouvrir. Maintenant en état d'ivresse Si, de votre côté, votre d n'a pas de nom de classe, veuillez procéder pour spécifier le nom de classe. Donnons la bordure et la bordure de couleur de bordure d39, 39, 39 La marge inférieure est de quatre, la séparation en haut et la marge en Faisons en six. Nous allons avoir un autre d. Donnez-lui un nom de classe. Nous allons lui faire afficher Flex, Justify, espace de contenu entre les deux. T. Alignez les éléments au centre. Le rembourrage est de deux, mais sur un appareil plus petit, le rembourrage est La largeur sera pleine à 100 %. Enfin, le fond sera rouge 500 pour les documents pédagogiques. Ouais Win fait D ? Non, je n'aime pas ça. Très bien. Quand arrivera D, nous aurons une étiquette H deux. H deux. Gagnez le tag H two, nous allons afficher le titre. Ce titre ici, rappelons que nous l'avons déstructuré ici dans le paramètre de la fonction, et qu'il vient d'ici Nous l'avons transmis sous forme d'accessoires dans le codon, puis nous l'avons reçu ici Puisque nous l'avons reçu ici, nous devrions pouvoir l'utiliser n'importe où autour du composant. Voyons et voyons ce que nous avons sur un appareil mobile. Lorsque vous rechargez, il est écrit «  modulo f countries of Mur. Voyons ce que nous avons ici. Dans le pied de page, nous avons le codon. Revenons au pied de page, défilons vers le haut. Nous importons un codon d'un codon à un autre. Jetez-y un coup d'œil. Nous devons décoller le traîneau. Maintenant, ça marche. Vis vers le bas. C'est bon. Magnifique. Tu peux voir le titre ? Nous avons le service, la politique des partenaires, le lien utile et les politiques juridiques Si vous observez avec vos yeux d'ingénieur, vous vous rendrez compte que l'espace entre chaque élément est extrêmement marqué. Réparons-le rapidement. C'est bon. Revenons-en à l'accordéon Fermez l'explorateur. Je pense que nous devons styliser l'étiquette H two. Donnons le nom de la classe. Texte et deux fichiers Excel. Faisons en sorte qu'il soit large. La police sera semi-grasse. C'est bon. Sauvegardons et voyons voir. Très bien, j'adore la couleur du test et son apparence. Réduisons rapidement l' espace entre les éléments H. Donc, ce que je vais faire maintenant, c'est changer le rembourrage en haut et en tapotant Réduisons-le. Faisons-le aussi. Lorsque vous économisez. C'est bon. Je pense que c'est déjà mieux. Oui, j'adore ça. Vérifiez-le sur un autre appareil. Bien. Jetez-y un coup d'œil. Ça a l'air sympa. Que faisons-nous en ce moment ? Ici, nous allons avoir un D, lui donner un nom de classe. BG, donnons-lui la couleur de fond. Nous allons avoir exactement la même couleur de cheveux, flic brillant. Puis piste. La hauteur sera de huit. La largeur sera de huit. Nous allons lui faire afficher le contenu Flex, Justify au centre. Alignez les éléments au centre. Ensuite, nous allons arrondir les bords. Nous allons donc l' arrondir complètement. Nous voulons qu'il soit encerclé. Ceci fait, copions le X VG et le collons ici. Ouvrez le point de ressource de code MD. Copiez le SVG de l'accordéon. Retournez au code, collez-le entre les deux, enregistrez, assurez-vous de le formater. Vérifiez-le dans le navigateur. Ça a l'air très joli. Mais il faut changer la couleur pour qu'elle soit plus visible. Donnons-lui un nom de classe. Ici, nous allons faire du W 6. Nous sommes en train de styliser l'icône elle-même. La largeur de l'icône sera de six, la hauteur sera de six caractères blancs. Jetez-y un coup d'œil. Maintenant, tu peux voir ? Magnifique. J'adore ce que je dis. Continuons. Lorsque nous cliquons sur cet élément, nous voulons faire pivoter l'icône. Laissez-moi vous montrer rapidement. Donc, dans la classe maintenant, nous devons prendre en compte l'interpolation des chaînes car nous attendons un script Java pour pouvoir écrire la condition C'est bon. Maintenant, nous pouvons avoir cette condition. Si le paramètre open est défini sur true, faites attention, rien ne se passera. Sinon, nous devons faire pivoter l'icône. Moins, faites pivoter à 90 degrés. Quand vous voyez le résultat, vous comprenez certainement ce que nous avons fait ici. Nous avons maintenant l'icône comme celle-ci. Oui, implémentons rapidement le clic. Alors, où implémentons-nous le clic maintenant ? Implémentons-le dans ce D. Cliquez, nous allons appeler l'acordeum du Togol Sûr Maintenant, jetez-y un coup d'œil. Lorsque je clique sur cette icône, elle pivote vers le bas exactement à 90 degrés. Jetez-y un coup d'œil. Dites-moi, ça n'a pas l'air bien. Bien sûr, c'est le cas. Lorsque vous cliquez à nouveau, vous faites pivoter, vous faites pivoter, vous faites pivoter. Vous pouvez également cliquer pour ajuster Tout fonctionne, tout est cool. J'adore ça. C'est souvent le cas maintenant pour cette conférence. Dans la prochaine conférence, nous allons afficher les éléments lorsque vous cliquez sur le titre Lorsque vous cliquez sur ce menu, nous devrions être en mesure d'afficher les données relatives aux services De plus, lorsque vous cliquez sur la politique du partenaire, nous devrions être en mesure d'afficher les données relatives à la politique du partenaire. est aussi simple que ça. J'ai trop parlé. Rendez-vous lors de la prochaine conférence. 65. Menu déroulant sur un appareil mobile: Bonjour. Bon retour en classe. Dans cette conférence, nous allons implémenter le menu déroulant. Pour cela, nous allons utiliser l'interface utilisateur headless. Rendez-vous rapidement sur headless.com et faites défiler légèrement l'écran vers le bas Ici, vous allez voir la commande d'installation. Assurez-vous de surligner et de copier, revenez au code FS. Ouvrez le terminal. Assurez-vous de cliquer dans le terminal, puis faire la commande C pour arrêter le serveur en cours d'exécution Nous allons maintenant lancer la commande pour installer l'interface utilisateur headless Appuyez sur la touche Entrée pour le lancer. Installation réussie. Démontons le terminal. Vissez vers le haut. Je vous en prie, nous sommes toujours dans le codon. Maintenant, nous allons passer aux pots, jetez un œil. Nous devrions séparer les choses. R : Nous allons importer une transaction depuis l'interface utilisateur headless. Cela fait, faites défiler la page vers le bas, puis où allons-nous l' implémenter maintenant ? Juste après ce d, laissez-moi vous montrer juste après ce D, où nous avons implémenté le clic. Nous allons effectuer la transaction. Nous allons effectuer quelques réglages au sein de la transuccion Mais avant cela, rendons rapidement les éléments. Ouvrez et fermez les cordons. crochets, ouvrez et fermez les parenthèses, puis nous allons prendre R, lui attribuer une fonction Maintenant, nous allons avoir un d, vous donner le nom de la classe. Le schéma du d, nous allons faire en sorte que ce soit quatre, le BG pour enseigner les pâles Le BG sera jaune 500 pour l'enseignement du violet, fermez-le. Nous allons prendre et attribuer. Dans le D, nous allons créer une carte à points du contenu. Nous devons cartographier le contenu pour l'afficher à l'écran. Bien entendu, vous devez connaître les autres processus impliqués. Maintenant, prenons des éléments qui représentent chaque élément du tableau. Je n'arrête pas de le dire parce que je voulais m'en tenir à ta mémoire. Nous allons rapidement avoir un tag P. Dans la balise P, nous allons afficher l'article. Sauvegardez les opérations, nous devons le faire dans le terminal, et PM Run dev. Voyons ce que nous avons. L'application est ouverte sur des pots d'hôtes locaux, 3 000. Maintenant, il indique que la transection est utilisée, mais il lui manque la propriété show, qui est une opération booléenne qui renvoie soit vrai, soit Donc, ce que nous devons faire maintenant dans le cadre de la transaction, c'est configurer la propriété ici, nous allons montrer Nous allons également le configurer pour qu'il soit ouvert. C'est bon. Faisons des économies. Faites défiler vers le bas. Maintenant, lorsque vous cliquez, nous pouvons ouvrir le menu. Mais je ne sais pas pourquoi les objets n'apparaissent pas. Nous devons y retourner et vérifier ce que nous avons fait ici. Voici le tag P. Carte à points du contenu. Voyons voir. Oui, nous avons le contenu ici. C'est quoi encore une fois ? Très bien, les gars, vous savez que nous vous ramenons ici. Je te dis toujours de ne pas faire cette erreur. Mais maintenant, il semble que nous soyons tous victimes. OK. Ici, nous avons un parentensis et non un co-bracket. Assurez-vous d'ouvrir le parent ici et de le fermer. Enregistrez et voyons voir. Magnifique. Tu peux voir ? Jette un coup d'œil. C'est génial. J'adore ça. Maintenant, je suis soulagée. Tu peux voir ? Maintenant je me sens bien. Implémentons certaines propriétés dans la transaction pour la rendre plus belle. Dirigez-vous vers la tête L UI. Dans le coin inférieur gauche de l'écran, vous allez voir la transaction Cliquez pour ouvrir. Ce que je vais faire, c'est copier toutes les propriétés ici. Cliquez sur Copier. Viens ici. Dans la transaction, collez-la, enregistrez. Je suis sûr de formater le code. Maintenant, vérifions-le à nouveau. Un meilleur. Tu vois l' animation ? Jette un coup d'œil. Tout est cool. Stylisons rapidement le tag P. P Y un. Le texte, rendons-le gris. Texte gris, 500. Passons à 400 car le gris sera deux du et il est de 500, mais c'est vrai. Nous avons maintenant la valeur réelle. La police sonne bien. Sûr. Tockle encore une fois. Parfait. Mais maintenant, nous devons supprimer les couleurs de fond parce que je les ai utilisées fins pédagogiques afin que vous compreniez assez bien ce que j'ai La couleur de fond doit être exactement la même tout ce qui se trouve ici. Surlignez le texte. Viens ici. Coller. Oups, enroulez-le dans un support carré. Je n'aime pas l'arrière-plan du menu. Je pense que nous devrions utiliser l'arrière-plan du pied pour le menu afin qu'il puisse se fondre C'est bon. Ouvrez rapidement le pied de page. Où nous avons l'arrière-plan du pied de page. Le voici. Nous devons copier cet arrière-plan, surligner le texte dans la section du pied de page aux lignes 52 Quand tu viendras ici, il ne nous reste plus qu'à le remplacer. Même chose ici. Nous devons également le remplacer. OK ? Une fois que vous aurez économisé, voyons ce que nous avons. Maintenant, c'est beau. Tu vois comme c'est beau ? Extrêmement beau. Jette un coup d'œil. C'est excellent. Je pense que c'est terminé. Nous avons terminé. En effet, nous avons terminé. Jetons donc un coup d'œil sur iPod. Parfait. Tout est cool. C'est donc une offre à un potier, et j'espère que vous aimerez le design. Assurez-vous de lire et de revoir les scores. Cela signifie beaucoup pour moi. Ouais ? 66. Design d'en-tête de page: Bonjour. Bon retour en classe. Dans cette section de la cause. Nous allons passer à la page « Contactez-moi ». Rapidement, dans le répertoire des pages. Cliquez avec le bouton droit sur Nouveau dossier, et cela s'appellera Contact. Gagnez le répertoire Contactez-moi, cliquez avec le bouton droit de la souris, nouveau. Nous allons avoir les pages. Magnifique. Maintenant, dans la page, nous avons le formulaire de contact et la conception détaillée du portfolio. Ce serait très bien si nous suivons les principes fondamentaux de la conception d'un site Web professionnel, ce qui implique que nous devrions renommer la page de deux pages Ça devrait être un mot de plèvre. Ne t'en fais pas pour le moment. Nous le ferions à la fin du cours. Pages Contactez-moi. Fermez l'explorateur, RFC pour générer des composants fonctionnels de réaction Nous allons créer une page de contact. Ouvrez le composant explorateur, puis ouvrez l' en-tête, header point js. Faites défiler rapidement la page vers le bas. Dans cette balise LI, nous allons accéder à la page « Contactez-moi ». Dans le g suivant, chaque fois qu'un package est créé dans la page du répertoire, qui est le gars, ce répertoire devient automatiquement une route. Pour l'instant, on peut dire que le contactez-moi est un itinéraire car la page qu'il a créée est créée dans le répertoire «   contactez-moi », et le répertoire « contactez-moi » est créé dans la page. Laisse-moi y réfléchir encore une fois. Dans le paragraphe g suivant, chaque fois que vous créez un dossier dans le répertoire des pages, ce dossier devient automatiquement une route lorsqu'un point de page s y est créé. Simple et court. Maintenant, ce que nous allons faire, c'est cibler la page , puis me contacter. Permettez-moi de vous montrer rapidement. Et je suppose que vous le comprendrez certainement lorsque nous l'implémenterons. Je vais faire slash page slash, contactez-moi comme ça Lorsque vous enregistrez, vérifions-le dans le navigateur. Assurez-vous de le recharger. Essayons en cliquant sur le bouton Hyam. Tu peux voir ? Nous avons maintenant pu ouvrir la page « Contactez-moi ». Laisse-moi effacer ton dossier. Retournez aux pages de code. W dans le DP, nous allons avoir un tag Hage one. Avec une étiquette en tête, copions ce test. Désolé, nous devons couper puis coller. Donnez le nom de la classe. Nous allons utiliser un vent arrière et je vais écrire sept fichiers Excel. Cela rendra le texte encore plus grand. Vous avez maintenant le texte dans le coin supérieur gauche de l'écran. Je dois également apaiser ta curiosité. Nous allons avoir un écran flexible. Justifiez le contenu pour centrer et aligner les éléments sur le centre. C'est juste à des fins pédagogiques, et voici la page de contact. Ça a l'air sympa. Nous n'avons besoin d' aucun de ces éléments ici. Surlignez, effacez, commandez B pour fermer l'explorateur. Ici, nous allons être un peu rapides afin pouvoir rattraper le retard que nous avons pour cette conférence. Allez-y, écrivez un beau commentaire si vous aimez la façon dont j'enseigne. Nous allons avoir un fragment de réaction. Vous pouvez continuer à utiliser les fragments vides si vous le souhaitez. Ils sont tous pareils, juste que les fragments de réaction peuvent accepter certains accessoires. Ouais Je pense que c'est ce qui fait la différence. Ici, nous allons faire une plongée. Donnez le nom de la classe. Nous allons avoir le DVD pour afficher Flex. La direction de flexion est la colonne. Alignons les éléments au centre. De plus, justifiez le contenu au centre. W, haut à rembourrage complet, 80 px. Fond rembourré. Aussi, faisons-en 80 pixels Faisons la marge du haut, F nous allons avoir un autre D. Même chose ici. Il suffit de les mettre en évidence à partir d'ici, copier, de venir ici et de les coller. Nous n'avons pas à perdre de temps. Nous allons spécifier l'arrière-plan, BG, ouvrir et fermer les crochets. Gagnez les crochets, nous allons saisir l'URL. Ouvrez et fermez ensuite la parentalité. Gagnez le double. Nous allons faire des slash offices point JPG. Nous avons un bureau d'image. Et cette image se trouve dans le répertoire public. Je n'ai plus besoin de t'y emmener parce que tu devrais le savoir maintenant. Ici, nous allons faire une couverture de BG. Nous essayons de styliser l'image. Au fait, arrêtons-nous sur D. W Full. Donnons la hauteur. Faisons en sorte qu'il fasse 400 pixels. Sauvegardez sur le navigateur, le voici. Parfait Il sort prudemment. Une autre chose que nous devons faire est d'aligner l' image au centre, PG au centre. Enregistrez et voyez ce que nous avons. C'est bon. Ça a l'air sympa. Écrivez O dans cette définition, nous allons créer une superposition d'arrière-plan Nous allons avoir un autre df, donnez le nom de la classe. Nous aurons exactement la même chose ici. Surlignez le texte, venez ici et collez. Ouais La largeur sera donc la même. La hauteur, le fond, l'arrière-plan, nous allons rester cohérents avec le fond sombre que nous utilisons 223, 740. Ce que nous allons faire maintenant, c'est faire une barre oblique, qui est divisée par 70 Nous voulons réduire l' épaisseur du fond. Lorsque vous économisez, désolé, nous devons fermer les dents, économiser et voir ce que nous avons. Maintenant, nous l'avons. Si je retire les 70 comme ça, voyez-vous, ça va être comme ça, quelque chose comme opaque. Mais si vous voulez qu'il soit transparent, suffit de le diviser par 70 ou vous pouvez le diviser par la valeur de votre choix pour vous donner l'apparence transparente que vous souhaitez vraiment avoir. Le mien est comme ça. J'en suis satisfait. Appliquons la luminosité. Luminosité de la toile de fond, luminosité. Non, nous allons en avoir 50. Je pense que c'est à ce moment-là que vous avez vu. Sympa. Dans ce d, nous allons avoir un autre d. Mettre dans une interface utilisateur est d. Testez le centre d'alignement. BG, nous voulons vous donner le contexte. Bien entendu, nous allons rester cohérents avec le contexte. 48, AFD, E, PY, un pixel, Px, huit pixels Track and White. Nous allons devoir transformer notre police au cas par cas, la police sera semi-grasse. Texte de 20 pixels. texte est blanc pour la couleur, et nous voulons que les arrière-plans soient arrondis G. Dans le D. Je peux le voir maintenant. OK. Je pense que je devrais augmenter légèrement le front . Ça te plaît comme ça ? C'est dommage et cela va presque tout cacher. Continuons comme ça. Alors, encore une fois, c'est quoi ? Allons y jeter un œil. Il se peut que vous ne voyiez rien dans le navigateur tant que nous n'affichons pas quelque chose entre le d. Nous allons donc avoir un tag ici. Avec le tag A, nous allons créer un formulaire de contact. Lorsque vous économisez, le voici. C'est exactement ce que l'on attend. En mettant le haut, les parties et le bas, faisons-en cinq pixels. Je pense que c'est bon. Faisons ensuite ces dix pixels. C'est bon, ma belle. Nous allons faire en sorte que HREF soit égal, contact. Lorsque nous cliquons sur cette balise A, qui dans ce cas, correspond à un gars ici, le défilement se fait exactement vers le formulaire de contact. Ouais Qu'est-ce qu'on va faire maintenant ? Donnons le nom de la classe. Faisons en sorte que ce soit normal. Magnifique. Que devons-nous faire d'autre maintenant ? Après cette plongée, nous allons faire une autre plongée. La marge en haut du devon sera de dix pixels. Gagnez, nous allons avoir un tag Hight One. N'oubliez pas que nous restons cohérents avec le téléphone. Ici, nous allons avoir les polices à mémoriser. Le texte est excellent. Encore une fois, le texte, exemple de la même couleur. Je vais juste surligner la copie, puis la remplacer. Pan va avoir deux ans. Testons l'alignement par rapport au centre. C'est pour l'espacement ultérieur. Gagnez la tête d'un tag, je vais le faire et vous me sauverez . D'accord. Le voici. Nous l'avons obtenu. Bien. Après ce DF, nous allons avoir un autre D, donnez-lui le nom de la classe. Faisons quelque chose. Nous allons maintenant avoir un tag P. Gagnez le tag P, il suffit de copier l'écriture puis de la coller entre les deux. Dans le code resource.md, nous devons copier l'écriture Surlignez et copiez-le, revenez en arrière, collez-le. Formatez le code. Enregistrez sur le navigateur et ici. Stylisons rapidement le tag P. Tout d'abord, nous allons stériliser les profondeurs. Nous allons placer le contenu Display Flex et Justify au centre. Nous allons avoir une ligne de test, au centre. Marge dans le top dix. Sur les appareils de taille moyenne, nous voulons une largeur de 700 pius et s. Insérez rapidement le tag p et donnez-lui un nom de classe. Textez avec. La police que nous allons utiliser sera de 300, qui est la police avec laquelle. Ensuite, le texte Excel est au centre du texte. Après avoir fait ça, quand tu vois, Beautiful. C'est exactement le résultat escompté. J'adore ça. Ça a l'air magnifique. Une fois cela fait, vérifions-le rapidement sur un appareil mobile. Tu peux voir ? Bien. 67. Carte de menu: Dans la conférence précédente, nous avons conçu l'en-tête «   contactez-moi ». Dans cette conférence, nous passerons aux cartes, le code Hao s, juste après ce d, le d au-dessus de la tête. Ce type. Nous allons avoir un autre d. Rembourrage à gauche et à droite, 20 pixels À l'intérieur, nous allons avoir un d, donner le nom de la classe. Sur un appareil plus petit, nous allons avoir un écran flexible, le GAP 20 pixels, marge supérieure 50 pixels. La largeur maximale, la largeur réelle sera complète, qui est de 100 %, et la hauteur est également de 100 %. Quoi qu'il en soit, formatons rapidement le code. Nous l'avons comme ça. Maintenant, nous allons avoir une autre définition. Nous allons le faire flexible. La direction de flexion est la colonne. Ensuite, nous allons faire du flex. s'agit d'un appareil de très grande taille, dont le sens de flexion sera le roulis. Donnons-le. 20 pixels. Nous essayons de créer les boîtes. Nous allons avoir un autre DVD. PY, 35 choix, P X 45 choix. D G arrondi parce que nous voulons que les coins et les bords des boîtes soient un peu courbes L'ombre, G, le cos, faisons-en un pointeur. Je veux qu'il y ait une transaction, tout le monde. Transformez ensuite la durée Bash 300. Sur Hova, lorsque vous passez le curseur sur la carte, nous allons changer l'arrière-plan. Oui. Ce sera le véritable arrière-plan Hova que nous avons utilisé Je vous l'ai dit, il est nécessaire de rester cohérent lors de la création d'un site Web professionnel. Nous voulons également modifier le texte de Hova. Également sur Hova. Nous voulons traduire Y. Nous allons l'avoir. La couleur de fond réelle de la carte sera B, blanc. Je veux vous le montrer pour que vous puissiez le voir c. Maintenant, nous l'avons. C'est très bien. Appliquons-y rapidement l'ombre de la boîte. Ouvrez rapidement le point de ressource de code MD , puis copiez cette ombre encadrée. Après cela, revenez au code et collez-le dans le D. Collons-le ici. Oui, lorsque vous consultez le navigateur, et le voici. Et lorsque vous passez la souris dessus, l'arrière-plan apparaît. La ligne suivante consiste à afficher le contenu dans le d ou dans la carte pour ainsi dire. Mais je veux que vous remarquiez que lorsque je survole , cela se traduit vers le bas Jette un coup d'œil. Ce n'est pas le résultat escompté. Cela devrait se traduire vers le haut et non vers le bas. Revenez au code dans lequel nous avons implémenté le survol. Ici comme ça, je pense que nous devons spécifier une valeur négative comme celle-ci. Nous l'avons déjà fait. Encore une fois, jetez un œil. C'est bon. Bien. C'est quoi le df, nous allons avoir une autre division. Faites-lui afficher Flex au centre des éléments alignés. L'écart, faisons-le 15. Nous pouvons choisir ici. Faisons en sorte qu'il soit 16. Non, spécifions un écart personnalisé. 15 pixels lui suffiront. W dans le D, nous devons afficher l'icône pour continuer avec les icônes. Tout d'abord, nous devons installer l'icône React. Cliquez dans le terminal cont C pour arrêter le serveur en cours d'exécution Je vais installer des icônes de réaction par MPM. Appuyez sur la touche Entrée pour le faire démarrer. Installé, réussi. Encore une fois, il me suffit de démarrer le serveur. Réduisons-le un peu. C'est bon. Je n'ai pas installé l'icône React. La ligne d'imbrication consiste à importer les icônes nécessaires. Encore une fois, revenez au point de résultat du code MD. Il n'est pas nécessaire d'utiliser l'heure occidentale pour taper tous les sommets. Il vous suffit de surligner les icônes de réaction pour la boîte Contactez-moi. Voici les, à partir des lignes 8472 850. Copiez, revenez au code, puis faites défiler l'écran vers le haut. Ici, il suffit de coller. Voici les icônes. Permettez-moi de vous montrer ce type, l'emplacement la FA, l'appel téléphonique FI et le reste. Nous allons donc ici afficher le point de position F. Fermez-le à l'aide de l'étiquette de fermeture en forme de surf, et stylisons-le rapidement La taille, faisons-en 40. P, ça devrait être un support Cole, 40. La glacière doit également rester constante 48, AFE. Qu'est-ce qui ne va pas ? Oups, désolé, cela doit être fait dans le double ou le simple Lorsque vous consultez le navigateur, le voici. Ça a l'air bien. Dépêchez-vous. Continuons. Juste après, ce gars ici, nous allons avoir un autre D, flex, puis le sens de flexion est colonne. Un autre, et dans le deve, nous allons avoir un tag P, et je vais faire la localisation, juste comme ça Nous l'avons comme ça. Sympa. Que devons-nous faire maintenant ? Mettons rapidement le cap sur la plongée. Le texte, ce type, copiez-le, collez-le. Nous allons spécifier la taille fiscale personnalisée de 14 pixels. C'est bon. Jette un coup d'œil. Tu peux voir ? Restez en forme, et j'aime bien. Nous allons avoir un autre d. Dans le D, nous allons avoir un tag p et dans le tag P, je vais faire de la publicité pour les visiteurs. Vous devez indiquer votre adresse. Lorsque vous sauvegardez, pouvez-vous voir, jeter un œil. Les choses se dessinent petit à petit, et j'aime bien ça. Au sein du D. Encore une fois, au premier jour, faisons en sorte que ce soit à moitié chaud. Texte, 20 pixels, piste en blanc, qui est l'espace entre les lignes. Magnifique. Après avoir fait cela. Viens ici, on va avoir un D. J'oublie. Gagnez le D pour surligner cette icône. Appuyez sur l'option K mac, puis appuyez sur la touche par pour la déplacer dans le D. Cela fait. Surlignez le d de clôture et le voici. Ce type ici aux files d'attente. Surlignez le d de fermeture aux lignes pour cinq, coupez-le. Nous devons le coller ici. Ce qui implique simplement que cette plongée ici se termine ici. La ligne 40 se termine sur la ligne 54. Formatons rapidement le code pour obtenir des indentations appropriées. Maintenant, lorsque vous consultez le navigateur, il ressemble à ceci, et c'est exactement le résultat attendu. Juste après ce pdf, laissez-moi vous montrer le développement que nous avons abordé il n' y a pas si longtemps Nous allons avoir un autre df. À l'intérieur, nous allons avoir un tag P. Gagnez le tag P. Je vais juste le faire ? Au fait, ce n'est qu'une adresse de rue Domi Oui. Donnez rapidement un nom de classe au P. Tiret de texte. Juste comme ça, qui pour le rendre gris. Ce n'est pas mal, le met en évidence, le duplique. Vous pouvez modifier le nom de la rue ici et peu importe. C'est bon. Une fois cela fait, ce que nous allons faire maintenant, c'est mettre en évidence. Laisse-moi te montrer. Ça meurt ici, ça s'arrête là comme ça. Jette un coup d'œil. Il se termine ici sur les lignes 63. Nous allons souligner 38-62. CP, viens ici. Passe-le. Économisez bien. Nous l'avons comme ça. La ligne suivante est sc top. Nous devons souligner ce fait. Ce de là à partir de sept se termine ici sur la troisième ligne. Surlignez à partir de 37293, copiez-collez. CF formate rapidement le code. Revenons en arrière. Maintenant, ça ressemble à ça. Extrêmement beau. Découvrez-le sur un appareil mobile. Ça ressemble à ça. Sur iPad, ça ressemble exactement à ça. Pouvez-vous voir, tout est bien aligné sur un appareil iPad. Après avoir fait tout cela. La prochaine étape consiste à changer les icônes et les parties supérieures droites. OK ? Laisse-moi te montrer. C'est la première boîte ici. Et voici la deuxième boîte. Dans la deuxième case, nous allons avoir le numéro de téléphone. Je vais donc passer un appel téléphonique F. Je vais juste faire ici le service 27. Ici, je vais faire des coloriages. Ensuite, il vous suffit de spécifier votre numéro de téléphone ici. Vous pouvez donc faire tout cela de votre côté. Oui. Donc je vais juste avoir un numéro de téléphone aléatoire. C'est bon. J'économise. Maintenant, ça ressemble à ça. Beau et propre. Encore une fois, devons-nous faire quoi ? Dois-je tout faire pour toi ? C'est bon. Laisse-moi supporter la douleur. C'est le troisième. Ici, nous allons afficher le courrier. Je vais donc faire de la messagerie artificielle. Alors, que faisons-nous ici ? Nous allons juste laisser un message. Vous pouvez écrire ici quelque chose qui peut rendre votre site Web beau. Nous allons juste faire une adresse e-mail. Tout cela, tu peux le faire. Alors voilà, je vais juste faire un test sur Gmail. Vous pouvez utiliser votre e-mail et veuillez ne pas utiliser mon e-mail car ce site Web est maintenant pour vous. Enfin, nous allons l' avoir pour le moment. Il s'agit donc des jours de la semaine pendant lesquels votre entreprise ouvre ses portes. Tu connais tous les arrêts. Nous allons donc avoir ici un aperçu du temps passé sur le terrain par l' IA. Bien entendu, nous devons préciser ici les heures de bureau. Je vais faire les heures de bureau. Spécifiez à quel moment vous ouvrez et à quel moment vous fermez. Je vais m'occuper de l'heure d'ouverture. Du lundi au vendredi. Et puis il est 9 h 00, 2 h 00 18 h 00. Donc, aux heures de fermeture, normalement, nous n' ouvrons pas le Le dimanche, tu n' as qu'à aller à l'église ou tu peux te masquer où tu veux. Tu peux aller faire la fête. Et. Si c'est le cas, voici le résultat. Ça ressemble à ça. Je n'aime pas ça. Vous voyez, ce type occupe presque tout le reste de la place. Ce que nous devons faire pour résoudre ce problème. Vous pouvez le résoudre de votre côté, mais pour moi, je dois simplement le réduire car cet e-mail n'est pas valide. Il n'est pas nécessaire d'avoir un long e-mail dans la pile qui obstrue la boîte Une autre façon de le résoudre consiste à spécifier la taille du téléphone. Il n'est pas nécessaire qu'il dépasse une certaine quantité d'espace. OK. Maintenant, ça ressemble à ça et je l'aime bien. Oui, c'est bon. Mmm hmm. C'est cool de ma part. Au fait, jetez un œil aux effets du survol. Ça a l'air magnifique. Oh, mon Dieu. Vérifions-le sur appareil mobile, désolé, sur iPad. Regarde. Les gars, ce design est excellent. Regarde ça. Tu peux voir ? C'est logique. C'est bon. Ça suffit. Passons à la prochaine conférence où nous concevrons le formulaire de contact. À bientôt. 68. Mise en page du formulaire: Il est là. Bon retour en classe. Dans cette conférence, nous allons procéder à la mise en page «   contactez-moi ». Revenez rapidement au code VS. Juste après ce jour, laissez-moi vous montrer quelle est la plongée ici. Nous allons maintenant commencer une nouvelle section. Nous allons avoir un développeur avec le nom de la classe, puis nous allons avoir un display flex. Fermons le d en attendant. Ce n'est pas le cas, nous devons spécifier l'identifiant de ce d. ID égal, visser vers le haut et laissez-moi vous montrer . Ce type ici. Rappelez-vous que je vous ai dit que lorsque vous cliquez sur cette balise A, nous voulions lisser la vis jusqu'à la section contactez-moi. Nous devons donc surligner et copier cet identifiant. Contacter. Puis collez-le ici. Dieu. Le sens de flexion est en colonne. Sur un appareil de très grande taille, nous voulons utiliser un rouleau flexible. Justifiez le contenu au centre, l'écart, 60 photos, le Mging en haut, puis les pixels Mettez les pixels à gauche et à droite. Max avec un scrot vers le haut et laisse-moi te montrer. Nous devons rester cohérents avec la largeur maximale ici. Je pense que nous avons spécifié la largeur maximale ici. Max with, où es-tu ? Voici la largeur maximale. Je dois juste surligner et copier. Viens ici et colle. Mm ou deux, ce qui correspond à une marge. Le rembourrage est de dix. Dans le dF, nous allons avoir un df, donnez-lui le nom de la classe. Sur un appareil plus petit, nous allons le faire chauffer. Appareil de taille moyenne, nous allons l'avoir en mode bloc d'affichage. Puis position relative, W, 50 % sur Excel W, 50 %. H 550 pixels. Nous allons le faire arrondir à Excel. Sur un appareil de taille moyenne, la largeur sera maximale. Sur un appareil de grande taille, la largeur sera également de 50 %. Maintenant, ce que nous devons faire est de spécifier l'image. Ce que je vais faire, c'est maintenant utiliser le style intégré À l'intérieur, nous allons avoir l'image de fond. Spécifiez le coche à barres. Gagnez le bâton du sac. Je vais faire UR Well, en ouvrant de près la pérennité. Ce que je vais faire, c'est couper le fichier JPEG de sept points du client. Lorsque vous enregistrez, voyons si l'image apparaît. Bien. Nous avons maintenant l'image comme celle-ci. Comme vous pouvez le constater, les coins sont tous arrondis. Bien. Retournez. Ce que nous devons faire maintenant, c'est centrer l'image. Nous pouvons utiliser la classe utilitaire «   vent arrière ». PG center, et aussi PG CV. Vous voyez, maintenant ça paraît très bien. Bien. Cela fait, nous devons également créer la superposition d'arrière-plan pour qu'elle devienne transparente Maintenant, le d ne le fermerait-il pas, formaterait-il pas rapidement le code, et dans le nom de la classe ? Nous allons le positionner de manière absolue, de manière à ce qu' il repose sur le boitier. Ce devon est maintenant positionné par rapport. Lorsque nous positionnons ce gars de manière absolue, il repose au-dessus de lui. Je sais que tu le sais. H f avec un gradient Bg vers le haut. Cela créera un arrière-plan dégradé de bas en haut. Ensuite, nous allons l'avoir auprès de. Nous devons maintenant spécifier la couleur pour commencer par 22, trois, 740. Via la même couleur ici. Je dois juste mettre en évidence ce type copier-coller. Shadow se précipite. Passons à 70 pour ce qui est de l'opacité. Lorsque vous voyez sur le navigateur. Cela n'a pas marché. Pourquoi est-ce que ça ne marche pas ? L'opacité est de 70 ans, ce qui en fait un thé Le truc de Shadow Nova, c'est Cad. Oh, mon Dieu. Jette un coup d'œil. Absolu. Non. C'était quoi ça ? C'est ce qu'il faut faire. hauteur est pleine, et maintenant tu vas l'avoir comme ça Magnifique. Très bien, alors jetez un œil. C'est le dernier jour, non ? Nous n'avons rien pendant la plongée. Nous l'avons simplement utilisé comme superposition d' arrière-plan. Nous allons donc faire une autre plongée en dehors de la plongée. OK ? J'espère que vous me suivez. Encore une fois, nous allons avoir sa position absolue. Dans le set zéro. Faisons en sorte qu'il soit flexible. La direction de flexion est la colonne. L'écart, faisons-le 20 pixels. Les éléments s'alignent au centre. Justifiez le contenu au centre. Le texte sera blanc. Shadow sera entièrement en g, et le motif en sera six. W dans le d, nous allons avoir un autre d. Le texte sera pour Excel. Un dispositif de latence supplémentaire, la marge en haut. Faisons en 150 pixels. La marge supérieure sera égale à zéro, arrondie à l'entier. Nous voulons donc qu'il soit sécurisé ici. Vous le verrez dans un GV. P X 15 pixels, PY, 15 pixels. Et le contexte. Restons cohérents avec ce BG. Utilisons ce contexte ici. Si cela n'a pas de sens, nous le remplacerons. OK. Texte à l'intérieur, le texte sera blanc. Affichons donc l'icône pour voir ce que nous avons. Rappelons que nous l'avons importé lors de la conférence précédente. Oui, nous avons copié l'importation depuis la ressource de code, puis nous l'avons collée ici. Je veux que tout le monde suive, c'est pourquoi je prends le temps de tout expliquer. Et j'espère que vous récompenserez mon travail en écrivant un merveilleux commentaire Cela sera très apprécié. C'est bon. J'ai trop parlé. F Un casque. Fermez le tout à l'aide de l'étiquette à fermeture souple. Voyons maintenant ce que nous avons. Boum. le voir apparaître ici ? Ne vous inquiétez pas, lorsque nous commencerons à implémenter les éléments sous-jacents à ce type, cela le poussera vers le haut. Donc, juste après ce développement, nous allons avoir un autre DVD Polices de caractères, semi-gras. Jour du texte, 24 pixels. Et je vais m'en tenir à la vie. Tu peux faire autre chose. Le voici. Discutez avec la vie. En dehors du D, nous allons avoir un autre D. Donnez-vous le nom de la classe. Gagnez, nous allons avoir un tag P. Dans le tag P, il suffit de tout gâcher. Soulignons le texte. Collez-le dedans. Formatez rapidement le code. Lorsque vous économisez, et le voici. Bien. La police n'est pas belle, ne vous inquiétez pas, nous allons certainement y remédier. Ce que je veux attirer votre attention, c'est ce type ici. Parfois, chaque fois que vous formatez votre code avec le format PDF, cela apparaît. Je ne veux donc pas que vous soyez curieux à ce sujet. Stylisons rapidement le tag P. Pas grand-chose, sauf pour préciser le texte et le reste. Centre de texte. Marge dans le top 5. Fonte. Faisons en sorte que le poids de la police soit 200 apa. Texte Excel. Je ne pense pas qu'il soit nécessaire le fichier ait un nom de classe. Maintenant, il apparaît comme ça, et il paraît plus beau, plus haut. Tout fonctionne bien et tout est cool. Ceci fait, implémentons le boton ci-dessous. Juste après la finale. Nous n'avons pas également besoin d'un nom de classe ici. Ici, nous allons faire de la navigation de plaisance, et dans le domaine de la navigation de plaisance, je vais discuter moins Et voilà. C'est bon. Commençons rapidement. L'arrière-plan, donc, nous devrions utiliser le BG, surligner le texte, venir ici et arrêter. Texte. Marge inférieure de 30 pixels Mettre à gauche et à droite, c'est quatre. Mettre le haut et tapoter le bas, c'est deux. En cas de survol, nous devons également rester cohérents avec la couleur réelle du survol Je ne sais pas si nous pouvons le trouver en haut, dans le c. Jetez-y un œil. Le voici. C P, remplacez-le ici. Couleur de transition, et nous voulons que le bouton soit un peu arrondi. Voyons ce que nous avons. Lorsque vous économisez. Oh, magnifique. Jette un coup d'œil. Vois ça. Ça a l'air sympa, et j'aime bien. C'est bon. Cela fait, nous allons avoir un haut droit à droite de cette carte. Après ce d, nous allons avoir un autre D. Passons à un display flex. La direction de flexion est la colonne. Écart. Nous allons aux opérations. Il doit s'agir d'un écart et d'un groupe. 20 photos. Un autre. Dans le cadre du développement, je vais créer des contacteurs. En dehors du D, nous allons avoir une étiquette P. Nous devons également placer la balise p dans le D. Mettez en surbrillance la balise P, puis insérez-la. Tu sais déjà comment faire. W dans le tag P, je vais coller le droit d'ici, demander le retour du noyau, n' hésitez pas à nous joindre et à nous contacter. Nous n'avons pas besoin de taper ça. OK. Maintenant, le voici à droite du coin. Je n'aime pas son apparence, il faut donc lui donner un peu d'étoile. Stylisons-le rapidement. À partir du contact. Le D ici, nous allons avoir un centre de texte, 100 pixels de largeur, soit la largeur du PG. Donc, pour le fond, je vais utiliser le PG Red 500. C'est donc en fait ma spécification parce que je veux qu'elle soit perceptible. Laisse-moi te montrer. Tu peux voir ? Oui. Donc, si vous n'aimez pas la couleur, vous pouvez également la modifier de votre côté. P Y, l'interligne. Nous allons le faire transformer au cas par cas. La police d 300, la police Sans, le texte 14 pixels. Le texte est blanc, puis le texte rond est LG. Enregistrer Vous voyez ça ? Ça a l'air bien comme ça. Cela fait, nous devons également styliser le tag P. Pour le tag P, nous n'avons pas à le faire. Nous allons donc vous donner le nom de la classe. Texte 30 pixels. Le texte, cette couleur ici, surligne le texte. Et pièce. Lorsque vous sauvegardez et dynamisez. Parfait. C' est exactement ce que l'on attend. Très bien, notre mise en page est prête, et la ligne suivante est d' acheter le formulaire de contact ici. Juste après le speed tag. Nous allons avoir le formulaire de contact ici. Et tout semble bon. Bien sûr, ça a l'air bien. C'est magnifique. Je continue d'admirer ce design. Honnêtement, le design est de premier ordre. Jette un coup d'œil. Très bien, ça suffit. Rendez-vous lors de la prochaine conférence. 69. Formulaire de contact: Le design est déjà tellement beau. Finalisons-le donc rapidement dans cette conférence. Dans cette conférence, nous allons essentiellement mettre en place le formulaire de contact. Nous allons avoir le champ du nom, l'e-mail, le numéro de téléphone, le sujet et le champ du message. Allons-y. Juste après ce pdf. Nous allons avoir un formulaire. Donnez un nom de classe au formulaire. Faisons en sorte qu'il affiche le flex, la direction du flex est une colonne. L'écart est de 20 pixels. Si vous observez attentivement, vous vous rendrez compte que nous maintenons exactement le même écart. Nous vous enseignons le concept et les principes d'un site Web professionnel. Vous devez toujours rester cohérent avec votre police, votre taille et tout cela, y compris la vôtre. Nous allons maintenant avoir un div avec le nom de la classe. Utilisons l' interpolation de chaînes de caractères. Faisons en sorte que l'écran soit flexible. La direction de flexion est la colonne sur un appareil plus petit, la direction de flexion est le rouleau. Encore une fois, l'écart, 20 pixels. Gagnez le D, nous allons trouver le nom de la classe. Rappelons que nous avons importé le Google Hind. Oups Nous ne l'avons pas importé. Vraiment ? Faisons-le rapidement. Dans la ressource de code, vous pouvez rapidement copier l'importation. Collez-le comme ça. C'est bon. Faites défiler la page vers le bas Nous l'avons ici. Fermons la boutique. Où, dans le devon, nous allons avoir un champ d'imputes. Il s'agira de textes. Faisons-le comme ça. Tout d'abord, fermons-le avec l'étiquette à fermeture souple. C'est bon. Nom Nom. Mettez en attente votre nom, et il vous sera demandé. C'est une façon de valider le formulaire de manière très rapide. Nous n'avons pas à faire tout le nécessaire. Donnez le nom de classe Px, 12 pixels, le contour Arrondi, MD, P Y. Encore une fois, 12 pixels Flex Dash One, Bg gris 200. Ne le fais pas. Ensuite, la ligne consiste à surligner le champ imp, à le dupliquer. Lorsque vous enregistrez, voyons ce que nous avons dans le navigateur. C'est bon. Maintenant, nous l' avons comme ça. Ton nom, ton nom. Il n'y a pas d'espace entre les deux. Revenons au code. Tout d'abord, nous devons modifier certaines propriétés. Ici, nous allons envoyer un e-mail. Et bien sûr, le type de saisie sera le courrier électronique. Encore une fois, dans l'espace réservé, nous allons traiter votre e-mail. OK, ton nom et ton e-mail. Mais écoutez, nous avons ce problème. Il n'y a pas d'espace entre les champs. Passons rapidement en revue le code. Ici, nous avons une flexion d'affichage, une colonne de direction de flexion. Sur un appareil plus petit, le sens de flexion est la ligne. Et jetez-y un coup d'œil. Le fossé et ici. C'est bon. Bien. Tout est cool. La ligne finale suivante consiste à surligner. Permettez-moi de vous montrer la version de 1932 à 2008. Dupliquez-le une fois. Donc, sur le navigateur, nous l'avons ici. Modifions rapidement les propriétés. Le type d'impute va être testé, mais le nom sera le numéro de téléphone Votre numéro, et ce sera pour le sujet. Changez le nom en sujet. C'est bon. Ça a l'air bien. Ça me plaît. Ce que nous devons faire ensuite, c'est implémenter la zone de texte. Juste après ce d, nous allons avoir un autre df, et en gros, ce que nous devrions faire ici, c'est juste nous amuser. Je vais faire la zone de texte. Fermez-le à l' aide de l'étiquette à fermeture automatique. Nous allons le faire exiger. Le message portant le nom. Veuillez patienter. Nous allons répondre à votre message. Donnez rapidement le nom de la classe, et ce sera exactement la même chose. High light, appelez P, venez ici. Le collage est tout à fait pareil, mais quelque chose a changé , à savoir la hauteur. Faisons en sorte que la zone de texte soit 180 pixels. Bien. La hauteur est jolie et je l'aime bien. Nous devons également spécifier la largeur, nous allons donc utiliser la version complète de Take a look. C'est bon. Tout a du sens. Implémentons rapidement le nautisme. Pour le démarrage, juste après ce df, nous allons avoir un autre df Nous allons faire un bateau. Et je vais nous envoyer un message. Ou tu peux faire quelque chose de mieux à l'intérieur. Si vous avez un meilleur anglais à parler, vous pouvez le voir ici. Ce n'est pas un crime. Il apparaît maintenant ici. Supprimons le style ici pour le D. Au lieu de cela, nous devons le faire sur le boting. L'arrière-plan, nous allons conserver exactement le même arrière-plan que celui que nous avons utilisé. Copiez ici aux lignes 176. Retournez en arrière et collez-le ici. La largeur diminuera. Sur un appareil plus petit, la largeur est automatique. Px 30 pixels. Py, 12 pixels. Au survol, je pense donc que nous devrions copier l'effet HOV à partir d'ici Le voici. Ce sera exactement la même chose. Copiez les lignes 17, 6, venez ici. Puis collez. La transaction va se faire en couleur. La durée 300 f, demi-présage. Nous devons changer la couleur du texte en blanc, puis arrondir les coins du botin Vite, allons-y. Je vais faire un G arrondi, du texte, et c'est tout. Bien. Magnifique. C'est un classique. C'est bon. Quelque chose que je veux également vous montrer, faites défiler l'écran vers le haut. Rappelez-vous que nous avons implémenté le défilement fluide dans cette balise. Donc, quand je clique et que je bouge, tu peux voir ? Parfait Vérifions-le sur appareil mobile. Faites défiler la page vers le bas Jetez-y un coup d'œil. Mes amis, c'est un classique. Extrêmement réactif sur nos plateformes. Je peux vous le dire dans les grandes lignes. Si vous observez attentivement avec vos yeux d'ingénieur, vous vous rendrez compte que l'espace entre le formulaire de contact et le pied de page est fusionné L'espace ici. Mmm, hum. Même sur un appareil de grande taille. Tu vois que ça donne l'impression qu'il est vide ? Revenons donc rapidement au code. Maintenant, faites défiler. Vers le haut. Il s'agit du contenu d'un ID de la section de contact. Ce que je vais faire maintenant, c'est spécifier le bas de la marge et B. Faisons en sorte qu'il y ait moins 150 pixels. Quand tu vois, c'est bien. Passons à 160. J'espère que ce ne sera pas trop près. Je pense que c'est cool. Ça va comme ça. Nous en avons maintenant terminé avec le design. La prochaine étape consiste à convertir en une impute contrôlée afin que nous puissions saisir tout ce que l'utilisateur saisit dans le champ d'impute Je sais que tu comprends de quoi je parle. Faisons-le lors de la prochaine conférence. 70. Saisie maîtrisée (formulaire de communication): Nous avons maintenant un très beau design, mais le formulaire de contact ne fonctionne pas. Il ne sera pas mis à jour lorsque vous tapez quelque chose dans les champs d'impute Pour que le formulaire de contact fonctionne, nous devons le convertir en une impute contrôlée Passez au code Vs, faites défiler le curseur vers le haut. La première chose que nous allons faire ici est d'importer le hook usted Faisons-le également en ligne. Je ne l'ai pas fait. Nous devons également passer du rendu côté serveur au rendu côté client, car nous utilisons maintenant le crochet à état U et nous allons certainement utiliser le clic Donc, ici, nous allons faire le client. Et maintenant, allons-y. Déclarons rapidement la variable d'état nécessaire pour l'imputé. Const State a dit État. Ensuite, nous allons faire des états égaux. L'état initial sera un objet avec des propriétés. Il vous suffit d'ouvrir et de fermer un support métallique dans la fonction d'état. Pour le premier champ, nous avons le nom, e-mail, le numéro, le sujet et le message. Rapidement, nous allons le définir comme nom sur une chaîne vide. C, puis surlignez, dupliquez-le quatre fois. Nous allons maintenant le remplacer par un e-mail, et ce sera le numéro de téléphone. Ces sujets. Enfin, nous avons le message. C'est bon. Magnifique. Avant de poursuivre, faisons rapidement quelque chose. Nous allons avoir une autre variable d'état. Nous allons certainement l'utiliser à l'avenir, alors faisons-le ici. Nous allons l'appeler chargement, définir le chargement deux Nous allons le configurer pour forcer. C'est aussi simple que ça. Laissez-moi vous expliquer la logique. Lorsque l'utilisateur commence à taper dans le champ d'impute, cette action déclenche une date Quand le rendez-vous arrivera, nous devrons passer le test et bien enseigner. Magnifique. Nous allons avoir la fonction, gérer le changement. Const handle change, égal, définissez-le sur une fonction flèche En utilisant le paramètre de cette fonction, nous allons prendre en compte l'événement. Et ici, je vais faire const key equ event point, target Il suffit de le mettre en évidence, de le dupliquer. Ici, nous allons avoir de la valeur. Nous allons organiser des événements pour cibler la valeur des points. En gros, ce que nous essayons de faire, c'est de saisir le test dans le champ d'impute lorsque l'utilisateur tape Ici. Cela fait, nous devons mettre à jour l' état défini dans le paramètre. Nous allons avoir un objet et à l'intérieur, nous allons diffuser l'État, nous allons prendre la clé. Valeur de colonne. C'est aussi simple que ça. Une fois cela fait, les dix lignes suivantes. Il est évident que nous ne voulons accepter aucune lettre dans le champ téléphonique. La seule chose que nous voulons, c'est le chiffre. Validons-le rapidement. Après cette fonction, nous allons avoir une autre fonction. Changement de CD et de téléphone. Esqua. Absolument, nous devons assister à l'événement et me laisser accélérer mon rythme dès maintenant. Nous allons donc avoir une valeur de coût égale à une valeur de point cible Maintenant, nous avons fini d'obtenir la valeur. La ligne neton consiste à utiliser les expressions régulières pour valider le fd Je vais donc faire ici le coût. Valeur numérique, valeur égale, point à remplacer. Dans la fonction de remplacement, nous devons effectuer les opérations ici. Nous allons avoir deux barres obliques et à l'intérieur, nous allons avoir le crochet Ce que nous voulons, c'est 0 à 9 fois plus simple. Tu devrais tout savoir. Ce n'est qu'un élément de base du script Java, définissez les états dans les états définis, répartissez le numéro de téléphone de l'État, attribuez-lui une valeur numérique de propriété est aussi simple que ça. Bien. Enfin, lorsque l'utilisateur clique pour envoyer le téléphone, nous voulons rafraîchir la querelle Par exemple, après avoir saisi le texte de la querelle, et lorsque vous cliquez sur le bouton Soumettre, si tout va bien, nous voulons effacer le fd, je sais que vous comprenez de quoi je parle Faisons-le rapidement. Cost clastic equa. Donc, dans cet objet, nous allons appeler la fonction seta pour mettre à jour l'état de la fonction seta Ce que je vais faire maintenant, c'est de faire défiler la page vers le haut. Nous devons tout mettre en évidence à partir d' ici, des lignes 19 à 23. Copiez car nous voulons le ramener à l'état par défaut. Il s'agit de l'état par défaut, rien entre les deux. Ce sont toutes des chaînes vides. Formatez le code pour obtenir des indentations appropriées. Nous avons maintenant terminé de configurer les fonctions et tout le nécessaire. La prochaine étape consiste à appliquer ces fonctions. Passons donc à la querelle. OK ? C'est le formulaire. Ce que nous devons faire dès maintenant, c'est mettre en œuvre le changement. Faisons-le ici même. Un changement. Tout ce que nous avons à faire, c'est d' appeler le changement de pseudo. La responsabilité du changement est de mettre à jour la querelle lorsque l'utilisateur commence à taper dans l'impute Maintenant, nous devons également définir la valeur pour indiquer le nom du point. Rappelez-vous qu'il s'agit du champ d'imputation du nom. Magnifique. Copions maintenant ces deux lignes de code, surlignons-les et copiez-les, dans le champ d'imputation du message électronique, puis collez-les ici Nous devons changer le nom en e-mail car il s' agit du champ e-mail. Pour le champ téléphone, il faut donc le coller ici. Bien sûr, nous l'avons copié plus tôt. Voici le numéro de téléphone de l'État, et ainsi de suite. Indiquez le point et le sujet. Enfin, c'est pour le message. Faisons-le ici. Message à points fixes. est aussi simple que cela. Vérifiez-le dans le navigateur. Maintenant, voyons voir. Tout fonctionne. Pour être sûrs de ce que nous avons fait, nous devons enregistrer l' état sur console. Faites défiler l'écran vers le haut. Juste après la fonction de changement de poignée, nous allons enregistrer l'état des points de la console. Oublions que le changement d' identifiant de téléphone doit être appelé dans le champ du téléphone et non le changement d'identifiant. Revenons au champ téléphonique. C'est l'e-mail. T. C'est le champ téléphonique. Il n' est pas nécessaire d'appeler le changement de pseudonyme car le changement d'identifiant concerne le reste du champ de saisie et non le champ téléphone. Je vais m' occuper du changement de téléphone. Cela fait, lorsque vous enregistrez dans le navigateur, examinons rapidement la console. Maintenant, lorsque nous commencerons à taper quelque chose dans le champ de saisie, vous ferez certainement l'expérience des mises à jour et des modifications. Ce sera pour le nom. Je vais m'occuper de John. Jetez un œil à la console. Pouvez-vous voir comment il est mis à jour ? Pour le champ e-mail, je vais faire Pouvez-vous voir comment procéder à la mise à jour ? Le Fm Feud fonctionne parfaitement bien. Pour le numéro de téléphone, je dois juste tout imputer, et pour le sujet, je vais écrire un texto sous la forme querelle. C'est de la marche. Jetez-y un coup d'œil. Cela fonctionne en effet. C'est bon. Laisse-moi voir. Tout est cool, tout va bien. Quelle seconde devons-nous mettre en œuvre ? Le champ de la ferme fonctionne et il fonctionne parfaitement bien. C'est annulé pour le moment et j'espère que vous avez apprécié cette conférence. Rendez-vous lors de la prochaine conférence. Restez concentré et prenez soin de vos listes. 71. API amiler de nœud en utilisant Nextjs13: Bonjour. Bon retour en classe. Dans cette section du cours, nous allons procéder à la création de l'API. Vite, qu'est-ce que je dois faire ? Commençons. Ouvrez le code VS et faites tout pour ouvrir l'explorateur. Ouvrez le SRC, qui est le répertoire source Maintenant, dans l'application, nous allons créer un dossier appelé EPI Pour certaines personnes, l'EPI a peut-être déjà été créé lorsque nous avons généré la prochaine plaque chauffante GS à partir de zéro J'ai supprimé le mien simplement parce que je vais repartir de zéro. Si vous avez déjà le répertoire EPI dans le dossier de l' application, tant mieux pour vous Mais si vous ne l'avez pas, il vous suffit de cliquer sur le nouveau dossier de l'application, EPI Dans le répertoire de l'API, nous allons créer un autre répertoire. Cliquez avec le bouton droit sur Nouveau dossier, et je l'appellerai Contact. Dans le contact, cliquez avec le bouton droit sur Nouveau fichier. Encore une fois, au sein du contact. Cliquez avec le bouton droit sur Nouveau fichier. J'appellerai ces points de route GS, les plus simples le font. Avant de créer l'API, nous devons installer les packages nécessaires. Je vais fermer l'explorateur. Commun B pour le fermer. Cliquez dans le terminal. Contractez ensuite C pour arrêter le serveur en cours d'exécution. Je vais installer MPM. Espace du centre commercial Nœud. Nous avons également besoin du point EMV, donc je vais faire .env, Appuyez sur la touche Entrée pour le faire démarrer. Terminé. Installation réussie. Allons y jeter un œil. Ouvrez le package.jf. Le voici. Faisons défiler la page vers le bas. Ici, nous avons l'EMV Et nous avons ici le nœud Mailer. Ferme-le. Fermons le terminal. En haut, nous allons importer la réponse suivante à partir du prochain économiseur de barres obliques. Après cela, nous devons exporter ce fichier Exportez une publication sur une fonction d'écriture. Ce sera une demande de publication, donc dans le cadre de celle-ci, nous allons prendre en compte la demande, et c'est exactement là que le téléphone commence. Importons rapidement l' EM V. Nous allons avoir besoin de la configuration do en V point. Ici, nous allons avoir une constante. Les données ont le même poids. Point de demande JS. Nous allons créer node mail equ. Nous devons également avoir besoin du nœud mailer. Nécessite Node Mel. Si ce n'est pas fait, nous allons avoir un bloc de voyage. Dans le bloc tri, nous devons créer le transporteur. Je vais faire Node Ma point. Il existe une méthode dans le Node Mela appelée transport creect, et voici la cadre de cette méthode, nous allons prendre en compte certaines propriétés. Des propriétés comme le pot, qui est le numéro du pot, seront 465. C Ce truc. Je ne sais pas, continuez à déranger. L'hôte, dans ce cas, sera SMTP gmail.com, Le service sera ce que je devine. Courrier électronique. Tout cela, nous devons l'assigner à une variable. Ici, je vais faire Cs Transporter equ, d'accord. Nous assignons donc tout au ciel ici, le transporteur de code Et dans le nœud mailer, nous acceptons une fonction, créons le transport Dans le cadre de la fonction, nous avons intégré cet objet. Et cet objet ici, nous avons la propriété des ports, et nous lui attribuons la valeur f65 L'hôte est sp et le service est Gmail. Simple et court. Bien sûr, chaque fois que nous avons un bloc de tri, nous devons absolument le rattraper. Nous allons le faire ici coupé. Qu'est-ce qu'on attrape ? Nous allons corriger certaines erreurs, mais pas maintenant. Configurons-le pour l'usage prévu. Ici, nous allons prendre possession de la propriété de. Oups, jetez un œil Il faut le séparer pour mettre le coma. Nous sommes dans le, nous allons avoir l'utilisateur, et ce sera mon Gmail. Merci d'inclure votre e-mail G de votre côté. Ouais Je vais envoyer un e-mail à aztec@gmail.com. Vous pouvez me contacter avec cette adresse Gmail et assurez-vous de la remplacer par la vôtre de votre côté. C, nous avons également la propriété pass, qui est le mot de passe, unique. Pour le pass, nous devons générer le mot de passe de l'application Google. Permettez-moi de vous montrer rapidement. Ouvrez votre compte GML dans le coin supérieur droit de l'écran, si vous voulez voir le profil Cliquez pour ouvrir puis gérer votre compte Google. Dans le coin supérieur gauche de l'écran, vous verrez le menu. R W dans le menu, cliquez sur sécurité. Fais foirer. Assurez-vous que la validation en deux étapes est activée. Comme vous pouvez le voir, j'ai mon alt. Cela signifie que ma vérification en deux étapes est activée. Cliquez pour ouvrir. Ici, c'est l'accent du mot de passe. Je dois inclure mon mot de passe, puis passer à la suivante. Faites défiler la page vers le bas Juste en bas, vous allez voir les mots de passe des applications. Récemment, j'ai déjà généré trois mots de passe. À des fins pédagogiques, je dois recommencer à zéro. Cliquez maintenant sur cette flèche droite. Dans ce champ, vous allez spécifier le nom de l'application. Dans ce cas, je vais créer un portfolio Baba pour les articles pédagogiques. Maintenant, cliquez sur Créer. Voici le mot de passe généré . Surlignez, copie terminée. Attention, ne copiez pas le mot de passe de mon application. Tout simplement parce qu' après cette conférence, je le supprimerais définitivement. Cela ne servira à rien. Génère de votre côté puis revenez au code. Dans le pass, collez-le ici. Assurez-vous de supprimer les espaces entre les deux comme ceci, comme ceci et comme ceci. Magnifique. Cela fait, la ligne suivante consiste à appeler la fonction d'envoi de courrier. Pour cela, je vais utiliser Transporter Dot, Send Mail. Nous appelons donc simplement la méthode send may qui se trouve dans le nœud mailer. Donc, dans cette fonction, nous prenons un objet et dans cet objet, nous allons avoir une propriété qui signifie d'où vient le courrier électronique. Dans ce cas, cela va provenir du champ d'impute. Ouais Je vais donc faire le nom du point de données, le séparer par une virgule Cela va être transféré sur mon compte Gmail. C'est bon. Je l'envoie sur mon compte Gmail. Et s'il vous plaît, de votre côté, vous devez remplacer toutes les occurrences de mon Gmail votre propre Gmail et toutes les occurrences du mot de passe de mon application par votre propre mot de passe Ensuite, nous avons les sujets. Je vais me renseigner auprès du portfolio de Duba. Séparé par une virgule. Je ne sais pas pourquoi cela continue d' obstruer la vue. Le texte ici, utilisons un bit comme celui-ci. Ici, nous allons utiliser une chaîne vide car je ne veux rien dedans. HTML. Utilisons le backtick. Dans le dernier coche, nous allons concevoir le modèle. Le modèle de boîte de réception de courrier électronique. J'ai déjà le design, il suffit donc de copier-coller. Il s'agit simplement d'un CSS HTML que tout le monde peut comprendre facilement. Dans le point de ressource de code MD, nous devons copier à partir de la balise HTM d'ouverture, qui se trouve entre les lignes 8722 et 928 Encore une fois, je peux le vérifier. Copie. Nous devons maintenant le coller dans le bar ti. Ici, nous avons le corps, nous avons spécifié la famille de polices. Nous avons le conteneur emo. La largeur maximale est de 600 pixels, nous avons la marge, le rembourrage, couleur de fond est le blanc, puis l'ombre de la boîte est le bleu uniforme que nous avons utilisé Le rayon de la bordure est de dix pixels, ce qui rendra les coins un peu sinueux Ici, nous avons la balise P, la taille de police, la hauteur de ligne et tout ce que vous connaissez. Nous avons les étiquettes UL et LI. La signature et le reste. Nous avons maintenant une balise UR, et d'ailleurs, il s'agit d'une balise P indiquant un Duba by digital, qui apparaîtra en haut du thème en tant qu'en-tête Ici, avec le tag UR. Nous avons le tag LI, et nous avons aussi le tag fort, qui donnera à cette étiquette apparence plus épaisse et plus visible. Nous avons maintenant le nom du point de données, l'e-mail, le numéro de téléphone, le sujet et le message. Cela apparaîtra conformément à vos champs. Donc, s'il vous plaît, ne vous y trompez pas. Même l'orthographe, vérifiez-le attentivement et assurez-vous qu'il est bien fait Une fois cela fait, faites défiler l'écran vers le haut. Assignons-le maintenant à une constante. Informations sur les coûts et poids. Cela signifie qu'il va rembourser une promesse. Nous devons donc l'attendre. Tout est cool en ce moment. Faites défiler la page vers le bas Ici, nous allons vérifier si le message est réussi ou non. Si le message est réussi, si l'identifiant du message indique des points d'information, nous y retournerons. Ensuite, répondez à point Jason. Maintenant, fais attention. Si la propriété d'erreur est définie sur force, ce qui signifie que si le message est réussi, nous allons avoir un message toast. Le message a été envoyé avec succès. Merci d'avoir contacté un bar de Duba. est aussi simple que ça. Au fur et à mesure, recopions ceci par écrit. Surlignez et recopiez. Viens ici et colle. Si la propriété d'erreur est définie sur true, le message Toast indiquera que quelque chose s'est mal passé. Oups, j'ai vu une erreur dans le e. Les gars, nous devons le supprimer. Dans le bouchon, nous devons également détecter l'erreur. Journal des inconvénients. Nous devons enregistrer l'erreur. Sélectionnez ensuite ce message d'erreur et collez-le ici. est aussi simple que ça. Maintenant, formatez rapidement le code et tout semble propre. Nous avons maintenant terminé de créer l'API. Lors de la prochaine conférence, nous allons le consommer. Rendez-vous lors de la prochaine conférence. 72. Barre de progression: Ou retournez en classe. Dans la conférence précédente, nous avons créé l'API. Dans cette conférence, nous allons passer à l'utilisation de l'API, écrire dans la page de contact. Ouvrez rapidement la page de contact. Écrivez dans les pages, contactez la page pour vous encourager. Commun B pour fermer l'explorateur. Faites défiler l'écran vers le haut. Tout d'abord, nous devons importer un récipient à pain grillé depuis React Tify. Nous devons également importer le pain grillé. C'est pour le message du toast. Enfin, nous allons importer react, Tf slash, dist slash, react Tii Cela fait, consommons rapidement l'API. Maintenant, nous allons avoir une fonction. Effacez le journal de la console. Nous allons avoir la fonction handle submit. Coûts, gérez et soumettez. Q, définissez-le sur la fonction flèche, dans les paramètres de cette fonction, nous allons prendre un événement, puis je vais faire un point d' événement, empêcher de Fd. Rapidement, nous allons régler le sliding sur true. Rappelons que nous avons la variable d'état glissante dans la leçon précédente Nous allons laisser les données égales, définir comme un objet vide et à l'intérieur, nous allons répartir l'état Bien sûr, tu sais ce que tout cela signifie. Le voici. Il contient le nom, le numéro de téléphone, le sujet du message. C'est exactement ici que nous allons accéder à l'API. Maintenant, en prenant le double guillemet, je vais utiliser l'API Slash Laissez-moi vous montrer que nous essayons d'accéder à ce répertoire EPI et au répertoire contact C'est la voie que nous essayons de suivre. Coupez le contact. Nous allons avoir une virgule juste ici , puis ouvrir et fermer le crochet. À l'intérieur, nous allons adopter une méthode de propriété. Bien sûr, la méthode va être les posts, une autre propriété, les en-têtes, et c'est ici que nous allons implémenter le type de contenu Barre oblique de l'application, plan de barres obliques de texte J. Nous essayons de configurer le type de test que nous voulons obtenir. Pour le type de contenu, type de contenu. Ce sera une application, une barre oblique, un péché. Nous essayons d'obtenir le contenu au format Jin. C'est le plus simple. Juste à l' intérieur du corps. Corps. Nous allons faire une chaîne de points JS. Nous voulons convertir les données au format Jin en chaîne. Regardez le corps qui montre une flèche, simplement parce que nous devons le séparer par une virgule ici Nous allons en avoir dix. Ça va être sur un sinc. Donc, la réponse. À l'intérieur, nous allons mettre la charge en vigueur. Coût-réponse égal, poids. Ensuite, je vais faire des pauses. Si la réponse ne renvoie pas d'erreur, nous allons effacer les champs puis passer à un message SX. Sinon, nous devons également utiliser le f puis un message d'erreur. Compris. Mettons-le en pratique dès maintenant Si ce n'est pas une erreur de réponse , nous devons bien sûr effacer l'état en appelant la fonction Cleste Ensuite, nous allons porter un toast. Ce sera un message à points de réponse. S'il y a une erreur, le processus en vaut la peine. Nous devons également effacer l'état, puis nous devons porter un toast au message d'erreur. Quelque chose s'est mal passé. Ici, nous allons détecter correctement l'erreur. Nous sommes le point d'achoppement. Nous allons prendre une erreur. Chargement du set. Nous allons régler le chargement pour qu'il tombe. Nous devons également nettoyer l'État. Copiez exactement ce message de toast, surlignez le texte, venez ici et collez-le. Cela fait, il est maintenant temps de le vérifier. Ici, nous allons fabriquer le pot à pain grillé. Il apparaîtra donc en haut à droite. C'est bon. Cela fait, la prochaine étape consiste à implémenter la soumission. Faites défiler le formulaire vers le bas. Ici, je vais faire la soumission, nous allons appeler le handle submit. est aussi simple que ça. Une chose que je voudrais porter à votre attention, c'est que je vais vous montrer. Vous pouvez voir qu'il s'agit du champ du courrier électronique et du champ du téléphone. Maintenant, dans le sujet fd, nous devons remplacer le type par du texte. Une fois cela fait, tout va bien fonctionner. Dans le terminal, je vais faire PM Run Dev. Démarrez l'application de votre côté. Revenons au navigateur. Faites défiler la page vers le bas Voilà, je vais m'occuper de Peter. Faisons Peter at G. Vendons un nombre aléatoire. Permettez-moi de dire l'API Te stander. Donc, ce que je vais faire, c'est mettre en évidence tout ce qui se trouve dans cet endroit en copier-coller. Appuyez sur le bouton d'envoi. Jetez-y un coup d'œil. Dans le coin supérieur droit de l'écran, il est indiqué que le message a été envoyé avec succès. Merci d'avoir contacté un bar de Duba. J'en suis tellement contente. Revenons au Gmail. Et voilà. Cliquez pour ouvrir. Tu peux voir ? Parfait. Les gars. Le nom est Peter. Peter sur gm.com, qui est l'e-mail, le numéro de téléphone, le sujet, et voici le message Rappelez-vous la balise P dans l'API. Le voici. Laisse-moi te montrer. Retournez à l'itinéraire, puis voici le tag P. Ici, nous essayons d'afficher les données. C'est aussi simple que ça. Nous avons le nom, le nom. Il s'agit de l'étiquette nominative. Et nous l'avons Peter, qui est ce type, que nous avons rendu entre les balises LI. Nous avons l'e-mail, qui est cette étiquette d'e-mail, puis nous avons le courrier électronique à points de données, que nous avons affiché dans le code HTML interne de la balise LI, et voici le courrier électronique. Et ainsi de suite. Mes amis, tout fonctionne bien comme prévu. 73. Implémentation et logique en button appel à l'action: Très bien, nous en avons terminé avec le design et tout fonctionne parfaitement comme prévu. Super beau, super fantastique. J'adore chaque détail du design. En gros, ce que nous allons faire dans cette conférence est de mettre en œuvre le cœur de l'action board. L'idée est simple. Lorsque l'utilisateur fait défiler l'application vers le bas, le décalage y de la page sera supérieur à zéro. Ensuite, si le décalage de page est supérieur à zéro, nous devons afficher le bouton « passer de la voiture à l' action » à droite de l'écran. Ainsi, lorsque l'utilisateur clique sur le bouton C pour agir, l'application fait défiler en douceur jusqu'au composant d'accueil. Le plus simple est de passer au code VS à moins d'être implémenté rapidement. Code VS. Ouvrez rapidement le composant. Voici le répertoire car-to-action. Nous l'avons créé lors des premières conférences. Si vous n'avez pas ce répertoire, il vous suffit de cliquer avec le bouton droit sur les composants, le nouveau dossier, puis de le nommer action, comme ceci. Magnifique. Dans la voiture, passez à l'action, cliquez avec le bouton droit de la souris pour créer un nouveau fichier. Appel à l'action S. Générez rapidement le composant fonctionnel. Nous allons importer l'effet d'utilisation du crochet U State. Cela fait, revenons rapidement au composant d' en-tête, puis copions la fonction de défilement des poignées. En-tête gs. Nous devons également copier la variable d'état, pour l'événement de défilement. Nous devons mettre en évidence les lignes 11 à 24. Copiez, revenez au C pour passer à l'action, puis collez-le ici. Ici, nous vérifions si la page à points Y de la fenêtre définie est supérieure à zéro. Si la page Windows Dot I de Set est supérieure à zéro, alors nous allons mettre ce type à jour pour vrai, et si ce type est vrai, nous devons faire quelque chose. Maintenant, si s crow est défini sur true, nous allons renvoyer une interface utilisateur W entre parenthèses, nous allons avoir un D, vous donner le nom de la classe La couleur de fond sera le rouge 500. Ce n'est que mon cahier des charges. Tu peux faire autre chose de ton côté. Nous voulons que cela soit réparé. En bas, il y en aura huit. En partant de la droite, nous en voulons huit également. Fermons rapidement l' explorateur. Les arguments, mettons-le au clair. L'index z pour qu'il apparaisse en haut de la table des matières. Faisons en sorte qu'il soit adapté. Fermez le D. Ce que nous devons faire maintenant, c'est copier et coller le SVG dans le D. Retournez au point de ressource du code MD. Faites défiler l'écran vers le bas. Je pense que nous l'avons ici. Le voici. Copiez le SVG. Surlignez le texte. Gagnez le D paste. S. Nous n'aurons rien. Formatez rapidement selon le code. Lorsque vous enregistrez, voyons ce que nous avons dans le navigateur. C'est bon. Nous devons le rendre avec la page, qui est la page de paiement, et le voici. Faites défiler la page vers le bas Je pense que nous devrions le faire juste après le témoignage. Ici, je vais lancer un appel à l'action. Assurez-vous de l'importer en haut, et le voici. Enregistrez dans le navigateur. Maintenant, quand je fais défiler l' application, la voici. Vous pouvez voir dans le coin supérieur droit de l'écran que vous verrez le portage de l'appel à l'action. Mais lorsque vous cliquez dessus, rien ne se passe. Implémentons rapidement le clic. Appel à l'action. Vissez vers le haut, juste à l'endroit où D Nous allons cliquer, et lorsqu'un utilisateur clique sur ce botin, nous voulons faire défiler la page d'accueil en douceur jusqu' au composant d'accueil Je vais donc faire Window Dot, Scroll 200. Tu sais que je vais te montrer ici. Lorsque ce chiffre est supérieur à zéro, l'état initial est mis à jour à vrai. Lorsque l'état initial est vrai, ce point de repère apparaît à droite de l' écran avec le démarrage. Maintenant, l'idée est la suivante. Laisse-moi te montrer. Quand je fais défiler l'application, ce type apparaît ici. Maintenant, sur l'axe Y, l'application est supérieure à zéro. Mais lorsque nous cliquons sur ce botin, nous voulons égaliser l' application sur l'axe Y à zéro Nous voulons le ramener à zéro. C'est exactement ce que nous faisons ici. Au départ, nous l'avons fait lorsque ce type est supérieur à zéro, il devient vrai, puis cela apparaît. Maintenant, lorsque cela apparaît, cela signifie qu'il est supérieur à zéro. Lorsque nous cliquons sur ce PDF, nous voulons également le renvoyer à sa position normale. Je pense que c'est dans cette mesure que je peux expliquer cela. Donc oui, lorsque vous enregistrez l'application, consultez le navigateur maintenant, cliquez sur le botin et cliquez sur le botin. Tu peux voir ? Ainsi, où que vous soyez sur l'application, lorsque vous cliquez sur ce bouton, vous remettez toujours l' application à zéro sur l'axe y. Ce qui signifie que vous rentrerez toujours chez vous. Je pense que cette explication est assez claire, honnêtement. Laissez-moi implémenter l' animation pour vous. Retournez ici à bord du Steve. Je vais faire de l'animation. Nous allons faire Bound. C'est aussi simple que ça. Maintenant, jetez un œil. Le bouton d' appel à l'action rebondit joyeusement à l'extrémité droite de l'écran lorsque vous faites défiler l'application Ça me plaît. Une autre chose que je veux faire est de rendre l'icône un peu autocollante. Nous pouvons donc le faire ici. Au lieu de 1,5, nous pouvons en faire cinq. Maintenant, cela apparaît largement et ça a l'air bien. C' est donc exactement l'intention. 74. 49 Barre de chargement: Il a donc implémenté le formulaire. Nous avons également testé l'API. Tout fonctionne parfaitement comme prévu. Dans cette courte conférence, nous allons rendre le formulaire plus interactif afin que, lorsque l'utilisateur clique sur le senboart in, la barre de chargement apparaisse et donne un aperçu de ce qui se passe dans une scène L'utilisateur doit attendre de voir le résultat. Ça a l'air bien, non ? J'avais recours au code Vs à moins qu'il ne soit implémenté rapidement. Faites défiler la page jusqu'à l' endroit où se trouve le formulaire. Et voilà. Nous devons également faire défiler la page vers le bas. Implémentons-le ici même au-dessus de ce botin. Nous allons implémenter la barre de progression fonction de la condition, et la condition est unilatérale. Après avoir rempli le formulaire, lorsque l'utilisateur clique sur le boulonnage d'envoi, la barre de chargement apparaît Cela se fera sur la base de trucs, et c'est assez simple à mettre en œuvre. Maintenant, nous allons le faire. En cours de chargement , et n, nous allons afficher la barre de chargement. Nous n'allons pas avoir de L. Nous allons donc avoir un d, lui donner un nom de classe. Nous sommes dans le d, la marge inférieure est de trois. Le texte, alignons-le au centre. ML, je ne parle pas de ML en termes de Mercedes, mais de marge restante. W66 h. Donnons-lui la bordure. Et la bordure de couleur, bleu 500. Faisons-en 600. La frontière va être solide. Ensuite, nous allons faire Animate, Dash, Espagne. Fermez le développeur. OK, vérifiez-le sur le navigateur. Chargez, remplissez rapidement le formulaire. Maintenant, cliquons sur le sable. Oups. Jetez-y un coup d'œil. Vous voyez, et le message est réussi. Je n'aime pas la forme de la barre de chargement. Ce que nous devons faire pour le moment est arrondi. Allons-y. Encore une fois, remplissez le fd. Voici envoyé, et jetez-y un œil. Vous voyez, et voici le message de publication. Tout fonctionne parfaitement comme prévu. Rentrons chez nous. Jetez-y un coup d'œil. Tommy. Ça n'a pas l'air bien ? Bien sûr, c'est le cas. C'est bon. Une dernière chose que nous devons mettre en œuvre est l'appel à l'action. Permettez-moi de vous montrer que lorsque je fais défiler l' application comme ça, le bouton d'appel à l'action apparaît sur le bord droit de l'écran Et lorsque je clique sur le bouton d' appel à l'action, le défilement se fait en douceur jusqu' au composant d'accueil Qui que vous soyez, par exemple, si vous êtes ici, cela apparaîtra sur le bord droit de l'écran. Lorsque vous cliquez, vous faites défiler l'écran en douceur jusqu'au composant d'accueil. OK, arrondissons le tout en implémentant le cœur de l'action board. 75. Corrections d'en-tête (signature): Bonjour. Bon retour en classe. Dans cette courte conférence, nous allons corriger le comportement de l'en-tête sur un appareil mobile, ainsi que lorsque vous ouvrez une autre page. Permettez-moi de vous montrer rapidement. Sur les appareils mobiles, lorsque nous faisons défiler la page vers le haut comme ceci, l'en-tête apparaît toujours en haut. ne nous plaît pas parce que nous avons déjà la navigation ici, il n'est donc pas nécessaire d' afficher cet espace ici. Le menu est déjà là, vous n'avez donc pas besoin de tout cet espace. Nous devons l'enlever. C'est le comportement numéro un à corriger. Lorsque vous déployez l'application, par exemple, passons à la section Higher ME. Cliquez pour ouvrir. Maintenant, lorsque vous cliquez sur le menu, la hauteur du diagno dra n'est plus complète Et aussi, vous vous rendrez compte que le menu a en fait un peu baissé. Ce n'est pas ce que nous voulons. D'accord ? La première chose que nous allons faire ici est de corriger le comportement sur l' appareil mobile. Laisse-moi te montrer. Tu peux voir ? Jetez-y un coup d'œil. Ça n'a pas l'air sympa du tout. Vous revenez donc au code VS, ouvrez le composant. Point d'en-tête d'en-tête s. Faites défiler l'écran vers le bas et laissez-moi vous montrer. Ici, nous avons une condition e. Nous avons dit que le défilement est défini sur true, c' est-à-dire lorsque l'application sur l' axe y est supérieure Lorsque vous faites défiler l'application, nous allons lui attribuer un nom de classe en tête, sinon aucun nom de classe ne sera attribué. Ici, et nous le stylisons également d'une manière différente Nous avons dit que si le scrode est défini sur true, la couleur de fond sera blanche, sinon elle sera transparente ici De plus, si c'est vrai, nous lui donnons cette ombre en forme de boîte. Je ne pense pas que cela soit nécessaire ici. Posez-y un commentaire. Enregistrez le projet. Vérifiez-le dans le navigateur. Tu peux voir ? Tout fonctionne correctement sur un appareil mobile. Et maintenant, cela soulève un autre problème. Lorsque vous optimisez l' application sur un grand appareil, faites défiler l'écran vers le haut, voyez-vous ? Maintenant, nous n'avons plus ce terrain d'emballage transparent. Et ce n'est pas bien parce que cela donne à ces menus apparence un peu étrange. Tu peux voir ? Cela n'a pas de sens, nous devons donc lui donner un coup de pouce lorsque vous faites défiler l'application sur un gros appareil ? Revenez rapidement au code VS. Si cette condition est remplie, si le scroll est défini sur true, nous allons styliser la tête Ici, revenez donc rapidement au CSS global. Le voici. Cliquez pour ouvrir. Faites défiler la page vers le bas Nous devons maintenant cibler un point de rupture en particulier. Ouvre et ferme les parenthèses, moyenne du tiret w sur un point de rupture de 12 à 80 pixels. Nous allons styliser le header show, head show. Attention, l'émission est consacrée aux glucides, et d'ailleurs, nous devons utiliser le point ici Ici, la couleur de fond sera le blanc. L'ombre de la boîte. Copions à partir de l'en-tête. Il y aura exactement la même ombre de boîte ici. Alors collez-le lorsque vous enregistrez le projet dans le navigateur. Il y en a. Tu vois que ça marche ? Ça me plaît. C'est magnifique. Jetez-y un coup d'œil. Maintenant, sur un appareil mobile, vous allez avoir un très beau comportement. Tu peux voir ? Jetez-y un coup d'œil. C'est bon. Je dois réduire ce type à 75 ans. Une belle. OK, très bien. La prochaine étape consiste à corriger ce comportement ici. Le dessin du diagno se trouve sur une autre page. Tu peux voir ? Ces choses ne sont pas belles, alors revenons rapidement au point Diagno Draw Fermez le CSS global, fermez l'en-tête, puis nous devons ouvrir le dessin en diagonale. C'est en fait très simple. Laisse-moi te montrer ici. Je ne sais pas où se trouve cette maladie. oh, mon garçon. W dans l'en-tête. Nous avons une condition ici. Nous avons dit que si le nom du chemin est un quo, c'est ici, ce qui signifie que lorsque l'utilisateur clique sur ce nom de chemin, nous l'avons attribué du haut à zéro. Oui, nous l'avons attribué à partir du haut à -98 pixels, et c'est pourquoi vous voyez ce comportement. Jetez-y un coup d'œil. Cet espace vide en bas est de -98 pixels. C'est la raison pour laquelle le menu ne couvre pas l'écran. Lorsque nous supprimons cette valeur, cette valeur négative, il suffit de la mettre à zéro. Lorsque vous enregistrez le projet, il couvre maintenant l'écran, mais nous avons un autre espace en haut. Ne vous inquiétez pas, nous devons absolument le réparer maintenant. Maintenant, revenez au code VS. Ouvrez le dessin en diagonale Cs. Dans le cadre du tirage en diagonale, nous allons faire le top. Mettons-le à zéro, comme ça. Lorsque vous enregistrez le projet. Maintenant, pour le dessin en diagonale, tout fonctionne parfaitement comme prévu. Mais pour le menu, c'est exactement le même problème que celui que nous venons de résoudre en ce moment. Retournez au code VS, l' intérieur du point S en diagonale . Nous devons rechercher l'endroit où se trouve la maladie. Je pense qu'il devrait être au sommet ici. Ouais C'est au sommet. Pouvez-vous voir quand le nom du chemin est le même, ce gars-là. Maintenant, en haut, nous l'avons mis à zéro, sinon, nous l' avons mis à 100 pixels. Ce serait super génial de le mettre à zéro. Ainsi, lorsque l'utilisateur clique sur le menu, il apparaît du haut à zéro. Sinon, il apparaîtra également à partir de zéro. Tu peux voir ? C'est de la marche. Parfait Alors, rentrons chez nous. Nous devons le tester. D'accord. Cliquons sur cet homme. Regarde, ça marche. Alors ça marche, Pavel the Fine. Sur un appareil mobile, il fonctionne également sur iPad Mini. Cela fonctionne. C'est super propre, super incroyable. C'est bon, on en a fini avec la tête. Et maintenant, nous avons le comportement attendu. Bien. Dans la prochaine conférence, nous allons corriger la carte sur un appareil mobile. Permettez-moi de vous montrer sur un appareil mobile. Tu peux voir ? Le texte au bas de la carte a disparu. C'est donc exactement ce que nous allons corriger lors de la prochaine conférence. Il s'agit en fait d'une solution très rapide. On se voit alors. 76. Correction du curseur sur un appareil mobile: Bon retour en classe. Dans cette conférence, nous allons corriger le comportement de la carte sur les appareils mobiles. Après cela, nous procéderons à la correction des téléphones. En tant qu'appareil mobile, vous ne verrez plus le tag P. Tu vois ? Nous ne voulons donc pas que ça se passe comme ça. Retournez au code VS, ouvrez les composants, dans les composants, ouvrez la carte coulissante, puis faites défiler la carte coulissante jusqu' à S. Faites défiler la page vers le haut R ici, où nous avons ce D. Faisons en sorte que la hauteur soit de 280 pixels Lorsque vous enregistrez, dans le navigateur, ils sont les. Tout fonctionne parfaitement bien. Nous avons maintenant corrigé le comportement sur les appareils mobiles. OK. Revenons rapidement à l'endroit où se trouve le tag P, qui est le titre ici. Ce que nous devons faire Permettez-moi vous montrer ici que nous sommes censés faire de la police de caractères, mais sur le plan pypographique, nous avons fait une erreur et nous l'avons fait en façade. C'est donc une police de caractères. Lorsque vous enregistrez le navigateur, il apparaît maintenant comme ceci. Tu vois que ce n'est pas trop robot ? C'est la norme. Ça me plaît. Encore une fois, retirez-le de votre appareil mobile. Tout est bien aligné. Jetez-y un coup d'œil. C'est bon. Donc, pour les témoignages sur appareil mobile, je ne veux pas qu'ils apparaissent Au fait, c'est mon avis, vous pouvez donc le faire de votre côté comme vous le souhaitez Donc, pour moi, je vais simplement retirer le témoignage sur un appareil mobile La façon dont nous pouvons le faire est en fait très simple. OK, témoignage. Dans ce df, je vais faire du chauffage, mais sur un appareil de taille moyenne. Nous allons avoir un bloc d'affichage. Lorsque vous économisez, jetez-y un coup d'œil. Maintenant, nous l'avons sur un appareil plus grand. Mais plus par appareil, il va disparaître. Tout est cool ici. C'est bon. Ça a l'air sympa. Vérifions-le sur iPad. Nous l'avons sur iPad. Sur iPad A. La moitié du truc apparaît bien. Oups. Je pense que nous devrions bien. C'est bon. Jetez-y un coup d'œil. Il est conçu de manière professionnelle et experte pour fonctionner sur tous les appareils. Incroyable. C'est éteint maintenant. Assurez-vous de lire et de revoir les scores. Au revoir, et soins holistiques.