Ultimate Next. js 14 Portfolio-Website 2024 ( Zero to hero )

1. Echtes Advert-Video: Schauen Sie sich diese wunderschöne Website an. Es wurde alles mit next s gespeichert. Es wurde sorgfältig und professionell in anderen Geräten entwickelt Wäre es nicht großartig, wenn Sie genau wüssten , wie man diese Website von Grund auf neu gestaltet und codiert Genau hier komme ich ins Spiel. Hallo, willkommen und vielen Dank für Ihr Interesse an meinem Kurs. In diesem Kurs werde ich Ihnen beibringen, wie Sie GS-Portfolio-Website erstellen mithilfe verschiedener Technologien wie next es react Jes, Tear Wind und Node Mailer die ultimative Next Tear Wind und Node Mailer Also, wenn Sie ein Neuling sind, machen Sie sich keine Sorgen. Wir werden bei Null anfangen und jedes Konzept untersuchen , das im Kern des nächsten GS-Rahmens enthalten ist im Kern des nächsten GS-Rahmens Wir werden uns also mit Themen wie dem Router befassen, zu dem die nächste Route, die dynamische Route und die nächste dynamische Route gehören , und alle Segmente erfassen Und auch Themen wie Datenabruf, private Route, Datei-Colocation, Laden, Layout und so weiter und so weiter Wir haben uns noch nicht mit allen Konzepten ausgestattet. Wir können dann mit der Erstellung der ultimativen Next S-Portfolio-Website fortfahren . In diesem Kurs werde ich Ihnen beibringen, wie Sie die Website strukturieren, wie Sie gängige Designkomponenten und Layoutmuster verwenden . Abschließend werden wir uns bei der Gestaltung unserer Website an die besten Praktiken der Branche halten . werden wir unsere Website so gestalten , dass sie auf Mobilgeräten ansprechend ist, und sie dann für eine bessere Leistung optimieren. Schließlich werden wir die Website auf einem Life-Server bereitstellen , was einfach bedeutet. Ihre Portfolio-Website wird im Internet zugänglich sein. So können Sie damit Ihre Jobs Ihren Kunden oder Arbeitgebern präsentieren . Wenn Sie also nach einem umfassenden, leicht verständlichen, gut organisierten und praktischen Kurs suchen leicht verständlichen, gut organisierten und , der Sie von Null bis hierher führt. Dies ist der beste nächste E-Kurs für Sie. Klingt gut, richtig. Schließ dich mir an und lass uns anfangen. 2. Nextjs intro 001: Next S ist ein React-Framework für die Produktion. Und jetzt ist die Frage, was genau der Unterschied zwischen Next S und React Gs ist ? React S ist einfach eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Und ich möchte, dass Sie sich eine Bibliothek als ein Paket vorstellen , das zur Lösung eines bestimmten Problems erstellt wurde. Als Bibliothek konzentriert sich React auf die Erstellung interaktiver Benutzeroberflächen. Genau das ist das einzige, was React es als Bibliothek tut. Sie können also React Gs nicht verwenden, um Routing und Httpic durchzuführen. Wohingegen ein Framework eine Komplettlösung ist. Next Gas als Framework kann also verwendet werden, um Effekte zu erzielen und auch um Routing durchzuführen, was einfach bedeutet, dass Sie Next Gas verwenden können, um eine vollständige Starck-Anwendung zu erstellen . Gut unterrichten Wunderschön. Habe den Unterschied zwischen Next As und React es nicht verstanden. In der nächsten Vorlesung werden wir damit fortfahren, eine neue Next S-Anwendung zu erstellen. 3. 02 Knoten-Installationen: In diesem Abschnitt des Kurses werden wir einige notwendige Installationen vornehmen, um loszulegen Es ist in der Tat eine Voraussetzung , dass Knoten S auf Ihrem Computer läuft, bevor Sie das nächste Gas installieren. Ich ermutige jedoch jeden von Ihnen , die neueste stabile Version herunterzuladen und zu installieren. Dieser hier am linken Bildschirmrand. Bitte installieren Sie diesen Typ also nicht auf der rechten Seite des Bildschirms, einfach weil er mit zusätzlichen Komplexitäten verbunden ist, über die Sie möglicherweise nicht nachdenken können Lassen Sie uns schnell die neueste stabile Version herunterladen und installieren Hier ist es. Es wird heruntergeladen. Herunterladen, erfolgreich. Öffnen wir es im Download-Ordner. Klicken Sie hier, um zu installieren. Ordnung. Also bevor wir weitermachen, müssen wir auch dieses Verzeichnis hier verlassen. Und jetzt bleibt uns kein Jubel übrig . Lass uns weitermachen. Also kannst du alles durchgehen , wenn du Zeit hast. Aber für mich muss ich einfach weitermachen. Stimme zu. Es ist auf der Schaltfläche „Installieren“. Wenn Sie Mc sind, wird es auf jeden Fall nach Ihrem Passwort fragen. Wenn Sie jedoch unter Windows arbeiten, handelt es sich um eine Expressinstallation, sodass Sie kein Passwort benötigen. Im Moment werde ich mein Passwort eingeben. Software installieren. Die Installation ist noch nicht abgeschlossen. Installiert, erfolgreich. Schließen wir es. Möchten Sie das Nicken nach der Installation behalten oder möchten Sie es in den Papierkorb verschieben Lass es uns in den Papierkorb verschieben. Im Moment werden wir das Set B aufrufen, indem wir die Befehlstaste und die Leertaste drücken. Sie müssen nur s für Terminal verwenden. Wir werden die Version überprüfen, die wir installiert haben. Ich mache Node Space, V. Lass mich sehen, ob ich es ein bisschen zoomen kann. In Ordnung. Ich kann es mit der Enter-Taste vergrößern und jetzt haben wir diese Version von Node installiert. Wunderschön. Jetzt sind wir mit der Installation fertig. In der nächsten Vorlesung werden wir mit der Installation von VS-Code fortfahren. Das ist jetzt aus. Wir sehen uns in der nächsten Vorlesung. 4. 3 vsc-Installationen: Hallo zusammen. Willkommen zurück im Unterricht. In der vorherigen Vorlesung haben wir den Knoten GS installiert. In dieser Vorlesung werden wir nun mit der Installation des Code-Editors fortfahren. Fühlen Sie sich frei, einen beliebigen Code-Editor Ihrer Wahl zu verwenden. Aber für mich ist der VS-Code immer mein Favorit. Ich ermutige Sie, den VS-Code herunterzuladen. Ganz einfach, weil ich Ihnen im Laufe der Zeit einige Tipps und Tricks geben werde, die den Entwicklungsprozess beschleunigen werden. Und natürlich möchte ich, dass jeder von Ihnen mitmacht. Klingt gut, richtig. Wunderschön. Gehen Sie schnell zum Code vistudio.com, und diese Komponente wird direkt vor Ihnen geöffnet Lassen Sie uns jetzt nach unten krähen. Am linken Ende des Bildschirms haben wir den VS-Code für Windows und genau in der Mitte haben wir ihn für Obuntu und Schließlich haben wir ihn am rechten Ende des Bildschirms für Marc Genau hier bin ich auf dem Mac, also werde ich es auf jeden Fall für Mac herunterladen. Aber wenn Sie unter Windows arbeiten, müssen Sie dieses auch gleich hier herunterladen. Dieser. Du musst diesen herunterladen. Aber jetzt möchte ich diesen hier für Marc herunterladen. Wenn Sie also den Mac gleichzeitig verwenden, können Sie den Himmel schnell herunterladen. Zum Herunterladen hier klicken. Lassen Sie uns den Download-Vorgang überprüfen. Können Sie sehen, dass Visual Studio Code bereits heruntergeladen wird? Der Download wird definitiv eine Weile dauern. Also muss ich die Vorlesung einfach vorspulen. Herunterladen, erfolgreich. Öffnen wir es mit in the fo Lass uns schnell auf Zip gehen. Bumm. Hier ist es. Obwohl ich es schon auf meinem Computer habe, und deshalb können Sie das Duplikat hier sehen. Dies ist die, die ich zuvor verwendet habe, und dies ist die neue , die ich gerade heruntergeladen habe. Sie können zum Öffnen klicken. Und hier ist es. H. Das ist jetzt aus, und in der nächsten Vorlesung werden wir damit fortfahren, einige der benötigten Erweiterungen zu installieren . Diese Erweiterungen sind extrem wichtig , weil wir sie in Zukunft nutzen werden. Überspringen Sie also bitte nicht die nächste Vorlesung. 5. 4 vsc-Erweiterungen: In diesem Vortrag werden wir also die Erweiterungen installieren, die verwendet werden , um die Dinge in Zukunft einfacher zu machen. Also müssen wir zuerst die Seite mit den Versionshinweisen verlassen. Ordnung. In der linken Mitte des Bildschirms sehen Sie die Erweiterung. Hier ist es. Und wenn ich mit der Maus darüber fahre, siehst du die Erweiterungen richtig Zum Öffnen hier klicken. In der Speicherbox werden wir nach E suchen und dann nach Snipe reagieren Also mache ich E 7 plus React Slash Red Dox Slash React Native Und hier ist es. Zum Öffnen anklicken. Ich habe es bereits in meinem VS-Code installiert, und aus diesem Grund können Sie das Deinstallationsmenü sehen. Auf Ihrer Seite wird das Install-Butting aktiviert. Sie müssen also nur auf das installierte Butting klicken Und dann wirst du dieses leistungsstarke Snippet installiert haben. Dieses Snippet ist extrem leistungsfähig, da wir es verwenden werden, um einen funktionellen React-Komponentencode zu generieren ohne ihn von Grund auf neu eingeben zu müssen Gehen wir jetzt zurück zu der besagten Box. Jetzt müssen wir das Java-Skript installieren und jeden Abend Script eingeben. Jede Nacht Javascript und Typoskript. Lass uns ein bisschen rauszoomen. Ich hoffe, du kannst es klar sehen. Kannst du das auf der Installation sehen? Die Installation ist noch nicht abgeschlossen. Die Installation war erfolgreich. Also müssen wir es schließen. Eine weitere leistungsstarke Erweiterung ist Tail Wind Intellisense. Diese Intelligenz hilft Ihnen also dabei, das CSS-Äquivalent zur Tailwind-Utility-Klasse anzuzeigen CSS-Äquivalent zur , wenn Sie mit der Maus Keine Sorge, all das mag knifflig klingen, aber in Zukunft werden Sie bestimmt das Wesentliche verstehen Also lass uns installieren. T Wind Intellisense. Und hier Es scheint also, dass ich es schon installiert habe. Auch hier, wenn Sie es nicht installiert haben, werden Sie den Installations-Botin sehen Alles, was Sie tun müssen, ist, den Installationsknopf zu zerschlagen, und dann ist alles in Ordnung mit Ihnen Nochmals, wenn Sie zum ersten Mal mit T Wind Css arbeiten, möchte ich Sie aufmuntern, denn ich werde jede einzelne T-Wind-Nutzfahrzeugklasse sorgfältig erklären jede einzelne T-Wind-Nutzfahrzeugklasse Klingt gut, richtig. Wunderschön. 6. 5 Nextjs-Installation: Willkommen zurück im Unterricht. In dieser Vorlesung werden wir mit der Erstellung unserer ersten nächsten AS-Applikation fortfahren . Gehe zurück zum Desktop. Klicken Sie direkt drinnen mit der rechten Maustaste auf einen neuen Ordner. Ich nenne diesen Ordner. Als Nächstes übe ich. Beachten Sie, dass Sie bei der Benennung Ihres Projekts immer einen aussagekräftigen Namen verwenden, der die Absicht des Projekts beschreibt der die Absicht des Projekts , damit Sie sich in Zukunft leicht damit identifizieren können Ich habe den Ordner nicht erstellt. Öffnen Sie schnell Ihren VS-Code. Die nächste Endzeile besteht darin, den Ordner per Drag & Drop in den Vas-Code zu ziehen. Lass uns schnell maximieren. Okay, wir müssen ihm hier eine gewisse Erlaubnis geben und dann lassen wir die Arbeit an der Seite beenden. Contra Bactic, um das in den VS-Code integrierte Terminal zu öffnen . Und hier ist es Übrigens befindet sich das Ba-Häkchen in der oberen linken Ecke der Tastatur direkt unter der Escape-Taste. Und wenn Sie es mit der Verknüpfung nicht tun können, müssen Sie nur zum Hauptmenü und dann zum Terminal, zum neuen Terminal gehen . Und dann wird dieses Fenster unten geöffnet. Um nun eine neue nächste Jz-Anwendung zu erstellen, folgen wir dem Befehl Und hier ist es. P X, erstelle die nächste App, und dann wirst du es spätestens tun. Um den Befehl zu kopieren, müssen Sie auf dieses Kopiersymbol klicken. Kehren Sie zum VS-Code zurück und geben Sie dann den Befehl V zum Einfügen ein. Was ich jetzt tun werde, ist Leerzeichen zu setzen und es dann zu tun. Das wird helfen, das nächste Js direkt im nächsten JS-Praxisordner zu installieren . Drücken Sie die Eingabetaste , um es zu starten. Drücken Sie erneut die Eingabetaste, um fortzufahren. Möchten Sie Typoskript verwenden? Natürlich ja. Möchtest du Yes Lint verwenden? Natürlich ja. Sie können mit der linken oder rechten Pfeiltaste zwischen Ja und Nein wechseln . Möchtest du Zwillinge benutzen? Ja. Möchten Sie SRC verwenden Ja, A. Ja. Fast alles wird ja sein. Möchten Sie den Import verwenden? Wir wollen , dass alles vollständig ist. Ich werde mich für die Option Ja entscheiden. Drücken Sie dann zum Schluss die Eingabetaste. Installiert, erfolgreich. Lassen Sie uns unser Projekt schnell im Internet starten. Was ich jetzt machen werde, ist PM, Ron Dev. Vereinfacht das. Und dann ist es auf der Enter-Taste Das Projekt wird auf dem Localhost-Port 3.000 ausgeführt Um das Projekt zu öffnen, müssen Sie lediglich den Befehl oder die Steuertaste auf Ihrer Tastatur drücken den Befehl oder die Steuertaste auf Ihrer Tastatur und dann auf den Link zum Öffnen klicken Und auf dem Bildschirm ist unsere erste nächste GS-Anwendung. 7. 6 Nextjs BoillerPlate: In Ordnung. Willkommen zurück im Unterricht. In der vorherigen Vorlesung. Wir haben gelernt, wie man eine grundlegende Next GS-Anwendung erstellt und ausführt. Jetzt werden wir uns eingehend mit den Projektdateien und der Ordnerstruktur befassen , um zu verstehen, wie alles funktioniert, wenn wir unsere Anwendung ausführen. Lassen Sie uns mit der Paket-JS-Datei fortfahren. Contra Back, um das Terminal zu schließen. Befehl B oder Steuerung B, um den VS Code Explorer zu öffnen. Im Explorer finden Sie die Package Dot JN-Datei, und hier ist sie. Wunderschön. Im Skript haben wir den Dave, um unsere Anwendung im Entwicklungsmodus auszuführen. Als Nächstes folgt der Build , mit dem die Anwendung erstellt und für die Produktionsbereitstellung vorbereitet wird. Das Startskript wird verwendet, um den App-Produktionsserver zu starten. Der Lint wird verwendet, um die nächste in der S Lint-Konfiguration eingebaute GS einzurichten . Und für die Abhängigkeiten haben wir React React Dome und Next GS. Wir haben also React Version 18 installiert und dann haben wir die nächste Version 14.0 0.1 Zum Zeitpunkt der Aufnahme ist dies also die neueste Version Im Folgenden haben wir die Abhängigkeiten der Entwickler. Natürlich haben wir das Typskript und die Typen, und hier haben wir den Beitrag CSS, Rückenwind, ES-Links und so weiter und so fort Lassen Sie uns das also schnell schließen. Auch hier haben wir im Explorer die JN-Datei mit dem Paketsperrpunkt. Diese Datei gewährleistet eine konsistente Installation unserer Abhängigkeiten. Direkt oben haben wir, dass es ignoriert wird, was für die Versionskontrolle hilfreich ist. Und unten haben wir die YD Dot MD-Datei. Die yd me dot MD ist eine Dokumentation, die Anweisungen zum Ausführen, Erstellen und Bereitstellen der Anwendung enthält . Und wir haben das nächste Env DTS. Es besteht aus einer Typoskript-Deklaration für die nächsten GS. Und über welche Datei müssen wir nochmal sprechen? Lass uns über die Bilder von next.com sprechen. Und hier ist es Wir haben die nächsten Feigen. Wir haben auch die TS-Konfigurationen direkt unten. Außerdem haben wir die Post-CSS-Fig-For-T-Wind-Konfigurationen. Ganz oben haben wir das öffentliche Verzeichnis, und hier ist es. Der öffentliche Ordner enthält alle statischen Elemente, die gespeichert werden sollen, einschließlich der Bilder und der SVGs Wenn wir eine Prämienanwendung erstellen, werden alle SVGs, die wir verwenden werden, in dieses öffentliche Verzeichnis importiert. Schließ es. Die nächste Zeile ist das SRC, das ist das Quellpaket Wenn Sie zum Öffnen klicken, wird die App angezeigt In der App haben wir das Fünf-Symbol, und hier ist es Lassen Sie mich es Ihnen auf dem Bildschirm zeigen, und hier ist das Fünf-Symbol, das als Logo gespeichert ist. Lass es uns schließen. Hier ist das globale CSS, das sehr nützlich ist, wenn Sie mehrere Abschnitte in der Anwendung stilisieren möchten mehrere Abschnitte in der Anwendung stilisieren Unten ist der Layoutpunkt TSS. Der Layoutpunkt TSS ist der übergeordnete Container der gesamten nächsten GS-Anwendung Endlich haben wir die page.tss. Der Seitenpunkt TSS wird als untergeordnetes Element in das Stammlayout aufgenommen. Lass es mich dir zeigen Also, was auch immer Sie hier haben, es wird als Kinder in das Layout aufgenommen. Kannst du das sehen? Und hier ist es. Wenn es soweit ist, würde das, was im Tag erscheint , auf dem Bildschirm gerendert werden, genau so. Also alles auf der Seite funktioniert TSS. Können Sie sehen, dass wir das P-Tag haben dem steht, beginnen Sie mit der Bearbeitung? Wenn Sie zum Browser zurückkehren, sehen Sie „ Erste Schritte mit der Bearbeitung“. Dies wird einfach dadurch ermöglicht, dass die Seite, die TS macht, als Kinder in das übergeordnete Layout weitergegeben wird in das übergeordnete Layout weitergegeben . So einfach ist das. Jetzt konnten wir den Kontrollfluss einer nächsten GS-Anwendung verstehen . Der nächste Schritt besteht darin , den Code zu bereinigen. Das machen wir in der nächsten Vorlesung. 8. 7 Code CleanUp: In dieser Vorlesung werden wir mit der Bereinigung des Codes fortfahren Navigiere zur Seite Ts. Direkt im Inneren werden wir die Zeilen fünf bis 111 hervorheben . Also wollen wir alles aufräumen um neu anzufangen. Wisch es ab. P. Die Anwendung beschwert sich einfach, weil sie UI zurückgeben wird Wir werden hier ein D haben. Speichern Sie das Projekt. Wenn Sie überprüfen, ob der Browser neu geladen wird, wird ein leerer Bildschirm angezeigt Gehe zurück zum VS-Code. Jetzt müssen wir das globale CSS öffnen . Es befindet sich in der Quelle, der App und dann im globalen CSS. Wenn Sie zum Öffnen klicken, sehen Sie das CSS, das wir generiert haben, als wir die MPX-App erstellt haben Was ich jetzt tun werde, ist aus den Zeilen fünf hervorzuheben . Ups. Schau mal Ordnung. Markieren und dann runter zu den Zeilen 27. Wischen Sie es ab. Wenn du speicherst, checke den Browser aus und bombardiere. Kannst du sehen? Jetzt ist es uns gelungen, alles zu entfernen, was wir nicht wollen. Wir müssen bei Null anfangen. Also werden wir die Anwendung von Grund auf neu erstellen. Und das ist extrem gut für dich. Ich weiß, dass Sie sich vielleicht fragen, warum wir diese DW-Konfiguration hier nicht gelöscht haben. Es liegt einfach daran, dass, wenn du mir Rückenwind geben willst, diese Konfiguration enthalten sein muss. Also musst du es genau so lassen, wie es ist. Wenn Sie speichern, haben wir wieder einen leeren Bildschirm. Das ist jetzt aus, und in der nächsten Vorlesung werden wir über das Routing-System in der nächsten GS 14 sprechen. 9. App Router (Routensystem in Nextjs 14 ): In dieser Vorlesung werden wir weiter auf das Routing-System der nächsten GS 14 eingehen Lassen Sie uns also über den App-Router sprechen. Als Nächstes implementieren Dateisystem-basierte Routing-Techniken, bei denen der UR-Webpart innerhalb des Browser-Tabs von den Dateiordnern in Ihrer Codebasis gesteuert wird . Klingt absolut richtig. Keine Sorge, wenn wir anfangen, es zu praktizieren, werden Sie es bestimmt gut genug verstehen Beachten Sie diesen wichtigen Punkt. Im nächsten GS 14, wenn ein Ordner im App-Verzeichnis erstellt wird. Dieser Ordner wird automatisch zu einer Route, wenn darin eine page.ts oder ein Seitenpunkt S erstellt wird Gemäß der nächsten Routing-Konvention von E 14 zur Implementierung einer Route müssen Sie zur Implementierung einer Route auf jeden Fall einen Ordner im App-Verzeichnis erstellen einen Ordner im App-Verzeichnis Nehmen wir an, wir erstellen eine Prämien-Website, auf wir eine Kontaktseite und eine Profilseite benötigen. Common B, um den Explorer zu öffnen. Gewinnen Sie das App-Verzeichnis, klicken Sie mit der rechten Maustaste und dann auf einen neuen Ordner. Wir werden es Kontakte nennen, genau wie diese. Ein weiterer, in der App, Rechtsklick, neuer Ordner. Dies wird ein Co-Profil sein. Nachdem wir dies getan haben, überprüfen wir es im Browser, um zu sehen, ob es routingfähig ist Gehe zurück zum Browser und hier mache ich Localhost Pot 3.000 Schrägstrich Wenn du auf das Entaky klickst, heißt es, dass es eine 44t gefundene Seite zurückwirft. Wissen Sie warum? Das liegt einfach daran, dass wir im Kontaktordner eine Seite mit TSS oder GS erstellen im Kontaktordner eine Seite mit TSS oder GS Genau dann wird dieser Ordner zu einer Route. Klicken Sie auf Neue Datei. Und wir werden Seite TSS machen. Innerhalb von RFC, um die funktionale React-Komponente zu generieren. Kontaktseite. Sie können ein H-One-Tag verwenden, wenn Sie möchten. Schau es dir an. Wenn Sie jetzt den Browser auschecken, wird die Kontaktseite angezeigt. Lassen Sie uns die Profilseite weiterleiten. Ich werde Localhost als Profil verwenden. Wenn Sie die Enter-Taste drücken, wird eine 404-Ernaut-Fundseite zurückgegeben Ich schätze, du solltest inzwischen genau wissen , was du am Ende tun musst Poste das Video und implementiere die Profilroute. Lass mich dir dabei helfen. W im Profilverzeichnis, Rechtsklick, neue Datei, und wir nennen sie Page Dot TSX Einfach, weil wir Typoskript verwenden. Aus diesem Grund verwenden wir die Dot TSS-Erweiterung. Drücken Sie erneut die Enter-Taste, RFC, um die React-Funktionskomponente zu generieren Hier werde ich eine Profilseite erstellen. Lassen Sie uns es innerhalb des H One-Tags implementieren. Schneide das ab, lege es hinein und knoche es. In Ordnung. Im Browser speichern, kannst du sehen? Jetzt, jetzt ist die Seite sichtbar. Sie können dem Hadron-Tag einen Klassennamen geben, und dann machen wir Text neun in Excel Diese Tailwind-Utility-Klasse bedeutet einfach, dass wir die Schriftgröße auf RM erhöhen Wenn Sie den Browser-Boom sehen und auschecken. Siehst du, so wird es sehr gewagt. Nun, genau so implementiert man Routing in Next S. Wir können auch auf die Kontaktseite weiterleiten, einfach so und bumm. Kannst du das sehen? Beachten Sie diese wichtigen Punkte. Routen werden den Dateien auf der Grundlage des Namens der enthaltenen Ordner im App-Verzeichnis zugeordnet . Ein Seitenpunkt Ts im Kontaktordner wird dem Schrägstrich Kontakt zugeordnet, und ein Seitenpunkt TSS innerhalb des Profilordners wird dem Schrägstrich Profil zugeordnet Aus diesem Grund erhalten Sie die Kontaktseite, wenn Sie hierher kommen und Schrägstrich eingeben Tatsächlich können wir ihr sogar eine Hintergrundfarbe geben, damit Sie verstehen, wovon wir sprechen Geben wir hier den SVA-Klassennamen an. Dann werden wir innerhalb des Klassennamens die Utility-Klasse PG Yellow 500 verwenden PG Yellow 500 Wenn Sie den Browser speichern und auschecken, und hier ist die Kontaktseite. Zusammenfassend lässt sich sagen, dass jeder Ordner im App-Verzeichnis einem URL-Segment entspricht, wenn in Teaching Good eine Seite mit einem Punkt TS oder einer Punkt-GS-Erweiterung erstellt wird. Wunderschön. 10. Nextierte Route: In dieser Vorlesung werden wir weiter auf das Routing-System der nächsten GS 14 eingehen Lassen Sie uns also über den App-Router sprechen. Als Nächstes implementiert GS eine Dateisystem-basierte Routing-Technik, bei der der UR-Webpart innerhalb des Browser-Tabs durch die Dateiordner in Ihrer Codebasis gesteuert wird . Klingt strikt richtig. Keine Sorge, wenn wir anfangen, es zu praktizieren, werden Sie es bestimmt gut genug verstehen Beachten Sie diesen wichtigen Punkt. Im nächsten GS 14, wenn ein Ordner im App-Verzeichnis erstellt wird. Dieser Ordner wird automatisch zu einer Route, wenn darin eine page.ts oder ein Seitenpunkt S erstellt wird Gemäß der nächsten Routing-Konvention von E 14 zur Implementierung einer Route müssen Sie zur Implementierung einer Route auf jeden Fall einen Ordner im App-Verzeichnis erstellen einen Ordner im App-Verzeichnis Nehmen wir an, wir erstellen eine Prämien-Website, auf wir eine Kontaktseite und eine Profilseite benötigen. Common B, um den Explorer zu öffnen. Gewinnen Sie das App-Verzeichnis, klicken Sie mit der rechten Maustaste und dann auf einen neuen Ordner. Wir werden es Kontakte nennen, genau wie diese. Ein weiterer, in der App, Rechtsklick, neuer Ordner. Dies wird Profil genannt. Nachdem wir dies getan haben, überprüfen wir es im Browser, um zu sehen, ob es routingfähig ist Gehe zurück zum Browser und hier mache ich Localhost Pot 3.000 Schrägstrich Wenn du auf das Entaky klickst, heißt es, dass es eine gefundene Seite mit 44 Root-Wurzeln zurückwirft . Wissen Sie warum? Das liegt einfach daran, dass wir im Kontaktordner eine Seite für TSS oder für Gs erstellen müssen Genau dann wird dieser Ordner zu einer Route. Klicken Sie auf Neue Datei. Und wir werden Page Dot TSS machen. Innerhalb von RFC, um die funktionale React-Komponente zu generieren. Kontaktseite. Sie können ein H-One-Tag verwenden, wenn Sie möchten. Schau es dir an. Wenn Sie jetzt den Browser auschecken, wird die Kontaktseite angezeigt. Lassen Sie uns die Profilseite weiterleiten. Ich werde Lost than Profile machen. Wenn Sie auf die AK klicken, wird eine 404-Ernaut-Fundseite zurückgegeben Ich schätze, du solltest inzwischen genau wissen , was du am Ende tun musst Poste das Video und implementiere die Profilroute. Lass mich dir dabei helfen. W im Profilverzeichnis, Rechtsklick, neue Datei, und wir nennen sie Page Dot TSX Einfach, weil wir Typoskript verwenden. Aus diesem Grund verwenden wir die Dot TSS-Erweiterung. Er drückt die Enter-Taste, wieder RFC, um die Funktionskomponente React zu generieren Hier werde ich eine Profilseite erstellen. Lassen Sie uns es innerhalb des H One-Tags implementieren. Schneide das ab, lege es hinein und knoche es. In Ordnung. Im Browser speichern, kannst du sehen? Jetzt, jetzt ist die Seite sichtbar. Sie können dem Hadron-Tag einen Klassennamen geben, und dann machen wir Text neun Excel Diese Tailwind-Utility-Klasse bedeutet einfach, dass wir die Schriftgröße auf RM erhöhen Wenn Sie den Browser-Boom sehen und auschecken. Siehst du, so wird es sehr gewagt. Nun, genau so implementiert man Routing in Next S. Wir können auch auf die Kontaktseite weiterleiten, einfach so und bumm. Kannst du das sehen? Beachten Sie diese wichtigen Punkte. Routen werden den Dateien auf der Grundlage des Namens der enthaltenen Ordner im App-Verzeichnis zugeordnet . Ein Seitenpunkt TS im Kontaktordner wird dem Schrägstrich Kontakt zugeordnet, und ein Seitenpunkt TSS im Profilordner wird dem Schrägstrichprofil zugeordnet Aus diesem Grund erhalten Sie die Kontaktseite, wenn Sie hierher kommen und Schrägstrich eingeben Tatsächlich können wir ihr sogar eine Hintergrundfarbe geben, damit Sie verstehen, wovon wir sprechen Geben wir hier den SV-Klassennamen an. Dann werden wir innerhalb des Klassennamens die Utility-Klasse PG Yellow, 500 verwenden . Wenn Sie den Browser speichern und auschecken, und hier ist die Kontaktseite. Zusammenfassend lässt sich sagen, dass jeder Ordner im App-Verzeichnis einem URL-Segment entspricht, wenn in Teaching Good eine Seite mit einem Punkt TS oder einer Punkt-GS-Erweiterung erstellt wird. Wunderschön. 11. Dynamische Route: In der vorherigen Vorlesung haben wir die verschachtelte Route besprochen Also haben wir die Benutzer weiter erstellt. Und innerhalb der Benutzer haben wir den ersten Benutzer und den zweiten Benutzer als nächste Und innerhalb haben wir eine Seite TSS, die dem URL-Teil entspricht, dem Schrägstrichs Fs-Benutzer und dem Schrägstrich des zweiten Benutzers und dem Schrägstrich des zweiten Dieser Ansatz funktioniert zwar einwandfrei, aber beim Erstellen einer Prämienanwendung ist es nicht immer möglich, eine Route auf der Grundlage eines vordefinierten Teils zu definieren Route auf der Grundlage eines Lassen Sie mich das anhand eines Prämienbeispiels schnell aufschlüsseln. Dies ist die elegante und superschnelle Website für das nächste Jazz-Portfolio , die wir in diesem Kurs erstellen werden. Übrigens, der Link befindet sich direkt in der Beschreibung. Deshalb ermutige ich Sie sehr, sich einzuschreiben. Es gibt so viel Wertvolles , daraus zu lernen. Hier habe ich einige der Blogbeiträge aufgelistet. Wenn ich jetzt auf einen der Artikel klicke, sollten wir in der Lage sein, den Artikel auf eine neue Seite weiterzugeben. Lass mich dir zeigen, wenn ich zum Beispiel auf diesen Typen klicke, sieh ihn dir an. Wenn Sie die URL genau beobachten, werden Sie feststellen, dass ein Schrägstrich im Portfoliodetail Null ist Das bedeutet, dass dieser Artikel die ID Null hat. Versuchen wir es mit einem anderen Artikel. Lass uns wieder nach Hause gehen. Lass es mich an diesem Typen versuchen. Wenn Sie nun den Pfad beobachten, werden Sie den Schrägstrich Portfoliodetail, Schrägstrich fünf, sehen Das bedeutet einfach, dass dieser Artikel die ID Fünf hat. Das dynamische Routing-System ermöglichte es uns, diesen Artikel auf eine neue Seite weiterzugeben. Und mit Hilfe der ID können wir die entsprechenden Daten abrufen Können Sie auf der linken Seite sehen, können Sie die entsprechenden Daten zu diesem Artikel sehen Das ist also ein Beispiel für das dynamische Routing-System. Ich habe das alles nicht besprochen. Gehen Sie schnell zum VS-Code über und setzen Sie ihn weniger in die Praxis um. Zurück zum VS-Code. Also werden wir einen neuen Ordner CAD Blog erstellen. Im Blog werden wir also ein TSS mit Seitenpunkten erstellen. Ich werde TSS mit Schrägstrich machen. Das ist also eine Abkürzung, um einen Ordner und eine Seite darin zu erstellen einen Ordner und eine Seite Wenn Sie also die Eingabetaste drücken, ist hier der Blog. Kannst du sehen? Hier ist die Seite Ts, generiere die funktionale Komponente. Was wir jetzt tun sollten, ist einen Blogbeitrag zu rendern. So wie wir das hier machen können, werden wir das H-One-Tag verwenden, und ich werde einen Beitrag wie diesen blockieren, hervorheben und achtmal duplizieren. Dann ändere er so, dass er Beitrag zwei, drei, fünf, sechs, sieben, acht blockiert . Wenn Sie das Projekt speichern, kehren Sie zum Browser zurück und lassen Sie uns sehen, was wir haben. Okay. Wir müssen zur Demo-App navigieren . Und ich werde einen Slash-Blog machen. Schau es dir an Jetzt konnten wir den Blockbeitrag im Browser rendern . In der nächsten Zeile klicken Sie also auf eines der Elemente und leiten es dann an eine neue Seite weiter. Und genau hier kommt das dynamische Routing ins Spiel. Gehen Sie jetzt zurück zum Projekt. Klicken Sie also mit der rechten Maustaste im Blockordner und erstellen Sie einen neuen Ordner namens Block ID. Um eine dynamische Route zu erstellen, müssen wir den Namen des Ordners in eine eckige Klammer setzen. Die eckige Klammer steht für eine dynamische Route. Jetzt mache ich Blog-ID, so einfach ist das, oder du kannst Post-ID machen Lass uns Post ID machen. Vielleicht ist es so besser lesbar. Beitrags-ID. Klicken Sie mit der rechten Maustaste auf die Post-ID, und dann erstellen wir eine neue Seite. Diese Seite wird Terex genannt, generiert die funktionale Komponente Hier werden wir einen Hage One-Tag haben, und ich werde eine Detailseite erstellen Wenn wir auf eines der Blockelemente klicken, sollten wir es an diese Detailseite weitergeben können Wenn Sie den Browser speichern und auschecken, werden wir jetzt zum Beispiel einen Slash Blog Slash machen Wenn Sie die Eingabetaste drücken, sehen Sie jetzt die Detailseite Wenn Sie den Schrägstrich „Blog-Slash, 100“ eingeben, wird auch die Detailseite angezeigt Schrägstrich 800 oder eine andere ID, die Sie in Ihrem Projekt haben Sie werden also die Detailseite sehen. Dann sollten wir es ein bisschen ansprechen. Wir machen Fortschritte, und das gefällt mir. Der Einfachheit halber sollten wir als Nächstes eine eckige Klammer als dynamisches Segment behandeln , das es uns ermöglicht, ein dynamisches Publikum zu bilden. Wenn also ein Ordner in einer eckigen Klammer steht, müssen Sie nicht innerhalb der URL auf den Ordner verweisen, bevor Sie den Inhalt der Seite abrufen können. Die Essenz der dynamischen Route besteht also darin, die ID eines Beitrags extrahieren zu können und den Beitrag dann einzeln zu bearbeiten. Gehen wir zum Beispiel zurück zur ersten Demo. Wenn Sie also die ID dieses Inhalts extrahieren auf der Grundlage der ID klicken, können wir einige Operationen daran ausführen. So können wir die entsprechenden Daten abrufen. Wir können die Daten auch löschen und mit ihnen machen, was wir wollen Lassen Sie mich Ihnen jetzt zeigen, wie Sie die ID extrahieren. In der nächsten Gs. Jede Seite im Router erhält Routenparameter als Sonden Gewinnen Sie also die Seite, stellen Sie sicher, dass Sie die Post-ID wie folgt öffnen und dann Seite ts. Innerhalb der Funktion Also nehmen wir Parameter als Sonden auf. Nachdem Sie dies getan haben, müssen Sie es als Nächstes an die Benutzeroberfläche binden Das ist extrem einfach. Gewinnen Sie das Hedge-One-Tag, wir werden die C-Klammern öffnen und schließen, und innerhalb der C-Klammer mache ich Params Dot Post ID So einfach ist das. Machen Sie sich Notizen, das von uns erstellte dynamische Segment muss der Benutzeroberfläche entsprechen. Was auch immer Sie in diesem dynamischen Segment als Post-ID haben , genau das werden Sie hier haben. Stellen Sie also bitte sicher, dass die Schreibweise korrekt ist , denn genau darauf beziehen wir uns, und wir versuchen, dieses Zeug hier mit der Benutzeroberfläche zu verbinden, um die ID zu extrahieren, so einfach ist das Die Anwendung beschwert sich also, wir müssen den Typ definieren Der Parameter ist ein Objekt mit einem Schlüssel namens Post-ID, und der Typ ist string Genau so definieren Sie Ihren Typ, wenn Sie mit einem Typskript arbeiten Hier werden wir Parameter machen. Das Objekt hat eine Post-ID mit dem Typ Zeichenfolge, und jetzt haben wir den Typ erfüllt Schauen wir es uns im Browser an. Jetzt werde ich den Slash-Blog-Slash 200 machen. Schau es dir an Kannst du sehen? Jetzt haben wir DTS-Seite 200 Also das ist die ID. Wir holen es uns von der URL. Lass mich dir etwas zeigen. Geben wir hier den Klassennamen an, und dann mache ich Text neun in Excel. Wunderschön. Machen wir es lesbarer. DTS-Seite mit der ID und dem Knochen. Wir haben eine Detailseite mit der ID 200. Lass uns einen anderen überprüfen. Lass uns 17 machen. Detailseite mit der ID 17. Dann können wir 800 machen und so weiter und so fort. Jetzt konnten wir die ID aus der URL abrufen. Wir können dann mit der Arbeit an dem Beitrag beginnen. Das ist alles für den Moment, und wenn Sie diesen Vortrag hilfreich finden, stellen Sie sicher, dass Sie die Lichttafel einschlagen und andernfalls auf Abonnieren klicken 12. Verschachtelte dynamische Route: Nächstes dynamisches Publikum. Beim Erstellen einer komplexen Anwendung. Sie werden auf jeden Fall auf ein Szenario stoßen , in dem mehrere dynamische Crowd-Segmente erforderlich sind. Lassen Sie mich Ihnen ein Beispiel von der Reward-Website zeigen. Okay. Das ist natürlich die Reword-Website Wir haben gesehen, dass wir, wenn Sie auf diesen Artikel klicken, ihn auf eine neue Seite weiterleiten konnten, oder? Wunderschön. Jetzt wollen wir auch einen Kommentar abrufen, der zu dem Beitrag geschrieben wurde. Verstanden Zum Beispiel klickst du. Es öffnet sich eine neue Seite, auf der die Details anhand der ID abgerufen Und wenn Sie dann nach unten scrollen, sollten wir den Kommentar zu diesem Beitrag sehen können den Kommentar zu diesem Beitrag Gut. Also, wenn wir die Route spezifizieren wollen, können wir Slash Portfolio Det Zero, Slash Comment Slash Zero machen Comment Slash Verstanden. Wunderschön. Kehren Sie zum Code zurück, es sei denn, Sie implementieren ihn schnell. Wie der Name schon sagt, müssen wir nur einen neuen Ordner innerhalb der Post-ID erstellen . Hier ist der Block, du musst ihn innerhalb der Post-ID öffnen , mit der rechten Maustaste klicken und einen neuen Ordner erstellen. Und wir werden diese Kommentare nennen. Klicken Sie mit der rechten Maustaste auf den Kommentar und erstellen Sie einen neuen Ordner. Und in dieser Zeit wollen wir eine nächste dynamische Route erstellen. Um also eine dynamische Route zu erstellen, müssen Sie sie nur in die eckige Klammer einschließen. Dann machen wir die Kommentar-ID einfach so. Und innerhalb der Kommentar-ID müssen wir mit der rechten Maustaste eine Seite innerhalb der Seite Dot T Sex erstellen. Hier werden wir RFC verwenden, um die funktionale Komponente zu generieren Jetzt versuchen wir, den Kommentar zu einem bestimmten Beitrag zu schreiben Wir haben einen Ordnercode-Kommentar innerhalb der Beitrags-ID erstellt, und innerhalb des Kommentars haben wir unsere dynamische Route erstellt, und hier ist die Seite darin. Für eine bestimmte Beitrags-ID führt eine Seite also TSS innerhalb des Kommentarordners aus. Dieser Typ hilft dabei, die Beitragsbewertung anhand ihrer ID anzuzeigen Lassen Sie uns das praktisch umsetzen. Also müssen wir natürlich die Parameter mit einbeziehen, und was werden die Parameter jetzt sein Natürlich sind die Parameter ein Objekt mit der Post-ID und der Befehls-ID Nachdem wir das getan haben, kommen wir her und tun etwas. Okay. Verwenden wir das H-One-Tag. Gewinnen. Ich werde die Befehls-ID Params Dot ausführen. Lass es mich dir zeigen. Bitte, es müssen diese sein. Ups, sehen Sie sich das an Wir haben hier etwas falsch verteilt. Es muss grammatikalisch exakt sein. Also lass uns das N so entfernen. Das ist eine Empfehlungs-ID. Das kannst du lassen, aber es muss grammatikalisch ehrlich sein Also, was ich jetzt tun werde, ist den Explorer zu schließen, und dann haben wir die Befehls-ID Params Dot Dieser Parameter ist das URA-Segment hier für die Kommentar-ID, das hier das dynamische Segment ist, und es muss genau dieselbe Schreibweise haben, wenn Sie versuchen, es hier zu binden Wir haben also die Befehls-ID Param Dot, das ist das dynamische Segment, das wir erstellt haben Ich versuche es einfach zu erklären, damit es jeder gut genug versteht Dann machen wir hier für Block-Beiträge Param-Punkt-Post-ID Wenn Sie den Browser sehen und auschecken. Blockschrägstrich, die ID ist eins, Schrägstrich, Kommentar Schrägstrich Und hier hast du Kommentare eins für Block Post eins. Wenn du hier also zum Beispiel 800 machst, dann wirst du die Kommentare 800 für den Blockbeitrag 800 sehen. Also genau so implementiert man es. Geh zurück zum Code. Wir müssen diesen Typ erfüllen, bevor wir die Vorlesung beenden. Natürlich ist params ein Objekt. Die Post-ID ist vom Typ Zeichenfolge. Die Empfehlungs-ID ist ebenfalls vom Typ Zeichenfolge. Dann ist der Typ erfüllt, die Fehler sind alle weg. Okay. 13. ErrorPage (Spezielle Dateien): Wenn Sie eine Route anvisieren, die nicht im App-Ordner definiert ist nicht im App-Ordner definiert Als Nächstes rendern wir die Fehlerseite 44 not found by D fault. Lass es mich dir schnell zeigen. Sie alle wissen zum Beispiel, dass wir keine Route wie Slash Portfolio haben , wir haben diese Route nicht in unserem Projekt Wenn Sie die Enter-Taste drücken, schauen Sie mal. Es heißt vier auf vier, diese Seite konnte nicht gefunden werden. Genau das ist eine der Schönheiten von Next GS. Es hilft Ihnen, eine Fehlerseite zu definieren , die vier von vier nicht gefunden hat. Wenn Sie jedoch eine Prämienanwendung erstellen, möchten Sie auf jeden Fall eine schönere Seite mit der Fehlermeldung „Vier Oh, Vier nicht gefunden“ entwerfen . Ordnung. Mal sehen, wie wir das umsetzen können. Gehe zurück zu deinem Projekt und dann w in das App-Verzeichnis. Klicken Sie mit der rechten Maustaste und lassen Sie uns dann eine neue Datei erstellen. Und das wird Not Found Dot TSX heißen . ROFC, um die funktionale Komponente zu generieren, und hier, was ich jetzt tun werde , ist, sagen wir, einen Blick darauf zu werfen und den Bindestrich zwischen dem gefundenen Nein zu entfernen, den Bindestrich zwischen dem gefundenen Nein zu entfernen damit sich die Funktion nicht beschwert Also innerhalb haben wir ein He-One-Tag und innerhalb der Hedge ein Tag, ich mache die Seite nicht gefunden Und dann werden wir noch einen Hedge One Tag haben. Die angeforderte Ressource konnte nicht gefunden werden. Jetzt können Sie dem Ganzen Farbe hinzufügen und es dann nach Ihrem Geschmack gestalten . Wenn Sie zum Browser zurückkehren und dann sehen, dass die Seite nicht gefunden wurde, konnte die Anforderungsressource nicht gefunden werden. Genau so kann man also in den nächsten Jahren vier oder vier Fehlerseiten implementieren , die nicht gefunden wurden. Wenn Sie auf eine Route abzielen, die Sie in Ihrem Projekt nicht haben, wird diese Seite definitiv angezeigt. Sagen wir zum Beispiel Localho als Karren. Da wir in unserem Projekt keine Route haben , die den Kürzungen entspricht, werden wir auf die Seite weitergeleitet , die nicht Und genau so implementiert man die Vier-oh-Vier-Fehler-Seite „Nicht gefunden“. Sie können also weitere Farben hinzufügen, die Schrift und alles, was Sie tun möchten. Sie können damit weitermachen. 14. Dateikollation: Speicherort der Datei. Datei-Colocation bedeutet einfach die Art und Weise, wie Sie Ihre Projektdateien in den nächsten Schritten organisieren. Nehmen wir kurz dieses Beispiel. In der App werden wir ein Ordner-Dashboard erstellen. Darin werden wir eine Datei mit Punkten erstellen, TSX. Lassen Sie uns schnell die funktionale Komponente generieren. Schauen wir es uns im Browser an. Slash-Dashboard. Die angeforderte Ressource konnte nicht gefunden werden. Wissen Sie warum? Das liegt einfach daran, dass diese Datei nicht routbar ist Erinnern Sie sich daran, dass ich in der vorherigen Vorlesung erwähnt habe, dass jedes Mal, wenn ein Verzeichnis innerhalb des App-Ordners erstellt wird, dieses Verzeichnis automatisch zu einer Route wird, wenn eine Seite TSS oder ein Seitenpunkt darin erstellt wird Das ist also die Konvention, und jetzt machen wir Settings Dot TSS Das wird nicht funktionieren. Damit wir diese Datei richtig lokalisieren können Was wir tun müssen, ist, im Dashboard neue Datei zu erstellen Dann werden wir eine TSX-Seite wie diese haben, RFC, um die funktionale Komponente zu generieren, in Ordnung Was wir jetzt tun müssen , ist zu den Einstellungen zurückzukehren und das dann schnell zu kopieren Die Funktion sieht so aus, markieren Sie Kopieren, gehen Sie zurück zur Seite, fügen wir sie hier ein, so wie hier. Wenn du speicherst, da wir hier so etwas speichern müssen. Wenn Sie zum Browser zurückkehren und die Seite jetzt routingfähig ist Möglicherweise können Sie die Einstellungen hier jedoch nicht sehen Aber zumindest ist die Seite jetzt routingfähig. Eine andere Möglichkeit, Ihre Datei zu organisieren, die ich Ihnen dringend empfehle, besteht darin, einen separaten Komponentenordner für Ihre Benutzeroberfläche zu erstellen einen separaten Komponentenordner für Ihre Benutzeroberfläche innerhalb der Ressource, dem SRC, mit der rechten Maustaste auf den neuen Ordner und nennen Sie ihn dann Komponenten In dieser Komponente wird sich Ihre gesamte Benutzeroberfläche befinden Innerhalb der Komponente können Sie so etwas haben, Home-Komponenten machen GS. Sie können jetzt also die funktionale Komponente generieren. Und hier können Sie mit dem Aufbau Ihrer Benutzeroberfläche beginnen. Dies ist eine der besten Möglichkeiten, Ihre Datei zu finden. Und all diese Stopps werden wir in Zukunft anwenden, wenn wir mit dem Aufbau der Website für das Prämienportfolio beginnen Natürlich wird es dort drüben auf dem Schiff eingesetzt. Sie können es sich ansehen, um zu sehen, wie schön es ist, und ich empfehle Ihnen allen dringend, sich anzumelden, weil wir viel zu vermieten haben. 15. Privater Ordner: Willkommen zurück im Unterricht. In dieser Vorlesung werden wir die privaten Ordner im Detail besprechen. Der private Ordner ist eine Zukunft, die von next S bereitgestellt wird , um Ihnen zu helfen, Ihr Projekt effektiv zu organisieren. Dieser Ordner und all seine Unterordner sind nicht routingfähig. Selbst wenn Sie das Routensegment als Ziel angeben, werden sie nicht auf dem Bildschirm gerendert Um also einen privaten Ordner zu erstellen, müssen Sie dem Ordnernamen einen Unterstrich voranstellen Lassen Sie mich Ihnen zeigen, wie Sie den Explorer öffnen. W in der App, Rechtsklick. Stellen wir uns vor, Sie möchten eine private Operation im Bibliotheksordner ausführen . Damit diese Ordnernotizen routingfähig sind, müssen Sie ihm lediglich einen Unterstrich voranstellen und dann die Eingabetaste drücken Jetzt haben wir ihm einen Unterstrich vorangestellt. Klicken Sie mit der rechten Maustaste und lassen Sie uns eine neue Datei erstellen. Also mache ich die Seite TRX und drücke dann die Eingabetaste Wenn du RFC machst und bumm, mache ich das hier, das ist die private Okay. Wenn du sagst, checke sogar den Browser aus. Mal sehen, was wir haben. Schrägstrich, Unterstrich, Lab Es ist die Archie, und wir werden sehen, dass die Seite nicht Kannst du das sehen? Das liegt einfach daran, dass jedes Mal, wenn Sie einem Potenym einen Unterstrich voranstellen, es als nächstes als private Route behandeln Es wird also nicht routbar sein. Aber schauen wir uns jetzt an, wenn wir den Unterstrich entfernen, mal sehen, was passiert Lassen Sie uns den Unterstrich so entfernen. Bum. Geh zurück zum Browser und entferne auch den Unterstrich, so wie hier und die Bombe Das ist die private Seite. Jetzt haben wir den Unterstrich entfernt. Es ist keine private Seite mehr. Wenn Sie es jedoch zu einer privaten Seite machen möchten, müssen Sie zurückgehen und ihr dann einen Unterstrich voranstellen Und wo ist dieser Ordner. In Ordnung. Hier ist es. Rechtsklick, umbenennen. Dann werden wir hier den Unterstrich haben, einfach so Schau es dir an. Es heißt, nicht gefunden, die angeforderten Ergebnisse konnten nicht gefunden werden. Wenn Sie also einem Ordner einen Unterstrich voranstellen, bedeutet dies, dass der Ordner einige private Implementierungsdetails enthält und dass dieser Ordner vom Routing-System nicht berücksichtigt werden sollte , wodurch der Ordner und all seine Unterordner vom Routing ausgeschlossen Der Unterricht ist gut, wunderschön. 16. Routengruppe: In dieser Vorlesung werden wir die Route-Gruppe besprechen. Die Routengruppe ist eine sehr schöne Funktion von next S, mit der Sie Ihr Routensegment und Ihre Projektdatei in einer logischen Gruppe organisieren Ihr Routensegment und Ihre Projektdatei in können, ohne die URA-Pfadstruktur zu beeinflussen. Wenn Sie eine Routengruppe erstellen möchten, müssen Sie den Ordner nur in Klammern zusammenfassen, und genau das ist die Konvention Ich habe das alles noch nicht festgelegt. Lassen Sie uns das schnell in die Praxis umsetzen, indem wir ein Authentifizierungssystem mit der Registrierungsseite Anmeldeseite implementieren und das Passwort vergessen Klicken Sie mit der rechten Maustaste auf die App, neue Datei. Wir werden die Registerreihenfolge mit einem Schrägstrich auf einer Seite Ts erstellen einem Schrägstrich auf einer Seite Ts P ist die Datei. Wunderschön. RFC zur Generierung der Funktionskomponente und darin sehen wir uns an, was wir hier tun können Lassen Sie uns ein Head-One-Tag haben und ich mache dann die Registerseite. Geben wir ihr einen Klassennamen. Dann Text, lass uns fünf Excel draus machen. Finde einen Leibeigenen. Machen wir das zu Excel. Klicken Sie erneut mit der rechten Maustaste auf App, neue Datei. Als nächstes melden Sie sich an , um die Seite Ts zu erstellen. Sie müssen den Schrägstrich und dann die Seite TSX verwenden. Generieren Sie die Funktionskomponente auch hier schnell. Gehen wir zurück zur Registerseite den Hage One Tag, Cop, komm her. Einfügen. Hier werden wir die Anmeldeseite erstellen. Kann es schöner machen, indem die Hintergrundfarbe und all das angibt. Zuletzt werden wir das vergessene Passwort erstellen. Auch hier fügen wir das Age-One-Tag ein, und dann wird hier das Passwort vergessen angezeigt. Okay. Cool. So sicher, stellen Sie sicher, dass Sie die Anwendung ausführen. Wie Sie sehen können, läuft meins bereits, also muss ich das Terminal nur verstecken. Im Browser machen wir Localhost drei und dann registrieren wir uns Hier ist die Registrierungsseite. Wunderschön. Wenn ich mich mit einem Schrägstrich anmelde, ist hier die Anmeldeseite. Schließlich hat er das Passwort vergessen. Und hier ist die Seite „ Passwort vergessen“. Es scheint zwar alles einwandfrei zu funktionieren, aber dieser Ansatz ist nicht organisiert. Es ist keine gute Praxis. Denn wenn ein anderer Entwickler Ihr Projekt aufnimmt, wird Ihre Projektstruktur schwer zu lesen sein. Daher müssen wir unsere Authentifizierungsdatei in einem übergeordneten Bereich organisieren . Lassen Sie mich Ihnen zum Beispiel zeigen, sagen wir, Sie haben dieses Projekt an einen anderen Entwickler übergeben . Wenn der Entwickler dann etwas innerhalb des Logins implementieren möchte , ist die Struktur nicht organisiert. Wenn Sie eine komplexe Anwendung erstellen, stehen die Chancen gut, dass Sie mehr als, sagen wir, 20 Dateien haben werden. Erstellen Sie in der App einen neuen Ordner namens th. Die nächste Zeile besteht darin, die Registerseite in den th zu verschieben . Auch hier müssen wir die Anmeldeseite oder die Logging-Route in den DD verschieben . Schließlich müssen wir auch das gefälschte Passwort auf diese Weise in die Erde verschieben . Dies ist eine der besten Möglichkeiten, Ihren Code zu organisieren. Wenn zum Beispiel ein anderer Entwickler Ihren Code aufnimmt und Sie einige Änderungen auf der Anmelde- oder Registrierungsseite vornehmen möchten , kann er jederzeit in das Earth-Verzeichnis wechseln, da genau dort alle authentifizierungsbezogenen Dateien gespeichert sind. Wenn Sie auf „Öffnen“ klicken, werden das gefälschte Passwort, der Anmeldename und das Register angezeigt . Das ist also mehr Coincz. Lassen Sie mich Ihnen jetzt das Problem zeigen. Wenn Sie zum Browser zurückkehren, werden Sie sehen, dass die Seite nicht gefunden wurde. Dies ist passiert, weil wir die Datei aus dem übergeordneten Ordner verschoben haben . Zuvor befand sie sich im App-Verzeichnis, und jetzt haben wir einen übergeordneten Ordner erstellt abgeschnitten wurde, und wir haben die Datei darin verschoben. Damit Sie auf die Registerroute zugreifen können, müssen Sie das O angeben. Lassen Sie es mich Ihnen zeigen. Wir werden Schrägstrichregister machen. Siehst du? Nochmal, Schrägstrich Einloggen Alles scheint einwandfrei zu funktionieren, aber die URA-Pfadstruktur ist betroffen Denken Sie daran, dass beim Erstellen der Registerseite lokale Host 3.000 Schrägstriche registriert Jetzt heißt es, dass die Seite nicht gefunden wurde. Die Idee ist, die Route sorgfältig zu gruppieren ohne die URA-Pfadstruktur beeinflussen zu müssen. Wie setzen wir das um? Geh zurück zum Code und lass es mich dir zeigen. Um also eine Route-Gruppe richtig zu implementieren, müssen Sie lediglich das übergeordnete Verzeichnis mit parentenss umschließen das übergeordnete Verzeichnis mit parentenss Rechtsklicken Sie auf Umbenennen. Also hier, ich werde die Klammer hier öffnen und sie dann hier schließen. Sag gestern. Wenn Sie also zum Browser zurückkehren, können Sie die Passwortseite weiterleiten , ohne auf das Aus verweisen zu müssen. Ebenso das Login und das Register. Also das hier drüben ist in der URA-Struktur nicht mehr sichtbar. Lass es mich dir zeigen. Kannst du sehen? Wunderschön. Los geht's, Slash, einloggen Kannst du sehen? Alles funktioniert wie erwartet einwandfrei. Gut unterrichtet. Wunderschön. 17. Layout: Willkommen zurück im Unterricht. In dieser Vorlesung werden wir das Konzept des Layouts lernen und verstehen. Nun, was genau ist ein Layout? Layout ist einfach eine Benutzeroberfläche, die von mehreren Seiten in der Anwendung gemeinsam genutzt wird . Wenn Sie eine komplexe Website erstellen, möchten Sie wahrscheinlich einen Header haben , der auf allen Seiten einheitlich bleibt. Dies kann durch die Verwendung eines Layouts erreicht werden. Die Frage ist nun, wie definieren wir ein Layout wirklich? Ein Layout kann standardmäßig implementiert werden, indem eine React-Komponente aus einem Layout-Punkt-TSS oder einem Layout-Punkt-GS exportiert eine React-Komponente aus einem Layout-Punkt-TSS oder einem Layout-Punkt-GS Und die Layoutkomponente akzeptiert Requisiten von Kindern , die beim Rendern mit einer Diagrammseite gefüllt werden beim Rendern mit einer Diagrammseite Beachten Sie diesen wichtigen Punkt. Das Layout dient als Hauptkomponente jeder nächsten GS-Anwendung. Es muss ein HTM-Tag und einen Hauptteil haben. Öffnen Sie die App und dann innerhalb der App. Hier ist das Root-Layout. Ich glaube, ich habe dir das in der vorherigen Vorlesung gezeigt . Kannst du das sehen? Es hat also ein HTM-Tag, eine Sprache, die auf Englisch gesprochen wird, und dann hat es einen Hauptteil Nehmen wir zum Beispiel an, wir wollen eine Header-Komponente implementieren , die während des gesamten Projekts konsistent bleibt des gesamten Projekts konsistent Nehmen wir an, wir wollen eine Kopf- und eine Fußkomponente, die während des gesamten Projekts konsistent bleiben. Sie nun in der Komponente hier in der Komponente rechten Maustaste auf neue Datei. Und ich werde einen Punkt s machen. Leute, ich werde jetzt ein bisschen schneller sein. Dann werde ich hier Foot a Dot es machen. Lassen Sie uns innerhalb der Futa FC ausführen, um die funktionale Komponente zu generieren Und hier geben wir ihr einen Klassennamen und dann geben wir ihr einen BG-Dash Das ist der Futa, geben wir ihm einen BG-Strich. Gelber Strich 300. Das ist also der Futa. Was ich jetzt machen werde, ist, einen Teil des Tests aus dem TH zu kopieren, weil ich das Design jetzt schon liebe Ich muss nur den von Hage in der Registrierung oder auf der Anmeldeseite kopieren in der Registrierung oder auf der Anmeldeseite Komm in die Fußzeile und füge sie ein. Hier werde ich das Padding implementieren, P dafür, dass ich das alles gemacht habe Ich muss diesen schnell hierher kopieren und dann einen Punkt S, RFC, anklicken, um die funktionale Komponente zu generieren Dann muss ich in der Retoure nur noch einfügen. Speichern Sie und achten Sie darauf, den Code zu formatieren. In Ordnung Jetzt ändern wir die gelbe zu blaue 300, ungefähr so. Dann werden wir hier Operationen durchführen , sieh dir das an. Das sollte die Titelseite sein. Und du speicherst, gehst zurück zur Fußzeile, und das sollte die Fußzeilenseite sein Wir erstellen bereits eine Prämienanwendung, und das ist nett Das ist also die Homepage der gesamten Anwendung. Wir möchten, dass die Kopf - und Fußzeile auf allen Seiten konsistent bleiben Wenn Sie also zur Blockseite gehen, werden die Kopf- und Fußzeile angezeigt, die Benutzer, die Authentifizierung und alle Die Art und Weise, wie wir das jetzt tun können, besteht darin, ein wenig nach oben zu scrollen, TSS zu layouten, nach oben zu scrollen und hier werden wir Header von Punkt Punkt Punkt Schrägstrich, Komponente Schrägstrich, Kopfzeile einfügen Header von Punkt Punkt Punkt Schrägstrich, Komponente Schrägstrich, Kopfzeile Dann werden wir zum Schluss die Fußzeile aus den Schrägstrichkomponenten hinzufügen, die Schrägstrichfußzeile Hier müssen wir den Header rendern und ihn mit dem selbstschließenden Tag vervollständigen Und hier werden wir die Fußzeile rendern. Wenn Sie den Browser speichern und auschecken und dies tun. Jetzt, wenn du Slash-Blog machst. Kannst du sehen, dass die Kopfzeile beide auf der Blog-Seite erscheinen. Und dann können wir Slash Profile machen. Wir haben all diese Routen innerhalb des Projekts. Natürlich haben wir es in den vorherigen Vorlesungen implementiert . Und bumm. Die Kopf- und Fußzeile ist während des gesamten Projekts konsistent Sie werden sie also überall auf Ihrer Seite finden. Das ist also genau das Konzept eines Layouts. 18. Layout-Routengruppengruppe: Willkommen zurück im Unterricht. In der vorherigen Vorlesung. Wir haben gelernt, wie man generell ein Layout erstellt , das einheitlich oder seitenübergreifend bleiben kann. Aber manchmal möchten Sie vielleicht ein einzigartiges Layout erstellen , das für eine bestimmte Seite in Ihrer Anwendung gilt . Nehmen wir an, Sie möchten die andere Seite des Benutzers einen ähnlichen Hintergrund hat. Sie können innerhalb der Anwendung ein Layout erstellen , und wenn Sie dann die Anwendung ausführen, wird die Seite in das Layout übernommen und nimmt die Form und den Hintergrund an. Lassen Sie uns das schnell in die Praxis umsetzen. Innerhalb der Benutzer werden wir ein Layout erstellen. Layout Dot TSX, genau so. Dann werden wir schnell das Layout generieren. Ich muss es nur kopieren und einfügen, und Sie können das Video am Ende anhalten , um alle Dinge direkt dort einzugeben. Was ich hier gemacht habe, fangen wir von vorne an. Ich muss den Kerl einfach abwischen. Okay, du wirst dieser DV-Klasse also so einen Namen geben DV-Klasse also so einen Namen Gewinnen Sie den Klassennamen, der Hintergrund wird SD, 200 sein Und dann wird der Bildschirm eine Sichthöhe von 100 haben. Nachdem Sie diesen Hintergrund erstellt haben, werden die Route des ersten Benutzers und die Route des zweiten Benutzers als Kinder in dieses Layout aufgenommen, und hier ist es. Dann kann es diese Eigenschaft hier übernehmen. Verstanden. Wunderschön. Wenn Sie die Anwendung speichern, checken Sie den Browser aus. Wenn Sie Lhost ausführen, geben 3.000 Benutzer einen Schrägstrich als ersten Benutzer ein. Und dann siehst du den ersten Benutzer mit der roten Hintergrundfarbe Lass uns jetzt etwas tun. Ich mag den roten Hintergrund nicht, und das ist übrigens meine Meinung. Ich werde hier einfach blau machen. Blau 200. Ich finde es cool so. Wir können 100 draus machen. In Ordnung. Das ist der Filter und das ist der Header. Denken Sie daran, dass wir die Kopf- und Fußzeilenkomponente innerhalb des Root-Layouts gerendert Fußzeilenkomponente innerhalb des Root-Layouts Aus diesem Grund können Sie die Kopfzeile und den Fola rund um die Seiten in der Anwendung sehen Fola rund um die Seiten in der Anwendung Aber für das Layout haben wir es innerhalb der Benutzer erstellt. Der erste Benutzer und der zweite Benutzer sind die einzige Seite, die in dieses Layout wechseln kann. Selbst wenn Sie Benutzer Schrägstrich, zweiter Benutzer verwenden, lassen Sie uns so etwas machen Kannst du jetzt sehen, dass wir einen zweiten Benutzer haben und er dieselbe Hintergrundfarbe angenommen Jetzt änderst du es auf gelb und es sieht gut aus. Wenn Sie also eine Anwendung erstellen und möchten, dass zwei oder drei verschiedene Seiten dieselbe Eigenschaft annehmen, müssen Sie lediglich ein weiteres Layout innerhalb der übergeordneten Anwendung erstellen. Und dann würden alle Routen innerhalb des übergeordneten Elements definitiv in das Layout übernommen. So einfach ist das. Nun stellt sich die Frage, was ist, wenn wir einen anderen Benutzer haben, aber wir möchten nicht, dass dieser Benutzer denselben Hintergrund annimmt. Genau hier kommt die Herausforderung ins Spiel. Lass es mich dir zeigen. Nehmen wir zum Beispiel an, wir haben bis zu dritte Benutzer. In Ihrer Datei werde ich ein Drittel pro Seite TSX machen. Generieren Sie die Funktionskomponenten. Dann müssen wir hier nur zum ersten Benutzer gehen und die Eigenschaften kopieren. Lassen Sie uns die Eigenschaften hierher kopieren. Natürlich können Sie sich ansehen, wie ich diese Eigenschaften hinter den Kulissen implementiert habe . Hier haben wir das Patent vier. Pat and Top ist 20. Die Textgröße und die Zeilenhöhe sind acht Excel, die Schrift ist extra hell. Sie können das also an Ihrer Seite tun. Also gut, ich rede wirklich zu viel. Es ist zu deinem Besten, denn ich will dir alles erklären Hier, lass uns Fed-Benutzer machen, einfach so, okay? Wenn du sparst. Wenn Sie also Benutzer mit Schrägstrich versehen, geben Sie Fed-Benutzer einen Schrägstrich ein. Und hier ist der dritte Benutzer, der innerhalb dieses Layouts denselben Eigenschaftshintergrund annimmt Also der dritte Benutzer, zweite Benutzer und der erste Benutzer. All diese Seiten hier werden in das Layout übernommen, und sie werden als Kinder hier gespeichert Wenn das passiert, wird diese Eigenschaft auf die Kinder angewendet , also wird diese Eigenschaft auf die Kinder angewendet , in diesem Fall auf den ersten Benutzer, den zweiten und den dritten Benutzer Im Moment besteht die Herausforderung jedoch darin , den dritten Benutzer auszuschließen. Wir möchten also nicht, dass der dritte Benutzer in dieses Layout wechselt. Wir wollen es anders stilisieren. Was wir jetzt tun müssen, ist ein Routengruppenlayout zu erstellen Es ist ziemlich einfach, das zu tun. Innerhalb dieses Benutzers sind dies nun die übergeordneten Benutzer. Wir werden einen neuen Ordner mit Benutzerlayout erstellen. Jetzt werden wir dieses Layout innerhalb des Benutzerlayouts wie folgt verschieben . Danach müssen wir auch den ersten Benutzer innerhalb des Benutzerlayouts verschieben . Schließlich müssen wir den zweiten Benutzer in das Benutzerlayout verschieben . Nachdem Sie das getan haben, müssen Sie diesen Ordner von der URL abstrahieren , damit wir nicht Schrägstriche für Benutzer, Schrägstrich, Benutzerlayout, Schrägstrich, erster Benutzer verwenden müssen Benutzer, Schrägstrich, Benutzerlayout, Schrägstrich, erster Benutzer Wenn Sie jetzt zum Browser zurückkehren, werden Sie feststellen, dass der dritte Benutzer nicht mehr die Eigenschaft des Layouts übernimmt Aber wir haben hier ein Problem. Gewinnen Sie die URL, wir müssen auf das Layout des Benutzers abzielen. Slash, erster Benutzer. I Wenn Sie genau hinschauen, werden Sie feststellen, dass wir zu viele Dinge tun , nur um den ersten Benutzer anzusprechen Die bewährte Methode besteht darin, das Layout des Benutzers vom URL-Segment weg zu abstrahieren . Die einzige Möglichkeit, dies zu tun, besteht darin , das Layout des Benutzers in Klammern zusammenzufassen, etwa so. Du drückst die Enter-Taste Mit dieser Implementierung ist es uns gelungen, das Layout des Benutzers vom URL-Segment zu abstrahieren Layout des Benutzers vom URL-Segment Dieser Typ hier wird nicht in die URL eingefügt. Wenn Sie jetzt zum Browser gehen, wird angezeigt, dass die Seite nicht gefunden wurde. Wissen Sie warum? Das liegt einfach daran, dass das Benutzerlayout vom URL-Segment abstrahiert wird Auf diese Weise wird es nicht in die URL eingefügt. Alles was wir tun müssen, ist es auf diese Weise abzuwischen. Jetzt heißt es Localhost, 3.000 Schrägstrich-Benutzer Fas-Benutzer und Bum Kannst du das sehen? Alles funktioniert wie erwartet einwandfrei. Wenn Sie den Localhost-Schrägstrich verwenden, geben Benutzer den Schrägstrich für den dritten Benutzer ein. Der dritte Benutzer kann die Eigenschaften innerhalb des Layouts nicht mehr verwenden Genau so können Sie also Ihr eigenes Layout erstellen und dann einige Seiten abstrahieren, von denen Sie nicht dieselben Eigenschaften annehmen möchten. In diesem Beispiel möchten wir, dass das erste und das zweite Layout denselben Hintergrund annehmen, und dann wollen wir ein eindeutiges Layout für den dritten Benutzer erstellen . Ich möchte dir alles zeigen. Dritter Benutzer, p Ts, geben wir ihm einen Namen für die Hintergrundklasse und dann Bg Red 200. Wir können ihm auch eine Höhe, einen H-Bildschirm, geben. Dadurch wird die Ansichtshöhe auf 100 eingestellt. Kannst du sehen? Jetzt haben wir einen einzigartigen Hintergrund für den dritten Benutzer implementiert. Aber wenn Sie den ersten Benutzer auschecken, hat er einen hellgelben Hintergrund, und dann hat der zweite Benutzer auch einen hellgelben Hintergrund. 19. Metadaten-Route: Wir kommen zurück zum Unterricht. In dieser Vorlesung werden wir uns mit dem Routing von Metadaten befassen. Wenn es darum geht, professionelle Anwendungen zu erstellen. Die Sicherstellung einer ordnungsgemäßen SEO-Optimierung ist entscheidend für die Verbesserung der Sichtbarkeit , die zu Konversionen führt. Die von next GS eingeführte Metadaten-API ermöglicht es Ihnen, Metadaten für jede Seite zu definieren. sicher, dass genaue und relevante Informationen gespeichert werden, wenn Ihre Seite geteilt oder indexiert wird gespeichert werden, wenn Ihre Seite geteilt oder indexiert In dieser Vorlesung werden wir erörtern, wie die Metadaten-API verwendet werden kann, um das Routing von Metadaten zu verbessern Nach der neuen Routing-Konvention. Es gibt zwei Möglichkeiten, Metadaten zu konfigurieren. Sie können entweder das statische Metadatenobjekt generieren oder eine dynamische Funktion zum Generieren von Metadaten exportieren. Das mag ein bisschen knifflig klingen. Aber mach dir Sorgen, wenn wir anfangen, es zu praktizieren, wirst du es definitiv gut genug verstehen Öffnen Sie jetzt den VS-Code und lassen Sie mich es Ihnen zeigen. Genau hier müssen wir ein paar Sachen schließen . Wir in der App. Das Layout hier enthält die ersten Metadaten. Die ersten Metadaten, die wir in unserem Projekt haben, sind im Root-Layout zu sehen. Zum Öffnen hier klicken. Das Root-Layout befindet sich direkt im App-Verzeichnis. Dieses ist das Standardlayout jeder nächsten S-Anwendung. Hier sind die Metadaten. Darin haben wir den Titel und die Beschreibung. Wenn du zum Browser zurückkehrst, dann schau mal. Das ist die Startseite. Lassen Sie uns schnell die Höhe implementieren. Geben Sie schnell den Klassennamen ein. Geben Sie die Höhe von 100 Fuß an. In Ordnung, sieh mal, es funktioniert gut. Dann geben wir der H-One schnell einen Klassennamen. Dann werde ich Text für Excel machen. Ordnung, gut. Startseite. Es ist in Ordnung. Sie können das Padding und den Rest implementieren, aber das ist nicht die Absicht dieser Vorlesung Lassen Sie uns nun die Seite schließen und zu den Layouts in TS zurückkehren Also habe ich den Titel und die Beschreibung nicht gesehen. Wenn Sie zum Browser zurückkehren, lassen Sie uns kurz die Konsole überprüfen. Öffne das Elementfenster. O Hier, im Kopf, klicken, um es zu öffnen. Wenn Sie dann nach unten scrollen, sehen Sie den Titel der nächsten App Hier kommt es genau von hier her. Das können Sie, sagen wir, den nächsten Fall vom Anfänger bis zum Fortgeschrittenen machen. Kannst du das jetzt sehen? W im Titel, Sie werden den nächsten Kurs von Anfang bis Ende sehen . Ich habe die ersten Metadaten nicht gesehen. Wir können auch unsere eigenen Metadaten innerhalb der Seite erstellen. Lassen Sie mich Ihnen zeigen, wie das geht. Wir müssen nach einer Seite Ausschau halten, die wir verwenden können. Versuchen wir also, das Profil hier zu verwenden. Dann öffne die Seite TS. Also hier oben müssen wir die Metadaten definieren. Darin wird es eine Eigenschaft namens Titel aufnehmen . Innerhalb des Titels werde ich Code mit einem Hundefriseur machen. Speichern Sie die Anwendung und checken Sie den Browser aus. Jetzt möchte ich dir etwas zeigen. Hier ist die Homepage. Wenn Sie neu laden, und hier haben wir den Titel als nächsten Kurs von Anfang bis Ende. Jetzt, wenn du ein Profil machst. Schau dir den Titel noch einmal an. Es heißt jetzt mit einem Do Baba. Genau so können Sie Ihre statischen Metadaten erstellen. Nachdem wir dies getan haben, wollen wir uns schnell ansehen, wie wir dynamische Metadaten erstellen können. Nehmen wir an, Sie erstellen eine Blockanwendung. Und jeder Block hat mehrere Beiträge. Wenn Sie auf jeden einzelnen Beitrag klicken, sollten wir den Titel des Beitrags als Metadaten sehen können . Lass uns das schnell machen. Öffne den Block und innerhalb des Blogs genau hier, auf der Seite , auf der TSS nicht hier Dieser ist für die einzelne Blockseite. Öffne die Post-ID darin, du wirst die Seitenpunkte sehen. Ordnung. Genau hier fängt das Telefon an. Zuerst müssen wir Metadaten von Next importieren. Import in Klammer, Metadaten von Next. Nachdem wir das getan haben, erstellen wir schnell den Typ. Jetzt wird params ein Objekt mit einer Post-ID vom Typ string sein . Wunderschön Nachdem wir dies getan haben, exportieren wir schnell die Metadaten. L Lass uns schnell die Handflächen aufnehmen. Wir mussten es nicht auf eine Pfeilfunktion einstellen. Jetzt werden wir zurückkehren. Mit der Rückgabe werden wir also auf das Eigentumsrecht zugreifen. Der Blogbeitrag. Dann mache ich Params Dot Post ID. Wir versuchen, die Metadaten und die Post-ID zu binden. Wenn Sie also auf Beiträge klicken, wird der Titel dieses Beitrags innerhalb des Metadatentitels angezeigt . Nachdem ich das getan habe. Schließlich müssen wir diese Funktion hier ändern, da wir den Typ hier bereits erstellt haben. Okay. Wir müssen diesen nur so löschen. Wischen Sie es ab und dann mache ich Probs. Und nachdem wir das gemacht haben, okay, gibt es hier ein Problem. Okay, Leute, schaut mal. Also, wenn ihr hierher kommt, geben wir ihr die Post-ID , weil das mit dem Himmel hier genauso sein muss, was das URL-Segment ist. Okay? Und hier sollte es Post-ID sein, einfach so. Schauen wir uns den Browser an, aktualisieren wir ihn. Jetzt mache ich Localhost 3.000 Slash-Blog Slash 800. Mal sehen, was passiert. Okay. Wunderschön. Lass es uns im Elementfenster rausnehmen. Klicken Sie auf Kopf rein. Und im Titel wirst du Block Post 800 sehen. Kannst du Block Post 800 sehen? uns also gelungen, die ID zu extrahieren und sie dann mithilfe von Metadaten in den Titel weiterzugeben Wenn Sie also zum Beispiel Slash Block, Slash Football Wenn Sie sich dann den Titel ansehen, werden Sie Block Post Football sehen. 20. TitleField: Titel-Metadaten. Der Hauptzweck des Titelfeldes besteht darin, den Titel des Dokuments zu definieren Dabei kann es sich entweder um eine Zeichenfolge oder ein Objekt handeln. Ein Beispiel für ein Zeichenketten-Titelfeld ist das, was wir hier im Layout haben. Dies ist das Zeichenketten-Titelfeld. In dieser Vorlesung werden wir mit der Implementierung des Objekttitelfeldes fortfahren . Um das zu erreichen, müssen wir diesen Typen für die Zwischenzeit abwischen und dann die innere Klammer öffnen und schließen. Stellen Sie sicher, dass Sie genau hier ein Komma setzen. Achten Sie auch hier darauf, die Metadaten in eine Wanne zu importieren. Importieren Sie Metadaten vom Typ Next. Nachdem wir das getan haben, haben wir innerhalb des Titels drei verschiedene Eigenschaften. Die erste Eigenschaft ist die Absolute. Die zweite Eigenschaft ist die Standardeigenschaft. Schließlich die Vorlageneigenschaft. Lassen Sie uns nun über die Standardeigenschaft sprechen. Die Default-Eigenschaft ist nützlich, wenn Sie einen Titel für ein Routensegment angeben möchten , das keine Metadaten enthält. Schauen wir uns zum Beispiel nach einer Seitenroute innerhalb des Projekts um, die keine Metadaten hat. Ich sage, ich muss das schließen, um es richtig zu verstehen. Der Benutzer hat keine Metadaten. Mal sehen, was wir hier haben. Diese Seite hat keine Metadaten. Wenn Sie zum Layout zurückkehren, müssen Sie nur noch Folgendes tun Dies ist der Standardtitel für alle Layouts ohne Metadaten. Das ist zum Beispiel so, Sie können am Ende einen besser lesbaren Satz verwenden , der die Absicht Ihres Projekts beschreibt. Wenn Sie sehen, dass Sie sogar den Browser auschecken, machen wir jetzt Localhost Slash, 3.000 Slash-Benutzer Schrägstrich D User Die Aufmerksamkeit sollte innerhalb des Elementfensters liegen. Lassen Sie uns den Kopf öffnen, nach unten scrollen und dann sehen Sie, dass dies der vierte Titel für das gesamte Layout ohne Metadaten ist. Selbst wenn Sie zum Beispiel auschecken, geben Schrägstrich als ersten Benutzer Dies ist der erste Benutzer und er hat genau den gleichen Titel Kannst du hoffen, dass du den Titel hier sehen kannst. Dies ist der Standardtitel für das gesamte Layout ohne Metadaten. Dies ist ein Beispiel für die Standardeigenschaft. Die nächste Zeile ist die Vorlage. Die Vorlageneigenschaft ist nützlich, wenn Sie einen dynamischen Titel erstellen möchten , indem Sie entweder ein Präfix oder einen S-Fix hinzufügen. Lassen Sie uns das schnell in die Praxis umsetzen, damit Sie das Wesentliche verstehen. Hier ist die Vorlage richtig. Was ich jetzt machen werde, ist das Prozentzeichen und dann S wie das, so etwas in der Art, und dann mache ich eine digitale Duba Wenn du speicherst, lass uns schnell die Block-Seite öffnen. Lassen Sie uns dafür die Blockseite verwenden. Hier ist der Blog. Hier ist die Blockseite. Gut. Innerhalb der Blockseite müssen wir die Metadaten von next importieren, nachdem wir das getan haben. Lass uns schnell exportieren. Und der Typ sind Metadaten. Geben Sie den Titel an, und ich werde hier die Blog-Liste erstellen. Die Idee ist einfach. Wir wollen diese Blog-Liste hier als Ersatz verwenden, lass mich dir diesen Typen zeigen. Im Browser werden Sie die Blogliste b data sehen. Sie speichern L, schauen wir uns den Browser an. Localhost Schrägstrich 3.000 Schrägstrich. Oh, meine Güte Leute, ich wohne in der Nähe des Flughafens. Wenn Sie also ein Geräusch des Flugzeugs hören, bedeutet das einfach, dass Sie bald reisen werden. In Ordnung. Lass uns weitermachen. Jetzt werden wir einen Localhost 3.000-Blog haben Hier im Titel siehst du die Blog-Liste und dann Duba Digital Wir haben die Blog-Liste verwendet, um den Himmel genau hier zu ersetzen. Mit anderen Worten, wir fügen der Blog-Liste Duba-Digitals hinzu, so wie es im Browser im Elementfenster zu sehen Blog-Liste, Dub Digital. Wann immer Sie einigen Dingen in Ihrem Projekt ein Präfix oder Suffix hinzufügen möchten , genau so implementieren Sie es mithilfe von Metadaten Lass uns über das Absolute sprechen. In Ordnung. Die absolute Eigenschaft ist nützlich, wenn Sie einen Titel angeben möchten , der die Titelvorlage ignoriert und innerhalb des übergeordneten Layouts festgelegt Wenn du zum Beispiel die Jungs hier ignorieren willst, die gesamte Titelvorlage genau hier. Wenn du es ignorieren willst, musst du das Absolute verwenden. Schauen wir es uns noch einmal im Browser an. Hier haben wir eine Blogliste und ein Duba-Digital. Wenn Sie zu derselben Seite zurückkehren, der Blog-Seite , lassen Sie uns jetzt das Absolute implementieren Was wir tun müssen, ist diesen Typen abzuwischen und dann das Objekt einzuführen. Innerhalb des Objekts werden wir absolute Werte anwenden. Ich muss das nur schließen. Wir implementieren hier das Absolute, sodass wir es nicht mehr im übergeordneten Layout benötigen. Wischen Sie das so ab. Also genau hier, was du tun musst, ist, das ist der absolute Titel. Wenn Sie den Browser auschecken, können Sie sehen, dass dies der absolute Titel genau hier ist. Hier dreht sich alles um Routing und Metadaten. 21. Links und Navigationen: Willkommen zurück im Unterricht. In der vorherigen Vorlesung haben wir uns mit den nächsten auf GS-Dateien basierenden Routing-Techniken befasst und gelernt, wie man verschiedene Routentechniken wie die dynamische Route der nächsten Ed-Route und die Ca-Route erstellt . Sie werden jedoch feststellen, dass wir die URL in der Registerkarte manuell eingegeben haben. Wenn wir zur Blog-Seite weiterleiten möchten, müssen wir einen Localhost 3.000-Slash-Blog wie folgt erstellen Und wenn wir dann zur Profilseite weiterleiten wollen, müssen wir ein Slash-Profil erstellen Aus Sicht des Entwicklers ist daran nichts auszusetzen Aus Sicht des Endbenutzers wird dies jedoch als unangemessen angesehen, da die Endbenutzer möglicherweise nicht einmal die Route kennen , die Sie in Ihrem Projekt haben. Daher sollten wir es dem Endbenutzer leicht machen können , von einer Seite zur anderen zu gelangen, indem er auf einen Link klickt, und das wird natürlich mit der Link-Komponente implementiert , die in den nächsten 14 enthalten ist. Lass es mich dir schnell zeigen. Gehen Sie zurück zum VS-Code, Common B, um den Explorer zu öffnen. Gewinnen Sie die App. Also hier ist die Homepage. Die Seite do S S, die sich direkt im Stammverzeichnis befindet, das ist die App. Wenn Sie hier zum Öffnen klicken , müssen wir den Link implementieren. Um den Link zu implementieren, Sie zunächst einen Blick darauf. Das nächste Bild wird nicht verwendet. Also müssen wir den Link vom nächsten Schrägstrich importieren. Nachdem wir dies getan haben, implementieren wir schnell die Links unter dem H-One-Tag Nehmen wir also an, wir wollen zur Blockseite weiterleiten. Link, und bitte nimm es zur Kenntnis. Der Link steht auf dem Großbuchstaben L. Die Hypertext-Referenz equ, wir werden die C-Klammer nicht verwenden Verwenden wir stattdessen den Einzelcode oder den Doppelcode Schauen wir uns jetzt etwas an. Im Explorer wirst du feststellen, dass wir eine Route namens Blog haben, oder? Um diese Route als Ziel festzulegen, müssen wir nur einen Schrägstrich machen und dann die Route angeben, nämlich Blog Vereinfacht das. Dann schließe den Link Hier werde ich die Seite blockieren. Das innere HTML wird der Test sein , der auf dem Bildschirm angezeigt wird. Und wenn Sie auf den Test klicken , gelangen Sie zur Blog-Seite. Sieben checken den Browser aus. Okay? Wir müssen zur Startseite navigieren. Und hier ist der Blog. Wenn du klickst, sind wir jetzt auf der Blog-Seite. Gut unterrichten. Wunderschön. Sie wissen also , dass Sie bei der Implementierung eines Prämienantrags, wenn Sie die Sperrseite aufrufen , nicht direkt hier auf den Tab klicken müssen , um zurückzukehren. Stattdessen sollten wir hier einen Link implementieren können , der uns zurück zur Startseite weiterleitet. Also, was ich jetzt tun werde ist zum Projekt zurückzukehren, innerhalb der Blockseite. Das ist die Blockseite genau hier. Lassen Sie uns schnell vom nächsten Schrägstrich aus verlinken, und wir müssen den Link so oben platzieren HREF ist gleich. Wir machen es zu Hause, und hier machen wir es zu Hause Jetzt müssen wir hier kein Zuhause angeben. Wisch es ab. Wenn Sie also zur Startseite weiterleiten möchten, ist es üblich, einen Schrägstrich wie diesen anzugeben Dies wird ein Verweis auf die Startseite sein. Wenn Sie im inneren HTML-Code auf diese Startseite klicken. Sie werden auf die Startseite weitergeleitet. Sieben, schau es dir an. Und hier ist es ganz oben. Kannst du sehen, wenn du auf die Startseite klickst, gehst du zurück nach Hause und klickst dann auf den Blog, Block. Und jetzt sind wir auf der Blog-Seite. Wir können genauso gut zur Startseite zurückkehren. Alles funktioniert wie erwartet einwandfrei. Als Nächstes geht es darum, das dynamische Crowding-System zu implementieren Wenn du zum Beispiel Localhost verwendest deinen Blog-Slash 800 Jetzt konnten wir den Block-Beitrag an die Detailseite weitergeben den Block-Beitrag an die Detailseite weitergeben Das ist also genau das, was wir tun wollen, oder? Wenn du also zum Beispiel zur Seite „Blockieren“ zurückkehrst und auf „Beitrag blockieren“ klickst, sollten wir in der Lage sein, den ersten Blockbeitrag an eine neue Seite zu übergeben . Wir müssen die URL nicht manuell in die Adressleiste eingeben . In Ordnung, ich habe wirklich zu viel geredet. Aber es ist zu deinem eigenen Besten. der Blockseite tun müssen, Was wir jetzt auf der Blockseite tun müssen, ist die dynamische Crowd zu implementieren. Wir haben den Link oben bereits importiert. Also genau hier, was wir tun sollten, ist einfach. Markiere diesen Typen und schneide ihn dann ab, das ist der innere HTML-Text. Und dann werden wir einen Link wie diesen haben. Dann dieser Link, der H REF, der die Hypertext-Referenz ist Schrägstrich, Block, Schrägstrich eins. Und dann fügen wir hier den ersten Blockbeitrag ein. So einfach ist das. Wenn Sie jetzt auf Beitrag 1 blockieren klicken, wird eine neue Seite mit Beitrag 1 blockieren geöffnet. Genau so implementiert man einen dynamischen Link. Jetzt müssen wir den Link kopieren, die Zeilen 18 bis 20 hervorheben und die Kopie markieren. Komm her. Markieren Sie den inneren HTMA-Text, wischen Sie ihn ab und lassen Sie dann diesen Typen Aber jetzt müssen wir die ID auf zwei und den Blockbeitrag ebenfalls auf zwei ändern zwei und den Blockbeitrag ebenfalls auf zwei Und so weiter und so fort. Also kannst du den Rest selbst erledigen weil du ein kluger Kerl bist. Natürlich kannst du es tun. Drei, hier werden drei sein. In Ordnung, um deine Zeit nicht zu verschwenden. Ich muss nur speichern, zurück zum Browser gehen und mal sehen, was wir an Bord haben. Lass es uns versuchen, indem wir auf Beitrag blockieren klicken. Schau es dir an. Da steht Datos-Seite mit der ID eins Schauen Sie sich die URL an, blockieren Sie den Schrägstrich eins, und jetzt ist es uns gelungen , die ID eines Haares weiterzugeben Das ist so nett. Wenn Sie also auf Beitrag zwei blockieren, Datenseite mit der ID von zwei und so weiter und so fort. Etwas sehr Wichtiges , das ich mit Ihnen teilen möchte , sind die Ersatzsonden Also hier, lasst uns den Code schnell formatieren. Also gut, er hat jetzt eine sehr schöne Form. Also hier kann ich so etwas wie ersetzen machen. Okay? Lassen Sie uns beim Speichern das Verhalten der Replace-Sonden überprüfen . Dieser Typ Geh zurück zum Browser. Probieren Sie es jetzt aus. Wir klicken auf Beitrag eins blockieren. Es öffnet sich eine B Dt-Seite mit der ID eins. Also gehst du zurück. Blockieren Sie den zweiten Beitrag. Hier haben wir die ID eines zweiten Beitrags. In Ordnung. Klicken wir nun auf Beitrag drei blockieren. Ich möchte, dass du das Verhalten bemerkst. Wenn ich hier auf diesen Typen klicke, siehst du das? Es schickt uns zurück zur Startseite. Okay. Also Blog-Seite. Wenn Sie auf den ersten Blogbeitrag klicken , gelangen Sie zurück zur Blogliste. Und wenn Sie dann auf den zweiten klicken und zurückgehen, gelangen Sie zurück zur Seite mit der Blogliste. Wenn Sie jedoch auf den dritten Beitrag klicken zurückgehen, werden Sie zur Startseite zurückgeleitet. Genau das macht die Replace-Requisite. Probieren Sie es aus. Ich klicke. Siehst du, es schickt uns zurück zur Startseite. Das ist vorerst deaktiviert, und in der nächsten Vorlesung werden wir besprechen, wie man einen Link bedingt stilisiert 22. Bedingte Links: Willkommen zurück im Unterricht. In der vorherigen Vorlesung haben wir gelernt, wie man die Navigationslinks implementiert. Wir werden den Link anhand der Bedingungen stilisieren. Wenn Sie sich zum Beispiel diese wunderschöne Portfolio-Website ansehen, werden Sie feststellen, dass wir uns direkt auf der Startseite befinden, und genau aus diesem Grund ist der Home-Link hervorgehoben, weil die URL aktiv ist Wenn Sie auf das Portfolio klicken, wird außerdem der Portfolio-Link hervorgehoben, einfach weil das URL-Portfolio aktiv ist. Wenn Sie hier auf Über mich klicken, ist es genauso, einfach weil die URL aktiv ist, wird der Link als ausgewählt markiert. Genau das wollen wir unserer Demo-Anwendung implementieren. W im Projekt C und B , um den Explorer zu öffnen. Lassen Sie uns es auf der Registerseite implementieren. Genau hier müssen wir auf das Layout klicken. Natürlich wissen Sie, dass das vergessene Passwort, der Login und das Register definitiv in das Layout aufgenommen werden würden. Klicken Sie nun auf das Layout, um den Explorer zu öffnen und dann zu schließen. Das erste, was ich hier tun werde, ist, die Metadaten hervorzuheben und dann einen Kommentar zu ihnen zu platzieren. Nachdem wir das oben gemacht haben, werden wir den Link aus dem nächsten Schrägstrich importieren. Jetzt werden wir den Pfadnamen für die Verwendung importieren. Der US-Pfadname wird dazu beitragen, die aktive UR gut zum Stillstand zu bringen. Wenn es die aktive UR zum Stillstand bringt, könnten wir die URL dann extrahieren und anders stilisieren U-Pfadname ist natürlich ein Hook, und er kommt von der nächsten Slash-Nation Nachdem wir das alles getan haben, wollen wir schnell etwas tun. Nochmals, sehr wichtige Dinge , die Sie hier mitnehmen müssen , ist, dass wir alle unsere Links innerhalb eines Arrays lesen wollen . Danach müssen wir es nur noch kartografieren. Genau so erstellt man eine Anwendung wie ein Profi. Fangen wir mit einer Konstante an. Lassen Sie die Verknüpfungen gleich, öffnen und schließen Sie das Array, und dann haben wir innerhalb des Arrays das erste Objekt Wir werden es Namen nennen. Der Name wird registriert werden. Dieser wird die innere HTM-Atmosphäre sein. Es wird der Text sein , der den Link definiert. Jetzt werden wir einen Hauptschiedsrichter haben. Außerdem müssen wir den Head-Ref auf Slash-Register setzen. wir wissen, dass wir hier im Projekt eine Route namens Register Wir zielen auf diese Route ab. Jetzt ist die nächste Zeile hervorzuheben, zweimal dupliziert. Hier werden wir uns einloggen. Und es wird Slash Log in sein. Natürlich werden wir hier das Passwort vergessen machen . In Ordnung. das getan haben, stellen Sie sicher, dass Sie es in Kleinbuchstaben ändern , da es genau dem entsprechen sollte, was wir hier haben. Der beste Weg, dies zu tun, besteht darin, mit der rechten Maustaste zu klicken und dann umzubenennen. Kopieren Sie den Namen, und hier können Sie einfach genau den Namen der Route einfügen . Ups, schau mal Wir müssen eine Kamera darauf platzieren. Wir haben das getan. Lassen Sie uns alle Dinge hier kartografieren und sie auf dem Bildschirm anzeigen lassen. Direkt unter der Tu Ren werden wir öffnende und schließende Ci-Klammern haben , sodass wir Java-Scrypt und solche Herde aufnehmen können Java-Scrypt und solche Herde Jetzt machen wir Nav-Links, Punktkarten. Dann werden wir den Link aufnehmen. Dieser Typ hier repräsentiert jeden Link in der RA. Stellen Sie ihn auf eine R-Funktion, öffnen und schließen Sie die Co-Klammer. Und innerhalb werden wir die Benutzeroberfläche zurückgeben. Eltern öffnen und schließen, innerhalb der Elternschaft werden wir Das H REF, das ist die Hypotex-Referenz, wir werden Auch hier müssen wir den Schlüssel angeben, da wir die Zuordnung über ein Element Der Schlüssel wird Link Dot Name sein. Wir können den Namen verwenden, um jedes der Dinge hier eindeutig zu identifizieren. Wir haben uns registriert, angemeldet und das Passwort vergessen. Ich fühle mich gut. Lass uns schnell den Link schließen, gleich hier, gib dir einen Klassennamen. Wir müssen den Namen wiedergeben. Also werde ich Link Dodds Namen verwenden. Speichern und checken Sie den Browser aus. Das hier. Beobachten Sie es oben genau. Kannst du es sehen? Wir haben das Register, das Login und das vergessene Passwort. Wenn Sie jetzt auf Anmelden klicken, werden wir zur Anmeldeseite weitergeleitet. Wenn Sie auf Passwort klicken, werden wir zur Passwortseite und können auch zur Registrierungsseite zurückkehren . Wunderschön. Ich möchte, dass du dich an die Absicht erinnerst. Die Idee ist, den Link als ausgewählt zu markieren , wenn Sie darauf klicken. Wenn Sie auf einen Link klicken, möchten wir, dass er aktiv bleibt. Wenn Sie beispielsweise auf Passwort vergessen klicken, möchten wir, dass das vergessene Passwort hervorgehoben wird , da es hier in der URL aktiv ist. Lass uns das schnell mit Hilfe des US-Pfadnamens machen. Der verwendete Pfadname ist ein Hook. Wir müssen ihn aufrufen. Lass es uns gleich hier machen. So wie wir es hier versucht haben. Der Use-Pfadname ist ein Hook, den wir aufrufen müssen. Benutze den Pfadnamen und das ist natürlich eine Funktion. Dann werden wir es in einer Konstante speichern. Cs-Pfadname equ verwendet den Pfadnamen. Jetzt wird der Pfadname die aktive URL speichern. Jetzt haben wir die aktive URL im Pfadnamen gespeichert . Wir müssen davon Gebrauch machen. Wenn du hier runterkommst, sollten wir tun, dass C aktiv ist. Pfadname Punkt, innerhalb des Use-Pfadnamen-Hooks haben wir eine Methode namens start with Jetzt akzeptieren wir eine Methode namens start with. Und dann werden wir einen Link zu HREF erstellen. Jetzt erhalten wir nicht die aktuelle URL Wir müssen den Link nur bedingt stilisieren, basierend auf der Es ist ziemlich einfach, das zu tun. Im Classme hier drüben ersetzen wir das durch die C-Klammer, weil wir dazwischen eine Menge Java-Skripte machen Wenn es aktiv ist und wahr ist, werden wir dafür sorgen , dass der Text den Text gelb 400 hat Wir können dann die Schrift in Serifenschrift ändern. Lass es uns ein bisschen fett machen. Vorderes Armaturenbrett. Sie können es stilisieren und es an Ihrer Seite besser aussehen lassen, so wie es Ihnen passt Sonst, was machen wir? Wir geben dir die Schriftfarbe Blau, vier Hundert. Wenn Sie die Anwendung speichern, checken Sie den Browser aus. Hoppla, entfernen Sie das Diagramm auf dem Knoten. Ordnung, Leute. Lass mich dir etwas in der Konsole zeigen. Können Sie den Fehler sehen, dass die Verwendung des Pfadnamens nur in der Client-Komponente funktioniert. Standardmäßig läuft next gs auf der Serverseite. Wenn Sie Hooks verwenden möchten , müssen Sie vom Saver-Side-Rendering zum Client-seitigen Rendern wechseln Saver-Side-Rendering zum Client-seitigen Rendern Das ist extrem einfach. Wenn Sie das einfache Anführungszeichen eingeben, werden wir **** verwenden. So einfach ist das Sie können es mit der Sem-Spalte beenden, wenn Sie möchten. Wenn Sie erneut speichern, schauen wir uns an, was wir jetzt haben. Ordnung. Schauen wir es uns im Browser an. Und das sind sie. Aber bevor wir mit der Demo fortfahren, möchte ich Ihnen etwas sehr Wichtiges zeigen. Wenn ich die Seite in der unteren linken Ecke des Bildschirms neu lade , wird die Fehlerwarnung angezeigt. Wenn Sie zum Öffnen klicken, wird angezeigt, dass Testinhalt nicht mit dem vom Server gerenderten HTML-Code übereinstimmt Hinter den Kulissen stimmt etwas nicht. Gehen wir zurück zum Code. W im Layout, das TSS. Wir müssen etwas tun. Wir ziehen das HGM hier drüben aus. Zieh es aus. Lassen Sie uns hier den Körper durch ein Fragment ersetzen. Sie müssen also nur den Körper markieren und dann D befehlen, um ihn mehrfach auszuwählen ihn zu löschen. Speichern Sie die Anwendung Schauen wir uns schnell den Browser an. Laden Sie neu und der Fehler ist weg. Wenn Sie den Bildschirm genau beobachten, werden Sie das Anmeldeformular und das Passwort vergessen sehen Versuchen wir es, indem wir auf „Anmelden “ klicken. Kannst du sehen, wenn du klickst? In der Adressleiste werden Sie nun feststellen, dass die Anmeldung derzeit aktiv ist. Dafür muss dies hervorgehoben werden. Wenn Sie auf das Passwort klicken, wird die URO außerdem aktiv und hier wird sie ausgewählt. Es ist hier aktiv und so weiter und so fort, registriere dich, logge dich ein, habe das Passwort vergessen. 23. Fehlerseite (Spezialdateien): S. Unsere Anwendung funktioniert einwandfrei, wenn Sie zu localhost, 3.000 Schrägstrich, Blog, s, Schrägstrich, Kommentare, Schrägstrich eins, navigieren s, Schrägstrich, Kommentare, Schrägstrich eins, Und das bringt uns zu dem Punkt, an dem wir die Kommentare für einen Blogbeitrag haben Sie alle wissen also, dass manchmal ein Fehler in Ihrer Anwendung auftreten kann, oder? Gehen wir also davon aus, dass Sie versuchen, den ersten Kommentar dem ersten Beitrag zuzuordnen. Und so stoßen Sie einfach auf einen Fehler. Um dieses Beispiel zu demonstrieren, müssen wir selbst einen Fehler in der Anwendung erstellen. Öffnen Sie den Explorer und dann die Blogbeitrags-ID, die Kommunikation und die Empfehlungs-ID Öffne diesen Typen, Befehl B, um ihn zu schließen. Lassen Sie uns jetzt schnell einen Fehler erstellen. Hier werden wir eine Funktion haben. Holen Sie sich ein zufälliges. Ich werde mal zählen. Was wir also tun sollten , ist Matt Dot Flow zurückzugeben. Dies ist nur ein grundlegendes Java-Skript, das Sie kennen sollten. Dann Matt Dot Random Beautiful. Nachdem du das getan hast, komm her. Lassen Sie uns das Zufällige schnell als Konstante speichern. Const Random ist gleich, erhalte Random. Genau hier werden wir den Fehler auslösen. Wenn random gleich eins ist, werden wir einen neuen Fehler auslösen. Fehler beim Laden dieses Kommentars. Jetzt sind wir damit fertig. Lass es uns schnell im Browser überprüfen. Lass uns neu laden Und wir haben es hier, Fehler beim Laden dieser Kommentare. Mit diesem Fehler wollen wir herausfinden, wie wir in Zukunft mit einem Fehler umgehen können , wenn ein Fehler auftritt. Nehmen wir zum Beispiel an, jemand besucht Ihre Website und versucht, etwas zu verarbeiten. Plötzlich taucht ein Fehler wie dieser auf. Die Person wird sofort das Vertrauen in diese Website verlieren. Okay? Wenn also innerhalb des Projekts ein Fehler auftritt, sollten wir in der Lage sein, diesen Fehler zu beheben, ohne die Anwendung zu unterbrechen. Denn genau hier ist die Anwendung kaputt. Selbst wenn Sie neu laden, schauen Sie, die Anwendung ist kaputt Das ist also nicht professionell. Das Beste, was wir tun sollten, ist, diesen Fehler zu erfassen und ihn dann auf der Benutzeroberfläche anzuzeigen, damit die Benutzer eine bessere Erfahrung machen können. Genau so können wir diesen Fehler professionell behandeln. Also gehst du zurück zum VS-Code. Öffne den Explorer. In der Kommentar-ID, dieser Typ, klicken Sie mit der rechten Maustaste. Neue Datei. Wir werden diesen Fehler Dot TSX nennen innerhalb des Fehlerpunkts TSS Lassen Sie uns innerhalb des Fehlerpunkts TSS schnell die Fehlergrenze erkennen RFC zur Generierung der Funktionskomponente. Aber dieses Mal werden wir es Fehlergrenze nennen , einfach so Und dann werden wir hier auf der Benutzeroberfläche ein He-One-Tag haben. Darin werden wir also ein H-One-Tag haben und dann werden wir einen Fehler in der Kommentar-ID machen. Also müssen wir von der Serverseite zur Client-Seite wechseln. SF wieder im Browser, in Ordnung. Jetzt heißt es Fehler in der Befehls-ID. Als wir zuvor einen Fehler in unserem Projekt implementiert haben, die gesamte Anwendung kaputt gegangen, und dann haben wir den nervigen Fehler auf dem Bildschirm gesehen. Das ist eine sehr schlechte Erfahrung für Ihre Benutzer. Okay? Sie besuchen zum Beispiel die Website, um etwas zu kaufen, und plötzlich ist die Website kaputt und Sie sehen überall rote Linien, einen Fehler beschweren Ich glaube, Sie werden das Vertrauen in diese Website verlieren. Der beste Weg ist also, den Benutzern den Fehler auf sehr professionelle Weise zu präsentieren . Und genau das haben wir hier gemacht, okay? Sie können also zu Ihrem Projekt zurückkehren und den Fehler so anpassen, wie Sie es möchten, okay? Sie können also zum Beispiel den Klassennamen angeben dann P vier, Bg rot, sagen wir 200 machen . Text, es ist Excel, es ist Excel. Mal sehen, was wir jetzt haben. Neu laden, immer wieder neu laden. Dann sehen Sie einen Fehler in der Befehls-ID. Genau so behandelt man Fehler in den nächsten Schritten. Sie können den Fehler auch programmgesteuert anzeigen Wir haben hier eine Requisite namens Error, und die Requisite ist vom Nachdem wir das getan haben, müssen wir es hier auf der Benutzeroberfläche anzeigen Ich werde eine Fehlermeldung anzeigen. Wenn Sie speichern und im Browser auschecken. Beim Laden dieser Kommentare ist ein Fehler aufgetreten, und das Zeug kommt von diesem Ort genau hier. Wir bekommen die Fehlermeldung von hier. In Ordnung, das ist vorerst aus. Wir sehen uns beim nächsten Köder. 24. Vorlage vs. Layout: Vorlagendatei ähnelt einem Layout insofern , als sie jedes untergeordnete Layout oder jede untergeordnete Seite umschließt Im Gegensatz zu Layouts, die routenübergreifend bestehen und ihren Status beibehalten Vorlagen erstellen bei der Navigation für jedes ihrer untergeordneten Elemente eine neue Instanz . Dies bedeutet lediglich , dass der Status der Anwendung geändert wird , wenn Sie zu einer neuen Seite navigieren Um ein tiefes Verständnis dafür zu bekommen, wie die Vorlage funktioniert, müssen wir sie auf jeden Fall in die Praxis umsetzen indem wir sie mit dem Layout vergleichen. Lassen Sie uns es schnell implementieren. Befehl B, um den Explorer zu öffnen. In Ordnung. Also ich denke, wir sollten es innerhalb des Registers machen, welches die Erde ist, oder? Also lass uns etwas tun. Okay, also öffne das Oth und dann dieses Layout genau hier. Lassen Sie uns das implementieren, denn das vergessene Passwort, der Login , die Registrierung, alles wird in das Layout übernommen. Hintern. Wir benötigen Staaten in unserer Anwendung , um dieses Beispiel zu demonstrieren Lassen Sie uns schnell den verwendeten Hook von React zuordnen. Lassen Sie uns schnell die Variablen und die seta-Funktion deklarieren , um den Status zu aktualisieren Genau hier mache ich Cs impute Ca set impute. Und der Anfangszustand wird eine leere Zeichenfolge sein. Natürlich sollten Sie das ab React wissen. Nachdem wir dies getan haben, implementieren wir es schnell in das Projekt. Jetzt werden wir ein DF innerhalb dieser Dif haben, wir werden einen imputen Zug haben Geben Sie den Wert an. Der Wert wird imputiert. Bei Änderung, das heißt, wenn der Benutzer anfängt, in das Eingabefeld zu tippen, müssen wir Jetzt werden wir Zugang zu der Veranstaltung erhalten. Mit Hilfe des Ereignisses rufen wir die seta-Funktion auf, um den Anfangsstatus zu aktualisieren, und innerhalb der seta-Funktion müssen wir dann das Ereignis verwenden, um den Wert als Ziel festzulegen und abzurufen. Das ist ganz einfach Schließlich müssen wir die Impute mit einem selbstschließenden Tag schließen Geben wir ihm schnell einen Stil. Ein bisschen Stil, damit es schön aussieht. Klassenname, ich werde Gliederung machen. Wir möchten, dass die Ecke ein wenig abgerundet ist, also machen wir sie rund um SM. Nachdem wir das getan haben, schauen wir es uns schnell im Browser an. Jetzt machen wir Localhost drei und registrieren uns dann. Und jetzt kannst du die Schuld genau hier sehen. Okay. Lass uns etwas tun. Geben wir dieser Div-Klasse einen Namen. Geben wir die Polsterung auf vier an. Und gut. In Ordnung. Schau es dir an. Jetzt haben wir die Impute genau hier Lassen Sie uns schnell etwas in das Feld Impute eingeben. Dub digital. Ich möchte, dass Sie das Verhalten beobachten , wenn ich zur Anmeldeseite navigiere Also klicke ich auf die Anmeldeseite. Lass es mich dir zeigen. Wir befinden uns auf der Anmeldeseite. Schau, kannst du sehen, dass der Zustand nicht verändert wurde? Wenn Sie auch auf Passwort vergessen klicken, werden Sie feststellen, dass der Status ebenfalls nicht geändert wurde. Das Layout behält einen konsistenten Status innerhalb des Projekts bei. Können Sie sehen, selbst wenn Sie auf Anmelden klicken, wenn Sie auf Registrieren klicken, und der Status wird nicht geändert. Das ist der Zustand der Haare. Jetzt wollen wir das Layout durch die Vorlagen ersetzen, und dann können wir das Verhalten beobachten, um den Unterschied zwischen dem Layout und der Vorlage zu verstehen . Ordnung. Lass uns das schnell machen. C und B, um den Explorer zu öffnen. Was wir tun müssen, ist mit der rechten Maustaste klicken und dann umbenennen, das Layout löschen und dann werde ich template.tss machen Bum. Wir müssen ja dazu sagen. Speichern Sie das Projekt jetzt im Browser. Lass uns schnell neu laden. Alles cool Jetzt lass es uns versuchen und ich werde Duba digital machen Wenn Sie auf Anmelden klicken, sehen Sie, der Staat bei der Navigation zerstört ist Das ist genau der Unterschied zwischen der Vorlage und dem Layout. 25. Seite laden (Spezielle Dateien): Spezielle Dateien. Die spezielle Datei , mit der wir uns in dieser Vorlesung befassen werden, ist der Ladepunkt s. Der Ladepunkt S oder TSS hilft Ihnen dabei, eine aussagekräftige Ladeoberfläche mit React-Source-Pans zu erstellen aussagekräftige Ladeoberfläche mit React-Source-Pans Mit dieser Konvention können Sie einen sofortigen Ladestatus vom Server anzeigen , während der Inhalt eines Routensegments Der neue Inhalt wird automatisch ausgetauscht sobald der Rendervorgang abgeschlossen ist Wenn ein Benutzer beispielsweise auf einen Blogbeitrag klickt, dauert es einige Zeit bis der Beitrag abgerufen und auf dem Bildschirm gerendert wird Während Sie also weiter auf den Beitrag warten, sollten wir in der Lage sein, eine Ladeleiste zu erstellen, um dem Benutzer eine Art Antwort darauf zu geben dem Benutzer eine Art Antwort darauf , dass der Beitrag gerade abgerufen wird Jetzt öffnest du den Explorer. Lassen Sie uns es schnell in der Blockpose implementieren. Woad in den Block, Rechtsklick, eine neue Datei erstellen Und das wird heißen. Punkt TSX wird geladen. Sie können es Ladepunkt S nennen , je nachdem , was Sie verwenden Wenn Sie die Eingabetaste drücken, generieren Sie die Funktionskomponente. Lassen Sie uns schnell die Lade-Benutzeroberfläche entwerfen. Geben Sie ihm einen Klassennamen aus, und dann wird die Höhe 100 Vg sein. Der schlechte Boden BG, Gelb, 800. Hoppla. Das wird zu viel sein Machen wir 400 draus. In Ordnung. Nachdem wir das gemacht haben, werden wir im inneren HTML-Code des D ein H-Tag haben und dann werden wir laden. Lassen Sie uns auch schnell das H-One-Tag stilisieren. Text, es ist Excel. Text, blau, 100. Die Textfarbe ist blau, und dann müssen wir den Test zentriert ausrichten. In Ordnung, speichern Sie die Anwendung. Geh zurück zum Browser. Wenn wir also genau hier auf die Schlinge klicken, bevor die Blockseite geöffnet wird, werden Sie auf jeden Fall die Ladeseite sehen Schau es dir an. Es ist zwar ziemlich schnell, aber wir müssen es noch einmal machen. Ordnung. Genau darüber sprechen wir. 26. Website-Demo: Hier ist genau die Anwendung , die wir in diesem Kurs erstellen werden. Lass uns jetzt weitermachen. In der oberen linken Ecke des Bildschirms sehen Sie das Menü. Wenn Sie klicken, wird die Navigationsleiste geöffnet. Und wenn Sie mit der Maus über die Links fahren, werden sie hervorgehoben Wenn ich mit der Maus darüber fahre, wird das Portfolio über mich hervorgehoben und ich stelle mich ein Direkt darunter haben wir die Links zu den sozialen Medien, und alles funktioniert wie erwartet einwandfrei Wenn Sie auf Instagram klicken, können Sie tatsächlich meine Instagram-Seite öffnen. Sie können also auf das X-Symbol klicken, um es zu schließen. Ebenfalls oben haben wir den Header. In der Kopfzeile haben wir die Links. Es hat genau das gleiche Verhalten wie das der Navigationsschublade. Wenn Sie mit der Maus darauf zeigen, wird es hervorgehoben. Wenn du zum Beispiel klickst, wenn ich auf das Portfolio klicke Es wird problemlos zur Portfolio-Komponente gescrollt und dann wird dieser Link hervorgehoben. Schau es dir an. Siehst du, jetzt befinden wir uns in der Portfolio-Komponente und dieser Portfolio-Link hier ist hervorgehoben. Das Gleiche hier, und wenn du nach Hause zurückkehrst, ist es genau dasselbe Verhalten. Sag mir, sieht es nicht gut aus. Natürlich tut es das. Lass uns weitermachen. Am linken Bildschirmrand stehen mein Name und meine Firma. Außerdem haben wir den Projekt-Botin und den Button Get Resume Das Projekt-Butting macht genau das Gleiche mit dem Portfolio-Link Wenn ich auf das Projekt klicke, wird es auch problemlos zur Portfolio-Komponente scrollen Wenn ich auf die Schaltfläche „Lebenslauf abrufen“ klicke, wird mein Lebenslauf heruntergeladen. Schau es dir an Kannst du es heruntergeladen sehen? Lass es uns schnell überprüfen. Hier ist es. Wunderbar zurück zum Projekt. Hier haben wir das Profilbild. Ganz unten haben wir die Skew-Box. Lassen Sie uns schnell zur Portfolio-Komponente übergehen. Wenn ich auf das Projekt klicke, schau es mir an. Wunderschön. Wir haben die verschiedenen Projekte , an denen ich gearbeitet habe. Wir haben die Am Food Company, die Portfolio-Website für das nächste Jahr, das ist diese Website , die ich vorstelle, und so weiter und so fort Ich kann also auf jedes Kartenelement klicken , um es auf einer einzigen Seite zu öffnen Wenn ich jetzt auf dieser Karte weitergehe, wirst du dieses Symbol hier wie die Augen sehen. Klicken Sie hier, um sie zu öffnen, und hier ist die Portfolio-Detos-Seite. Das habe ich über das Portfolio zu sagen, die Beschreibung und das sind die Technologien, die ich verwendet habe Sehr interessant. Wenn Sie nach unten scrollen, können wir auf die Schaltfläche klicken , um das nächste Projekt anzuzeigen. Kannst du sehen? Schau es dir an. Wir können auch auf das vorherige Projekt klicken , um das vorherige Projekt anzuzeigen. Gehen wir schnell zurück zur Home-Komponente. Die nächste Endzeile ist die Komponente „Über mich“. Und das ist eine weitere interessante Komponente. Sieh so wunderschön aus. Wenn Sie mit der Maus darüber fahren, sehen Sie einen schönen Schwebeeffekt Kannst du diese wunderschöne Animation sehen? Die Frontend-Entwickler töten, Backend und so weiter und so fort. Sie können es auch mit dieser Schaltfläche direkt hier auf der Karte ändern . Schau es dir an. Nachdem wir dies getan haben, fahren wir mit der Testimonial-Komponente Sie können auch mit der Maus über das Testimonial wischen. Schließlich haben wir noch die Fußzeilenkomponente. In der unteren rechten Ecke des Bildschirms sehen Sie die Schaltfläche „C to Action“ Wenn ich klicke, geht es so zur Home-Komponente. Und jetzt bin ich dabei , eines der wichtigsten Features der Portfolio-Website vorzustellen , nämlich die HaM-Seite. Wenn Sie auf HiAME klicken, wird die HaE-Seite geöffnet Und hier haben wir diesen schönen Artikel. Und wir haben auch die Karten mit Ihrer Adresse, Ihrer Telefonnummer, E-Mail und Ihren Öffnungszeiten. Wenn ich jetzt auf das Kontaktformular klicke, wird es problemlos zum Abschnitt mit dem Kontaktformular weitergeleitet Schau es dir an. Perfekt. Lassen Sie uns nun damit beginnen, auf den gesendeten Bot zu klicken. Wenn Sie auf das gesendete Boarding klicken, werden Sie aufgefordert, die Felder für den Namen D auszufüllen , die Felder für den Namen D Für die E-Mail David at tm com. Für die Zahl gebe ich einfach eine Zufallszahl ein. Für das Thema würde ich sagen, das Testen der Website. Genau hier werde ich Folgendes tun . Nachdem ich das getan habe, möchte ich Sie aus Gründen der Übersichtlichkeit schnell in meinen Posteingang zurückbringen. Nachdem ich das getan habe, möchte ich Sie aus Gründen der Übersichtlichkeit schnell in meinen Posteingang zurückbringen. Genau hier muss ich erneut laden, weil ich möchte, dass alles transparent erscheint Kannst du jetzt sehen, ich habe nichts im Posteingang. Keine neue Nachricht. Gehen Sie zurück zur Website. Probieren wir es aus, indem wir auf die Schaltfläche Senden klicken. Ich klicke Es beginnt zu laden. Kannst du diese Ladeleiste hier sehen ? Die Nachricht wurde erfolgreich gesendet. Vielen Dank, dass Sie sich an eine D-Bar-Bar gewandt haben. Gehen wir zurück zum Posteingang und sehen, was wir haben. Jetzt klicke ich zum Öffnen. Das ist also die Nachricht von David. Sag mir, sieht es nicht gut aus? Natürlich tut es das. Natürlich können Sie David antworten, indem Sie hier auf die Antwortschaltfläche klicken , und die Konversation kann weitergehen. Lassen Sie uns die Anwendung schnell auf einem Mobilgerät testen. Siehst du, wunderschön. Sie können auf den Dienst klicken, um den Inhalt der Dienste hier zu öffnen, das Unternehmen, den herzlichen Link und all diese Tops. Sie werden lernen, wie man sie von Grund auf neu macht Schraubverschluss, die Navigationsschublade öffnen. Gehen wir zurück nach Hause. Wirf einen Blick darauf. Das ist super toll. Ordnung. Und wenn Sie auf die Schaltfläche C klicken, um zu handeln, Bum. Wunderschön. Sie können Ihre Summe herunterladen, wenn Sie möchten. Kannst du das sehen? Du lädst es einfach jetzt herunter. Sie können problemlos zur Portfolio-Komponente scrollen und sie sich hier ansehen. Ordnung. Nachdem wir das getan haben, schauen wir es uns auf dem iPad-Gerät an. Kannst du sehen? Das ist so nett. Das ist wunderschön. Kann zum Öffnen anklicken. Kann das Nest treffen, das Nest und so weiter und so fort. Kann wieder nach Hause gehen. Ich habe den Link zur Demo-Website direkt in die Beschreibung aufgenommen . Einfach, weil ich auch möchte, dass Sie selbst die Erfahrung machen , wie schnell und schön die Website ist. In der Tat haben Sie es verdient, gesehen zu werden. 27. Nodejs-Installation. Vs Code-Installation. Installation von VS-Code Extension: Erste Schritte mit der ultimativen Website für das nächste GS-Portfolio. In diesem Abschnitt des Kurses werden wir einige notwendige Installationen vornehmen , um loszulegen. Lassen Sie uns zunächst die Knotenversionen besprechen. Es ist klar, dass Sie vor der Installation, Reaktion oder dem nächsten GS den Node GS auf Ihrem Computer installiert haben müssen. Mein Rat an Sie ist einfach. Awats stellt sicher, dass Sie die neueste stabile Version herunterladen und installieren Du siehst den Kerl hier drüben. Es ist nicht für Sie und mich gedacht. Der Grund dafür ist , dass es zusätzliche Komplexität mit sich bringt , die Sie möglicherweise nicht bewältigen können wir also schnell die neueste stabile Version herunter und installieren Klicken Sie, dann laden wir es schon herunter und hier ist es. Klick. Lass uns weitermachen. Du musst alles durchgehen wenn du Zeit hast. Aber für mich muss ich einfach weitermachen. Dann stimme ich zu. Klicken Sie weiter auf das Installations-Board. Wenn Sie ein Mac sind, müssen Sie sich natürlich anmelden. Klicken Sie auf Sofa installieren. Erfolgreich installiert. Öffne das Terminal. Im Terminal müssen wir überprüfen und sicherstellen, dass wir den Knoten installiert haben. Ich werde nun Knoten V verwenden. Dadurch wird tatsächlich die Version von Node angezeigt , die wir gerade installiert haben. Drücken Sie auf die Taste. Jetzt haben wir die Knotenversion 18.17 0.0. Schließ es. Das nächste Mal muss ein Code-Editor installiert werden, und der Code-Editor, den ich im Kurs verwenden werde , ist der VS-Code. Fühlen Sie sich frei, einen beliebigen Code-Editor Ihrer Wahl zu verwenden. Aber für mich ist der VS-Code immer mein Favorit. Abhängig vom Betriebssystem, mit dem Sie arbeiten. Klicken Sie auf diesen Pfeil und installieren Sie dann für MAC Windows oder Lines. Genau hier arbeite ich an Mac OS. Ich muss es nur für MAC herunterladen. Ich habe es bereits installiert, also muss ich das nicht mehr tun. Sie müssen nur den VS-Code herunterladen und installieren. Nachdem wir das getan haben, öffnen wir schnell den Vs-Code. Er. Maximieren. Jetzt sind wir mit der Installation des VS-Codes fertig. Lassen Sie uns weitermachen, um die notwendigen Stecker zu installieren , die in Zukunft nützlich sein werden Extrem wichtig. Öffne die Erweiterung. W in der Setbox, wir machen uns auf den Weg. Reactive-React-Redock-Snippet. Hier ist es. Sie müssen klicken , um zu installieren. Dies ist eine Abkürzung, die uns helfen wird, einen Teil des Codes zu generieren. Wir müssen also nicht all diese Dinge von Grund auf neu eingeben . Keine Sorge, Sie werden das Wesentliche in Zukunft definitiv verstehen Habe diesen nicht installiert, schließ ihn. Auch hier werden wir Pi installieren. Klicken Sie hier, um es zu öffnen und dann zu installieren. Im Grunde hilft Predia dabei, Ihren Code so zu formatieren, dass er die richtigen Einrückungen Jetzt sind wir mit der Installation fertig, schließen Sie sie. Und sicherlich sind einige von Ihnen neugierig auf das VS-Code-Theme, das ich verwende. Mach dir keine Sorgen. Ich werde es auf jeden Fall mit dir teilen. Auch hier werden wir in der Seggenbox für Sie aufbrechen Öffnen hier klicken. Ich habe es bereits in meinem VS-Code installiert, also stellen Sie sicher, dass Sie es auf Ihrer Seite installieren. Dann das eigentliche Thema , das ich verwende. Lass es mich dir zeigen, klicke auf Farbthema festlegen. Ich verwende U D. Hier ist es, Sie können sich also entscheiden, eines dieser Themen hier zu verwenden. Sie sind alle fantastisch. Zuvor habe ich U Mirage benutzt. Aber jetzt benutze ich UDC. Stellen Sie also bitte sicher, dass Sie alle diese Stecker installieren, da dies in Zukunft äußerst hilfreich sein wird in Zukunft äußerst hilfreich Nachdem wir dies getan haben, fahren wir der nächsten Vorlesung fort, in der wir als Nächstes installieren werden. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert und pass immer auf dich auf. 28. Nextjs 13-Installationen: In dieser Vorlesung werden wir mit der Installation des nächsten S fortfahren, bevor wir mit der nächsten S-Installation fortfahren Stellen Sie sicher, dass Sie Ihren VS-Code neu starten. Der Grund dafür ist, dass wir in der vorherigen Vorlesung einige Plugins heruntergeladen haben. Damit diese Plugins funktionieren, müssen Sie Ihren VS-Code neu starten, und das habe ich auf meiner Seite getan. Nachdem Sie das getan haben, erstellen Sie schnell einen Ordner direkt auf dem Desktop. Klicken Sie auf, neuer Ordner. Ich werde diesen Ordner nennen. Portfolio. Ziehen Sie diesen Ordner per Drag & Drop in den Vs-Code. Beenden Sie die Arbeit an der Seite. Maximieren Sie den VS-Code und kontrollieren Sie die Bakterien, um das integrierte VS-Code-Terminal zu öffnen Oder du gehst zum obersten Mw-Terminal, neuen Terminal, und dann wird dieser Typ hier geöffnet Jetzt müssen wir mit der Installation fortfahren. Also werde ich Px, Create machen. Geben Sie ihm als Nächstes ein Leerzeichen s. Dieser Typ hier zeigt auf das Verzeichnis Portfolio, und dort wird das nächste S im Portfolio-Verzeichnis installiert. Drücken Sie die Enter-Taste , um es abzufeuern. Hier heißt es, möchten Sie Typoskript verwenden? Nein, wir verwenden kein Typoskript. Möchten Sie Ja-Links verwenden? Ja. T-Wind. Jep. Sie können der linken oder rechten Pfeiltaste zwischen Ja und Nein wechseln Möchten Sie das Quellverzeichnis verwenden? Jep. Möchtest du den Router benutzen Jep. Dann heißt es, möchtest du die Deft Import Allers anpassen Ich werde ja sagen. Nachdem ich das getan habe, drücken Sie die Enter-Taste, um es zu starten. Die Installation ist noch nicht abgeschlossen. Das würde definitiv eine Weile dauern. Ich muss die Vorlesung nur schnell vorspulen. Als Nächstes wurde es installiert, erfolgreich. Jetzt werden wir den Server laufen lassen. PM. Lauf D. Es ist die Enter-Taste, Boom. Jetzt wird der Server auf Localhost Port 3.000 geöffnet . Hier ist er Sie klicken auf den Link, um weitere Informationen zu erhalten, und hier ist er. So sieht die Deft next S-Anwendung aus. Lassen Sie uns den Code bereinigen. Gehe zurück zum VS-Code. Öffnen Sie die SRC-Seite. Lass uns das Terminal herunterfahren. Ich mache Common B, um den Explorer zu schließen. Lassen Sie uns aus Zeile 62 die Zeilen 110 hervorheben. Ich habe nicht alle hervorgehoben. Wir müssen es nur abwischen. Sicher. Außerdem wollen wir von dem Typen hier keinen Gebrauch machen. Du hast gesagt, geh zurück zum Browser. Im Browser ist nichts zu sehen. Common B zum Öffnen des Explorers. Wir müssen das globale CSS aufräumen. Klicken Sie auf BN und wählen Sie aus den Zeilen fünf bis zum Ende aus. Wischen Sie es ab. Im Browser speichern, hier ist es. Das ist vorerst aus. In der nächsten Vorlesung werden wir die notwendigen Einstellungen vornehmen. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert und pass auf dich auf. 29. Import und Einstellungen: Grundsätzlich möchte ich , dass jeder von uns genau das gleiche Ergebnis erzielt. In Bezug auf die Schrift, die Bilder, einschließlich des Stils. Öffnen Sie die Portfolio-Ressourcen. Am Ende würden die Portfolio-Ressourcen unter dieser Vorlesung platziert werden. Öffnen Sie die Portfolio-Ressourcen. Nun, hier sind einige der Ressourcen, die wir verwenden werden , einschließlich der Daten Öffnen Sie schnell die Portfolio-Bilder. Hier sind die Bilder und Mittel , die wir verwenden werden. Wenn Sie das Schriftverzeichnis öffnen, haben wir alle Rechte, die wir verwenden möchten. Wunderschön. Öffnen Sie jetzt das Portfolio-Verzeichnis. Öffne die Öffentlichkeit. Was wir tun werden, ist alles hier hervorzuheben, mit der rechten Maustaste zu klicken und zu kopieren. Komm her und füge ein. Wir müssen ersetzen, und wir müssen auch ersetzen. Dies sind nur die beiden Artikel, die wir ersetzt haben. Das nächste SVG und das Schiff SVG. Wir sind mit dem Import der Bilder und Schriften fertig. Eine weitere Sache, die wir tun werden. Mach das zu. Gehen Sie zurück zu den Portfolio-Ressourcen. Öffnet das nächste Verzeichnis. Jetzt haben wir den Google Fund. Gehe zurück zu VS Code. Öffne das nächste Modul. Scrollen Sie nach unten, und Sie werden beim nächsten Öffnen sehen. Lassen Sie uns den VS-Code minimieren. Was ich tun werde, ist diese Schrift direkt in das nächste Verzeichnis zu ziehen . Maximieren. Kannst du das sehen? Perfekt. Nachdem wir das getan haben, befinden uns immer noch in den Portfolio-Ressourcen. Öffnen Sie die Code-Ressourcen von MD. Wir werden den Weltstern kopieren. Halten Sie an den Linien 72. R klicken Sie auf Kopieren. Gehen Sie zurück zum VS-Code. Wir müssen auch das Knotenmodul schließen. Direkt im SRC finden Sie das globale CSS Klicken Sie zum Öffnen, Befehl V zum Einfügen. Dies ist der globale Stil, den wir überall in der USA verwenden werden. Natürlich ist dieser Typ hier für das blaue Häkchen verantwortlich , wenn der Link in der Kopfzeile angeklickt wird Dieser ist für das reibungslose Scrollen verantwortlich. Sie müssen sich also im Moment keine Gedanken über das Zeug machen. Es wird in Zukunft sorgfältig erklärt werden. Also sicher, schließen Sie es. Eine weitere Sache, die wir tun werden , ist die Einrichtung der Google-Mittel. Stahl in den Coderessourcen, mach MD, scrolle nach unten. Wir müssen das Zeug kopieren. Geh zurück zum VS-Code. Öffnen Sie den Layoutpunkt S. Wir wollen die Interfonds nicht verwenden. Wir importieren einen lokalen Fonds von at next Schrägstrich, Schrägstrich , Dieser Typ wird nicht mehr benötigt. Wisch es ab. Und jetzt werden wir einfügen. Nachdem wir dies getan haben, müssen all diese Mittel mit dem Projekt synchronisieren. Also hier, entferne den Inter und dann machen wir Pops. Okay. Alles ist cool. Also Freunde, bitte stellen Sie sicher , dass Sie alle Sachen korrekt importieren. 30. Projektstruktur: Anwendung, die mit Next S erstellt wurde und wie folgt reagiert , folgt dem komponentenbasierten Architekturansatz , der einfach impliziert, dass Komponenten einer der grundlegenden Bausteine jeder React-Anwendung sind der grundlegenden Bausteine jeder React-Anwendung In dieser Vorlesung werden wir die Struktur unseres Projekts anhand der bewährten Methoden definieren die Struktur unseres Projekts anhand der bewährten Methoden Auf dem Bildschirm befindet sich die Home-Komponente. Oben haben wir die Header-Komponente. Wenn Sie nach unten scrollen, haben wir auch die Komponente „Letzte Werke“. Es gibt etwas, das ich dir hier zeigen möchte. Wenn du innerhalb dieser Komponenten auf eine dieser Karten klickst , lasse ich sie dir zeigen. Es wird die entsprechenden Daten auf eine neue Seite übertragen eine neue Seite Wir können sagen, dass wir eine Portfolio-Datenseite haben, oder Sie können sie eine einzelne Beitragsseite nennen Dies wird uns in den nächsten Jahren die Augen für dynamische Routing-Systeme öffnen dynamische Routing-Systeme Geh zurück nach Hause. Wir haben bereits die Komponente „Aktuelle Arbeiten“. Jetzt haben wir die Komponente „ Über mich“. Wir haben die Testimonial-Komponente. Schließlich haben wir die Fußzeilenkomponente. Wenn Sie sich die untere rechte Ecke des Bildschirms ansehen, werden Sie sehen, dass das Auto zur Aktion aneinanderstößt, und auch das ist eine Komponente Wir können es in Zukunft zu einer wiederverwendbaren Komponente machen. Wenn ich auf das Auto klicke, um aktiv zu werden, wird es problemlos zur Home-Komponente scrollen Hier ist es. Wunderschön. Und wenn ich auf H i am klicke , öffnet sich auch eine neue Seite. Wir können also sagen, dass wir zwei verschiedene Seiten in dieser Anwendung haben, und wir werden sehen, wie viele Komponenten wir hier haben. Die Header-Komponente ist eins, dann ist die Home-Komponente zwei, drei, vier, fünf, sechs. In der unteren rechten Ecke des Bildschirms befindet sich die Warenkorb-Action-Komponente. In der oberen linken Ecke des Bildschirms befindet sich jetzt die Komponente zum diagonalen Zeichnen. Die Komponenten zum diagonalen Zeichnen befinden sich auch in den Header-Komponenten. Nachdem wir all dies gesagt haben, erstellen wir nun die entsprechenden Ordner, die diesen Komponenten zugeordnet werden. Öffnen Sie den SRC direkt im App-Verzeichnis, klicken Sie mit der rechten Maustaste auf einen neuen Ordner, und wir nennen ihn Komponenten Klicken Sie innerhalb der Komponenten mit der rechten Maustaste auf einen neuen Ordner. Wir werden das Header-Verzeichnis für die Header-Komponente erstellen . Gewinnen Sie die Komponenten, wir haben die Home-Komponente. Klicken Sie erneut mit der rechten Maustaste, neuer Ordner. Wir haben den Abt M, wir haben die Slider-Karte, und die Slider-Karte wird der Portfolio-Komponente zugeordnet Lass es mich dir zeigen. Das ist die Portfoliokomponente, also all das Zeug hier. Das ist gut. Auch hier sind wir in den Komponenten Neu, der Kontaktkomponente. Wir werden die Corto-Action-Komponente haben. Lass es mich dir zeigen. In der unteren rechten Ecke des Bildschirms sehen Sie das Corto-Action-Butting Wenn ich auf diese Schaltfläche klicke, wird ein flüssiges Scrollen zur Home-Komponente ausgeführt, und hier ist Wunderschön. Wenn Sie nach unten scrollen, erscheint die Schaltfläche. Schließlich werden wir die F-Komponente haben. 31. Einrichtung des Heimlayouts: Willkommen zurück im Unterricht. In dieser Vorlesung werden wir die Home-Komponente entwerfen. Öffnen Sie schnell die Komponente und klicken Sie in diesem Verzeichnis rechten Maustaste auf eine neue Datei. Wir werden eine Komponente namens Home Component Dot Gs erstellen . Wenn Sie das React Native React Redox Snippet haben und Sie RR von C ausführen, sollten Sie in der Lage sein, die funktionale Komponente zu generieren Wunderschön. Nachdem wir dies getan haben, rendern wir die Komponente schnell auf der übergeordneten Seite, und hier ist die übergeordnete Seite. Zum Öffnen hier klicken. Ganz oben. Wir müssen die Home-Komponente aus der Home-Komponente der Home-Komponente der Komponente importieren . Das ist einfach. Dann müssen wir es hier rendern. Sf. Mal sehen, was im Browser passiert, und hier ist die Home-Komponente. Wunderschön. Lassen Sie uns mit der Gestaltung der Home-Komponente fortfahren. Common B, um den Explorer zu schließen. Wir werden keinen übergeordneten Knoten verwenden, nur weil wir keinen zusätzlichen Knoten in unserem Baum haben wollen. Wischen Sie es ab. Was wir verwenden werden, ist React Fragment. Gut. Gewinnt das Fragment, wir werden eine DVD haben, ihr eine ID geben, nach Hause gehen, die DF schließen Lassen Sie uns das Layout erstellen. Hier werden wir einen Inline-Stale haben. Der lineare Farbverlauf des Hintergrundbilds. Wir wollen es um 62 Grad drehen und die Farbe von links wird zu 50% Null sein. Platziere genau hier ein Koma. Wir geben ihm eine Mindesthöhe von 500 Pixeln. Trennen Sie es mit dem Koma, die maximale Höhe wird 1.200 Pixel betragen Du musst es durch das Koma trennen. Geben wir die tatsächliche Höhe an, Höhe beträgt 100%, die Breite 100%. Wenn Sie im Browser speichern, hier ist es. Wunderschön. 32. Entwurf für Haushaltsgegenstände: In der vorherigen Vorlesung ist es uns gelungen, das Layout einzurichten. In dieser Vorlesung werden wir mit dem Design fortfahren. Wo im VS-Code werden wir als Erstes die hintere Schrift importieren Ich werde importieren. Es ist ein benannter Export. Wir werden einen Hinweis vom nächsten Schrägstrich mit Schrägstrich von Google geben. Dann mache ich hier const int equ, Hind. Wir im Objekt, wir werden die Teilmenge haben. Wir werden das Lateinische haben, getrennt durch das Komma Ups. Okay. Gut. Das was 300400500600 und zuletzt 700 Hoppla. Schau mal Ordnung. Wir sind mit der Einrichtung der Schrift fertig. Lassen Sie uns mit dem Design fortfahren. Hier haben wir ein D, geben ihm einen Klassennamen. Wir wollen, dass diese DVD auf allen Plattformen ansprechbar ist. Dafür werden wir es zu einem Container machen. Dann stell dir vor, wir stellen es auf Auto. Wenn Sie das CSS-Äquivalent sehen möchten, müssen Sie natürlich nur den Mauszeiger über die Utility-Klasse R W in der Intellisens. Sie werden das CSS-Äquivalent sehen . Wenn Sie auf Ihrer Seite nicht über die Intellisens verfügen, müssen Sie nur den Explorer öffnen Klicken Sie dann auf Erweiterungen. W im Suchfeld suchen Sie nach Tail Wind Intellisens Und hier ist es. Ich habe es schon installiert. An Ihrer Seite müssen Sie nur die installierte Taste drücken. Wie Sie hier sehen können, ist die installierte Schaltfläche deaktiviert. Aus diesem Grund können Sie sehen, dass es deinstalliert ist. Installieren Sie die Rückenwind-Intellisens und lassen Sie uns gemeinsam Spaß haben Schließ es. Stellen Sie sicher, dass Sie auch sicher sind. Schließen wir den Explorer. Wir werden eine weitere DF haben, gib ihr einen Klassennamen. Wir werden es ein Raster anzeigen lassen. Die Spalte mit der Rastervorlage ist 12. Jetzt haben wir einen anderen DF, einen Klassennamen. Stellen wir die Hintergrundfarbe auf Weiß ein. Wir werden Flex anzeigen lassen, Flex-Richtung ist Spalte. Begründen Sie den Inhalt in der Mitte. Die Spalte mit der Rastervorlage hat den Wert 12. Lassen Sie uns es auf einem mittleren Gerät stilisieren. Auf einem mittleren Gerät hat die Spalte für die Rastervorlage den Wert fünf. Schließlich möchten wir für dieses D auf einem mittleren Gerät, dass der Hintergrund transparent ist. Sei transparent. Mach es zu. Gut. Lassen Sie uns den Code schnell formatieren , um die richtige Einrückung zu erhalten. rechten Maustaste. Formatieren Sie die Breite des Dokuments. Priya. Kannst du sehen? Perfekt. Ich liebe das. Wann hat Deve, werden wir noch einen Deve haben? Margin wird es sein. Damit wird alles, was wir in diesem DF haben , zentriert. Damit wird das DF auf allen Plattformen reagieren . Unterricht ist gut, schön. Noch ein Df. Bei großen Geräten beträgt die verbleibende Polsterung 24, was in tatsächlichen CSS-Entsprechungen sechs m beträgt. Auf einem kleinen Gerät beträgt die verbleibende Polsterung zehn. die Somit wird die tatsächliche verbleibende Polsterung gleich Null sein. Die Polsterung oben und die Polsterung unten sind 20. Zahlen Sie auf mittelgroßen Geräten Null. Die Polsterung oben und die Klopfunterseite werden gleich Null sein. Auch bei Geräten mittlerer Größe wird der Test auf Start ausgerichtet Außerdem müssen wir es zentriert ausrichten. Gut. Jetzt werden wir ein P-Tag haben. Lass es mich dir zeigen. Das ist das P-Tag hier, die ID D. Im inneren HTML-Code mache ich das. Gib ihm einen Klassennamen. Aber jetzt werden wir die String-Interpolation verwenden. CO-Klammer öffnen und schließen, innerhalb der C-Klammer das hintere Häkchen öffnen und schließen Übrigens befindet sich das B-Häkchen in der oberen linken Ecke der Tastatur, direkt unter der Escape-Taste. Hier müssen wir testen. Die Testfarbe wird hellblau sein. Wir werden 47 A EDE haben. Nehmen wir an, schauen Sie es sich an und hier ist es. Wunderschön. in T wind Css Wenn Sie in T wind Css einen benutzerdefinierten Stil implementieren möchten, müssen Sie nur die eckigen Klammern öffnen und schließen und dann innerhalb der Klammer tun, was Sie wollen. Testen Sie Excel. Dies wird der Schriftgröße und den Zeilenhöhen zugeordnet. Auf mittelgroßen Geräten, Test d b. Auf dem großen Gerät wird der Test Text zwei Excel sein. Wenn Sie im Browser speichern, gut. Kannst du sehen? Aber das Problem dabei ist, dass wir diese Schrift nicht verwenden wollen. Dafür werden wir die Schrift hier haben. Ich werde einen Hinterpunkt-Klassennamen machen. Wenn Sie speichern, schauen Sie es sich im Browser an und bumm. Etwas hat sich geändert. Ich liebe es. Also, die Nistlinie ist das. Wir werden es mit dem Hedge One Tag implementieren. Nach dem abschließenden P-Tag werden wir ein Hedge-Tag haben. Geben wir diesem Hedge einen Klassennamen. Geben wir die Farbe des Tests an. Die Schrift wird rechteckig schwarz sein. Die Testgröße. Machen wir fünf Excel draus. Auf einem mittleren Gerät wird die Schriftgröße fünf Excel betragen. Auf einem großen Gerät wird die Schriftart sieben Excel sein. Auf einem extra großen Gerät. Der Test wird auch Text sein, sogar Excel. Die Marge tb wird fünf sein. Bei Geräten mittlerer Größe wird die Marge tb bei drei liegen. Was in dem He-eins-Tag, wir werden tun, ich bin ein H-Sechs. Wenn du gespeichert hast, sieh es dir an und los. Wunderschön. Nach dem He-One-Tag werden wir einen H-Two-Tag haben. Wir werden das tun, um das ND-Zeichen und einen Instruktor zu haben . Das ist vorerst das Ergebnis. Schauen wir es uns auf dem Mobilgerät an. Schau es dir an. Es reagiert auf allen Plattformen extrem schnell. Wunderschön. Gehen wir schnell zum Code zurück. Lassen Sie uns einem Klassennamen das H geben. Die Testfarbe wird hier genau dieselbe sein. Kopieren und einfügen. Oben legen und unten tätscheln, das sind zwei Die Schrift wird fett gedruckt sein, und dann werden wir sie verändern oder verbessern lassen. Auf mittelgroßen Geräten. Der Test wird x l sein, also werden die Zeilenhöhe und die Schriftgröße 1,25 RAM betragen Ich denke, das ist alles für das H-Two-Tag. Eine weitere Sache, die wir tun werden, ist die String-Interpolation zu verwenden Einfach so. Dann Bati Bati Gewinnen Sie den Bati, wir müssen diese Schriften kopieren , hervorheben und einfügen Wenn Sie im Browser speichern, haben wir dieses Resort Ich liebe alles. Die nächste Zeile ist die Implementierung der Butings. Um die Batings zu implementieren, werden wir das A-Tag verwenden Nach dem abschließenden H-Two-Tag werden wir ein A-Tag haben Aber im A-Tag werden wir Projekte machen. Geben wir den Klassennamen an. Dieses Mal werden wir die Zeichenketteninterpolation verwenden , da wir Mittel verwendet haben Wir werden es im Zeilenblock haben, im Hintergrund, wir werden diesen Hintergrund verwenden Alles für den Übergang. Die Dauer der Transaktion, mach sie auf 300, und die Animation wird ein- und ausgeblendet Wir wollen, dass die Grenzen der Verschraubung etwas kurvig sind Ich werde abgerundetes Excel machen. Der Test innerhalb der Verschraubung wird Witz sein. Oben zusammenlegen und unten trennen, dann werden es drei sein. Außerdem werden es fünf sein, wenn man nach links klopft und sich nach rechts verabschiedet Wenn du dir jetzt die beiden ansiehst, hast du so etwas Wunderschönes Das gefällt mir. In Ordnung. Wir machen Fortschritte. Mir ist gerade etwas aufgefallen. Mir gefällt nicht, wie kurvig die Grenzen sind. Also lass uns wieder hierher gehen. Das abgerundete, machen wir es zu einem abgerundeten G. dem abgerundeten G wird der Randradius 0,5 RAM betragen. Wenn Sie im Browser speichern, ist dies genau das erwartete Ergebnis. Die Schrift wird fett sein, der Rand oben, machen wir sie achtsam Wir werden es transformieren oder kaschieren lassen. Hier ist es. Lassen Sie uns es jedoch noch einmal schnell auf Mobilgeräten stilisieren Bei mittelgroßen Geräten werden die Polsterung unten und die Polsterung oben zwei große Geräte sein , Auch bei großen Geräten die Polsterung links und die Polsterung rechts jeweils acht sein Lassen Sie uns die Testgröße auf Geräten der Mittelklasse reduzieren. Testen Sie Tab, Excel und ein großes Gerät. Text-Tag B. Ich glaube, wir sind mit der mobilen Reaktionsfähigkeit des Botin fertig . Eins noch Bei mittelgroßen Geräten wird die Margenobergrenze bei fünf liegen. Bei besonders großen Geräten wird der obere Rand bei zehn liegen. Schließlich müssen wir auch diesen Fonds nutzen. Dieser Fonds. Kopieren, herkommen und einfügen, sicher, und hier ist es. Wenn du jetzt auf dem Botin hängst, passiert nichts. Lassen Sie uns schnell den Hover-Effekt implementieren. Wenn Sie mit der Maus auf den Boden zeigen, möchten wir den Hintergrund ändern Wir werden BG machen. Oder auf Hova über Column Shadow Day LG Auf Hova übersetze Y one. Ich denke, das ist alles für den Hova-Effekt. Wenn Sie im Browser speichern, werfen Sie einen Blick darauf. Kannst du sehen, ich liebe das. Wenn du Hva benutzt, siehst du diesen schönen Effekt. Jetzt werden wir das A-Tag hervorheben und es dann duplizieren, oder Sie können Kopieren und Einfügen markieren Lassen Sie uns diese nun in meinen Lebenslauf ändern. Natürlich können wir mit der Hintergrundfarbe die Hintergrundfarbe ändern. Also weiter so, wir müssen auch die Hintergrundfarbe ändern. Ändern wir es auf hellblau. Denn wenn du den Browser speicherst und auscheckst, wirst du feststellen, dass dieser Typ hier schwarz ist, oder? Und noch etwas, zwischen diesen beiden Tasten ist kein Leerzeichen. Also, was ich hier machen werde , ist zu kommen und dann Mag links zu machen, zehn. Das ML, das ich so liebe, ist das von Messages Bs. Ein Recht. Ich rede zu viel. Wenn du speicherst und das hörst. Jetzt haben wir Platz zwischen den Schlagstöcken. Lassen Sie uns den Cursor als Zeiger angeben. C du speicherst. Schau es dir an. Gut. Jetzt siehst du diese wunderschöne Hand, die auf den Lebenslauf zeigt. Kopieren. Komm her. Und einfügen. Speichern. Lassen Sie uns nun die Funktion zum Fortsetzen des Herunterladens implementieren. Gewinnen Sie das A-Tag, wir spezifizieren die Hypotext-Referenz. HDF, ich werde einen Lebenslauf als PDF machen. Wir wollen, dass es herunterladbar ist. Ich werde EQU herunterladen. Wenn der Lebenslauf heruntergeladen wird, möchten wir diesen Namen und dann den Namen des Lebenslauf-PDFs anzeigen dann den Namen des Lebenslauf-PDFs CF, lass es uns überprüfen. Wunderschön, kannst du das sehen? Und er ist es. Perfekt. Ich liebe jedes bisschen von dem Zeug. Genau wo im Projekt. Wir werden das HRF implementieren. Er bewertet Equal, das Pfundzeichen und dann das Portfolio. Denn wenn wir auf diese Schaltfläche klicken, möchten wir zur Portfolio-Komponente weitergeleitet werden Derzeit haben wir die Portfolio-Komponente nicht. Aber in Zukunft, wenn wir die Portfoliokomponente erstellen, werden wir die ID der Portfoliokomponente auf genau dasselbe Wort wie bei einem H-Portfolio setzen der Portfoliokomponente auf . Wenn Sie dann auf diese Schaltfläche klicken, gelangen Sie problemlos zur Portfoliokomponente. Nach dem Schlusstermin war die Hintergrundfarbe weiß, ist Deve hier drüben Wir werden das Bild implementieren. Wir werden ein D haben und ihm den Klassennamen geben. Was im Klassennamen steht, nennen wir Span 12. Patent Top wird es sein. Wir möchten ein kundenspezifisches Polsteroberteil spezifizieren. Machen wir es auf ein T-Pixel, und das wird auf einem mittleren Gerät sein Auffüllen der oberen 50 Pixel. Auf einem mittleren Gerät soll die Hintergrundfarbe des Bildes transparent sein Die Grundfarbe des Balkens wird hellblau sein. das D schließen Lassen Sie uns das D schließen. Sorgen wir dafür, dass es auf der mobilen Plattform responsiv ist. Rufen Sie auf dem mittleren Gerät Span Seven an. Wobei das D, wir werden ein anderes D haben . Geben Sie den Klassennamen Machen wir es zu einem Container , damit wir es auf unseren Plattformen responsiv machen können. Dann wird die Marge automatisch eingestellt. In der DF werden wir das Bild nennen. IMG, SRC, EQU, Schrägstrich, Ein Psi-Punkt-PNG Übrigens, alle Haltestellen finden Sie genau hier im öffentlichen Verzeichnis Denken Sie daran, dass wir es in der vorherigen Vorlesung importiert haben. Hier ist mein Lebenslauf. Hier sind einige der Bilder , die wir verwenden werden. Sie können es öffnen und es dann an Ihrer Seite auschecken. Lass es uns schließen. Wenn Sie im Browser speichern, ist es hier. Ist das nicht wunderschön? Lassen Sie uns die notwendigen Einstellungen für das Bild vornehmen. Das ist die Codierung, wir werden es synchronisieren. Wenn der Link zum Bild schlecht ist, müssen wir etwas anzeigen. Ich werde hier Profilkuchen machen. Klicken Sie mit der rechten Maustaste auf das Dokument mit Pred formatieren . Der Code sieht extrem aus Wenn Sie speichern, ist dies das Endergebnis. Schauen wir es uns auf dem Mobilgerät an. Ordnung. Leute, das sieht gut aus. Ehrlich gesagt, es sieht gut aus. Schau es dir an. Auf dem iPad. Oh, meine Güte. Das ist wunderschön. Das liebe ich. Das getan zu haben. In der nächsten Vorlesung werden wir mit der Implementierung der Skew Box fortfahren Wir sehen uns in der nächsten Vorlesung. 33. Skillbox Slider-Implementierung: Lassen Sie uns mit der Implementierung der Skew-Box fortfahren. Bevor wir fortfahren, müssen wir einige notwendige Installationen vornehmen Gewinnen Sie das Terminal gegen C , um den aktuell laufenden Server zu stoppen Wir werden MPM install, slick, react, slick ausführen, und dann werden wir auch Slick Coser installieren Drücken Sie die Enter-Taste, um das Feuer anzuzünden. Und bitte stellen Sie sicher, dass Ihre Internetverbindung eingeschaltet ist. Die Installation war erfolgreich. Lass es uns ein bisschen runterholen. Scrollen Sie die Oberseite. Jetzt werden wir die notwendigen Eingaben vornehmen Wir werden Slick Crus Slash, Slick Slash, slick.cs posten Noch eins, wir werden Pot Slick Carer Slash Slick Slash, Slick Them Punkt-CSS Pot Slick Carer Slash Slick Slash, Slick Them Punkt-CSS verwenden. Schließlich werden wir den Slider aus React Slick importieren. So einfach ist das. Nachdem wir dies getan haben, kopieren wir schnell die Slider-Einstellungen. Öffnen Sie die Coderessource Dot MD. Markieren Sie den Code, kopieren Sie ihn, kehren Sie zum FS-Code zurück , und innerhalb der Komponente werden wir ihn einfügen. Lassen Sie mich das kurz erklären. Scrollen Sie nach oben. Hier haben wir eine verbale Einstellung, und innerhalb des Objekts setzen wir das Unendliche auf wahr. Slide to Show wird sechs sein. Die Folie zum Scrollen ist eine, und die Geschwindigkeit beträgt 2 Sekunden. Arrows, wir setzen es auf fs, Autoplay wird wahr sein Und dann beträgt die Autoplay-Geschwindigkeit 2 Sekunden. Dann haben wir hier die Schleife, wir setzen die Schleife auf Wahrheit und dann ist das CSS linear Nachdem wir all dies getan haben, möchten wir auch , dass es auf allen Plattformen reagiert. Am Breakpoint von 17 60 müssen wir den Schieberegler zurücksetzen. Die anzuzeigende Folie ist sechs, die Folie zum Scrollen ist eins, unendlich ist auf True gesetzt und die Punkte sind auf Force eingestellt. Bei einem Breakpoint von 60 müssen wir auch die Einstellungen zurücksetzen, aber in diesem Fall ist es, glaube ich, genau dasselbe mit 17 60. Und so weiter und so fort. Und hier haben wir die Folie zu zeigen, die vier sein soll. Slide to Scroll ist eins, und Unendlichkeit und Punkt sind auf Wahr und Falsch gesetzt. Also kontinuierlich und so weiter und so fort. Habe das Karussell nicht aufgebaut. Die Verschachtelungslinie besteht darin, die Elemente selbst zu implementieren. Scrollen Sie nach unten. Gleich unten haben wir noch ein D, ich gebe dir den Klassennamen. Lassen Sie uns es auf unserer Plattform responsiv machen. Die Marge wird bei bis zu liegen. Wir werden es als absolut positionieren. Jetzt werden wir noch einen DF haben. Klassenname, P x drei. Das bedeutet, dass der Abstand links und rechts 0,75 beträgt. Schließe es, direkt unter d, wir werden ein weiteres D haben, gib ihm einen Klassennamen Wir werden es relativ positionieren. Das Maxi Max S n. Dann das Unterteil. Unten müssen wir einen individuellen Aufenthalt angeben Machen wir 70 Pixel draus. Auf mittelgroßen Geräten sind MD, Column, Max, Five besser. Auf sehr großen Geräten. Wir nehmen es Max W mit sechs Zellen. Padin links und rechts wird vier sein . Machen wir fünf draus Aber auf einem großen Gerät wollen wir, dass es Px 14 ist. Overflow, wird Auto x Auto sein. Der Rand links rechts ist automatisch. Was auch immer, lassen Sie uns den BG angeben , der der Hintergrund ist. BG weiß Also werde ich ein abgerundetes D für Excel machen. Wir wollen, dass die Ecke der Skibox ein bisschen kurvig Und der Z-Index wird 20 sein. Ordnung. Schließ den Entwickler. Innerhalb dieser Zeit werden wir die Gegenstände haben. Lassen Sie uns die Anwendung ausführen , um den Rest zu sehen. Ordnung. Was wir jetzt tun werden, ist zu tun. Bitte ein Kommentar zur Eingabe, zur Eingabe des Sliders. Immer noch im Steve. Wir werden den Inline-Stil verwenden. Stil. Lassen Sie uns den Schatten der Box angeben. 25 Pixel, 50 Pixel und zehn Pixel nach rechts. Wir stellen nur den Rundumschatten der Box von links nach rechts, von oben nach unten ein. Wenn du speicherst und lass uns sehen, richtig. Es kommt ein bisschen raus. Lass uns etwas hineinlegen, damit du es sehen kannst. Jetzt nehmen wir noch ein D, geben dir den Klassennamen. Wir wollen, dass der obere Teil und der untere Teil zehn sind. Auf einem mittleren Gerät beträgt das Klopfen von oben und das Abtrennen von unten sechs, auf einem kleineren Gerät Kreuz, eine Tageskrähe. Wunderschön. Ich werde es dir im Hausarzt zeigen, damit du dir darüber keine Sorgen machen musst. Wenn Sie jetzt den Browser auschecken, hier ist er. Die Skew-Box ist fertig. Und wenn du auf der schiefen Kiste hängst, wirst du feststellen, dass sich dein Verhalten ändern wird. Schau es dir an. Sieht aus wie das Kreuzzeichen. Siehst du? Gut. Das ist also für den Kurs oder die Änderung verantwortlich. Also gut, lassen Sie uns schnell die Objekte in der Schrägbox anzeigen IMG, SRC, E QU, Schrägstrich, Mongo-DB Übrigens haben wir all diese Bilder in der vorherigen Vorlesung importiert diese Bilder in der vorherigen Vorlesung Wenn Sie also die Öffentlichkeit öffnen, können Sie immer alle Bilder sehen, die wir hier verwendet haben. Ordnung. Lass es uns schließen. T entspricht Mongo db. Geben wir den Klassennamen an , damit wir ihn stilisieren können Im Grunde werden wir die Höhe angeben Schließen Sie es mit dem selbstschließenden Tag, markieren und duplizieren Sie es sechsmal. Wenn Sie im Browser und in den Anzeigen speichern. Keine Sorge, wir werden alles zusammenstellen. Jetzt werden wir es hier auf React-PNG ändern. Wir werden die nächsten Gs anzeigen. Ups, ich hätte auch diesen hervorheben sollen. Als Nächstes. Doktor PN. Also werden wir ausgiebig jubeln. Also, wir werden Notizen haben. Lassen Sie uns hier Ja ausdrücken. Wenn du sparst, und hier alle Kills. Ups. Hinweis S wird nicht angezeigt. T Da drüben stimmt etwas nicht. Es sollte Note J Punkt PNG sein. Sie müssen das Bildformat angeben. Jetzt können wir die Schädel anzeigen. Lass es uns schnell ins Rutschen bringen. Scrollen Sie nach oben. Wir werden das Zeug hier loben . SF, und für die Einstellungen müssen wir jetzt all diese Einstellungen anwenden Die Art und Weise, wie wir das machen, ist eigentlich sehr einfach. Win macht D. Lass uns schnell den Slider rendern. Innerhalb des Sliders werden wir die Einstellungen verteilen . Schließe es und markiert das schließende Tag. Schneide es ab. Komm her und füge es dann ein. Wenn Sie im Browser speichern, Hoppla. Was zur Hölle? Oh, meine Güte. Er sagt, Superexpression muss entweder Wissen oder Funktion sein Also lass uns die Schraube nach oben schrauben. Lassen Sie mich das Terminal überprüfen. Ro-Modul. Ordnung, Leute, wir müssen irgendwas innerhalb der Seitenpunkte machen. Schließen Sie das Terminal. Öffne den Seitenpunkt S. Einfach weil wir die Home-Komponente innerhalb der Seiten rendern . Wir müssen vom serverseitigen Rendern zum clientseitigen Rendern wechseln Rendern zum clientseitigen Rendern Also ganz oben werden wir uns Kunden nennen. Einfach so. Lass uns das abwischen. Ordnung. Schauen wir uns nochmal den Browser an. Kannst du sehen? Alles funktioniert wie erwartet einwandfrei. Das ist super toll. Fantastisch. 34. Fenster-on-Scroll-Ereignis: Willkommen zurück im Unterricht. In dieser Vorlesung werden wir mit der Header-Komponente fortfahren. Schnell, innerhalb des Verzeichnis-Headers. Wir werden eine neue Komponente erstellen, Header Dot JS. VS-Code, Befehl B, um den Explorer zu öffnen. SRC-Komponente. Und hier ist der Header. Klicken Sie auf Neue Datei. Header-Punkt S. Erstellen Sie innerhalb der Kopfzeile erneut eine neue Datei. Diagonale Schubladenpunkte, Gs. Schließlich die diagonale Schublade C S. Wunderschön. Schließen Sie die CSS-Datei. Schließen Sie auch die diagonale Schublade. Jetzt werden wir RFC verwenden, um die funktionale Komponente zu generieren Der Header wird im gesamten Projekt konsistent bleiben gesamten Projekt konsistent Also müssen wir es innerhalb des Layouts rendern. Öffne das Layout. Lass uns schnell gehen. Überschriften aus der Punktstrich-App-Slash-Komponente Schrägstrich-Header Schrägstrich-Header Wir werden es im oberen Bereich der Kinder rendern. Hier werden wir den Header rendern. Und hier ist es. Kannst du Schönes sehen? Im Grunde werden wir in dieser Vorlesung die Ausgangsposition der Anwendung auf der Y-Achse ermitteln. Lass uns das schnell machen. Gehen Sie bei Punkt s zurück zum Kopf. Schließen Sie den Explorer ab. Lass mich ein bisschen vergrößern. Nett. Zuerst müssen wir den Use-Effekt und den verwendeten Hook importieren. Aus diesem Grund werden wir vom serverseitigen zum clientseitigen Rendern wechseln serverseitigen zum clientseitigen Rendern Wir werden einen Client erstellen. So einfach ist das. Setzen Sie hier ein Komma, P und schließen Sie die CO-Klammer Wir werden den Use-Effekt importieren . Ca. Der State Hook. Lassen Sie uns nun die notwendigen Zustandsvariablen deklarieren , die verwendet werden sollen. Innerhalb der Komponente werden wir const den ausgewählten Index eins C den ausgewählten Index eins festlegen Equ, der Zustand, der Anfangszustand wird Null sein. Auch hier werden wir haben, dass const geöffnet ist. Ca set ist offen, equo. Der Ausgangszustand wird Gewalt sein. Lassen Sie uns die Zustandsvariable deklarieren, um die Position der Anwendung auf y xs zu ermitteln. Wir werden die ungefähren Kosten festlegen und der Ausgangszustand wird bindend sein. Wunderschön. Um dieses Beispiel zu demonstrieren. Wir müssen nur die Home-Komponenten duplizieren , damit wir scrollen können. Öffnen wir die Seite Punkt s. Home-Komponenten. Ich muss es nur dreimal duplizieren. Und bitte, das ist zum Beispiel Sake. Wenn Sie speichern, können wir jetzt durch die Anwendung scrollen. Ich möchte es dir nur zeigen, damit du es gut genug verstehst. Geh zurück zum Code, schließe den Explorer. Die Idee ist einfach. Wenn der Offset der Anwendung auf Seite Y gleich Null ist, wollen wir den Anfangsstatus auf Force setzen. Andernfalls wollen wir den Anfangsstatus auf true setzen, was einfach impliziert. Komm her. Jetzt ist die Anwendung auf Seite Y Offset gleich Null. Wissen Sie warum? Das liegt einfach daran, dass wir die Anwendung nicht gescrollt haben. Aber wenn wir die Anwendung so durcheinander bringen, wenn Sie Mist bauen Die Anwendung auf Seite Y Offset wird größer als Null sein Dafür setzen wir den Anfangsstatus auf true. Einfach ausgedrückt, wenn Sie die Anwendung vermasseln, wollen wir nur den Status aktualisieren. Der Grund dafür ist , dass wir dem Header einen Klassennamen geben können dem Header einen Klassennamen geben um ihn eindeutig zu stilisieren , wenn der Benutzer die Anwendung manipuliert Sie würden das Wesentliche auf jeden Fall nach der Implementierung verstehen Hier werden wir einen Nutzeffekt erzielen. Was ist der Nutzungseffekt? Wir werden uns um das Scrollen kümmern müssen. Wir werden ein ständiges Scrollen nach oben im Q-Fenster haben , Punkt, Seite Y verschoben. Oder das Dokumentelement Scroll T. Beenden Sie es mit der Halbspalte. Und hier müssen wir den Ausgangszustand aktualisieren. In Schriftrolle zwei einstellen. Nach oben scrollen ist größer als dort. Und hier werden wir Window Dot bei Event Listener machen. Scrollen, Scrollen bearbeitet. Nachdem Sie dies getan haben, müssen Sie in der nächsten Zeile die Funktion bereinigen, indem Sie den Scroll entfernen. Hier werden wir zurückkehren. Fensterpunkt, Event-Listener entfernen. Scrollen, Griff, Scrollen. Lassen Sie uns den Nutzungseffekt schnell konditionieren indem wir ein leeres Abhängigkeitsarray anwenden. Danach werden wir ein Konsolen-Dotlog erstellen. Wir werden ein SC protokollieren. Wenn Sie die Anwendung speichern, öffne ich häufig die Konsole. Wenn ich Mist baue. Die Anwendung auf Seite Y Offset wird besser als Null sein Und dann werden wir den Anfangsstatus auf true aktualisieren. Aber wenn ich nach unten schaue, wird die Anwendung auf Seite Y gleich Null sein, und dann wird der aktuelle Status auf Force aktualisiert Verstanden. Wunderschön. Also lass es uns noch einmal machen. Mist rauf runter. Schau es dir auf der Konsole an. Runter. Damit können wir den Header stilisieren, wenn der Benutzer durch die Anwendung scrollt Nachdem wir dies getan haben, machen wir uns daran, die Header-Komponenten in der nächsten Vorlesung zu entwerfen . Wir sehen uns dann. 35. Implementiere pageYoffSet: Lassen Sie uns das Beispiel schnell anwenden. Lassen Sie uns es also gleich hier implementieren. Wir werden das D löschen, weil wir dem Baum keine zusätzlichen Knoten hinzufügen wollen. Wir müssen das React Dots Fragment verwenden. Innerhalb des Fragments werden wir einen Header haben. Lassen Sie uns nun den Header stilisieren. Gib ihm einen Klassennamen. Wir werden die String-Interpolation verwenden. Wir werden die Co-Klammer öffnen und schließen. Innerhalb der Co-Klammer geben wir die Größe des Beutels Wir werden sagen, wenn scrode auf true gesetzt ist, werden wir Header Show machen und sonst passiert nichts Wunderschön. Wenn Sie in der Anwendung scrollen, möchten wir, dass der Header oben bleibt. Wir werden die Position korrigieren müssen. Von oben wird Null sein, weil wir keinen Abstand zwischen der Kopfzeile und der Y-Achse haben wollen . Der Z-Index wird 50 sein. Alles für den Übergang. Dann erhöht sich die Dauer auf 500. Jetzt werden wir eine abgestandene haben. Die Hintergrundfarbe. Wir möchten die Hintergrundfarbe bedingt angeben Wir werden das tun, wenn scroll auf true gesetzt ist. Das heißt , wenn der Benutzer durch die Anwendung scrollt, möchten wir, dass die Hintergrundfarbe weiß ist Sonst wollen wir keine Hintergrundfarbe. Wir wollen, dass es transparent ist. Mit der Polizei getrennt, wisch die Säule ab. Für den Box-Schatten wollen wir den Box-Schatten auch bedingt angeben Wenn scrolle auf true gesetzt ist, was bedeutet, dass wir, wenn der Benutzer durch die Anwendung scrollt, überall um den Kopf herum einen blauen Boxschatten haben überall um den Kopf herum Und sonst passiert nichts. W im inneren HTML, wir werden nur ein H-One-Tag für Unterrichtsarbeiten haben . Ich werde den Header testen. Es ist in Ordnung. Im Browser speichern, hier ist es. Kannst du es sehen? Jetzt hat der Header keinen Hintergrund. Aber wenn der Benutzer die Anwendung vermasselt, wird die Hintergrundfarbe der Kopfzeile weiß, und dann erscheint der Schatten der Box. Wenn Sie die Taste herunterdrehen, verschwindet der Schatten der Box und auch die Hintergrundfarbe verschwindet. Wenn ich also Mist gebaut habe, können Sie es sehen, beobachten Sie es hier in der oberen linken Ecke des Bildschirms. Siehst du? Okay, lass mich etwas tun. Geben wir dem einen Klassennamen und dann mache ich Text 7 Excel. Dadurch wird der Text extra groß und das Beispiel lässt sich dann besser korrigieren. Wenn ich nach oben scrolle, wird der Offset der Anwendung auf Seite Y größer als Null sein, und dann wird der ursprüngliche Status auf true aktualisiert Wenn der Anfangsstatus auf „true“ aktualisiert wird, müssen wir, basierend auf dem Wert „true s “, die Grundfarbe Weiß auf die Kopfzeile mit einem Kastenschatten anwenden . Verstanden, wunderschön. Wenn ich jetzt nach unten scrolle, verschwindet es. oben wird die Kopfzeile nach Grundfarbe weiß und der Schatten der Box blau. Alles funktioniert wie erwartet einwandfrei. In der nächsten Vorlesung werden wir beginnen, den Kopf zu entwerfen. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert und pass immer auf dich auf. 36. Navigationslinks: Lassen Sie uns fortfahren, die Navigationslinks direkt im Kopf zu implementieren . Aber bevor wir weitermachen, müssen wir alles normalisieren. Komm her. Lassen Sie uns ein Etikett vom Kopf abwischen. Geh zurück zur Seite, um zu jubeln. Wir müssen die Duplikate löschen. Im Browser speichern. Wunderschön. Okay. Gehen wir zurück zum Header, und hier haben wir genug, geben wir ihm einen Stil. Wir werden es unsichtbar machen. Die Sichtbarkeit wird verborgen bleiben. Jetzt werden wir es auf einem extra großen Gerät sichtbar machen. Auch ein extra großes Gerät, die maximale Breite sollte für Excel sein. Dies ergibt die maximale Breite 56. An diesem Grenzpunkt werden wir eine Breite von acht Rm haben. Der Rand links und rechts wird automatisch sein. Auch hier werden wir innerhalb des Romans eine oder jene Liste haben Geben wir ihm einen Stil. Wir werden es flexibel anzeigen lassen. Die Schrift wird schwarz sein. Ups. Das Schwarz muss so auf der Kappe sein Flex-Tag-Rolle. Die Flex-Richtung ist Roll. Wir müssen die Elemente zentriert ausrichten. Die Höhe wird 24 sein. Jetzt werden wir das LI-Tag haben. Geben wir ihm den Stil. Wir werden es gruppieren lassen. Der Text wird in Excel gespeichert, was der Zeilenhöhe und der Formulargröße entspricht. Wir werden eine relative Position haben. Die Schrift wird langweilig sein. Der Rand rechts. Lass uns 20 draus machen. Im Browser speichern, es passiert nichts. Lassen Sie uns nun mit der Implementierung der Links beginnen. Hier werden wir ein A-Tag haben. Also werden wir nach Hause gehen. Wenn Sie jetzt den Browser auschecken, werden Sie Home sehen. Wunderschön. H. Geben wir ihm einen Stil. Name der Klasse. Wir werden etwas Java-Skript dazwischen haben, also verwenden wir die Stärkeinterpolation Jetzt wollen wir den Menüstil anwenden . Menüpunkt. Keine Sorge, ich zeige es dir gleich. Öffne den Explorer. Innerhalb des globalen CSS. Wir haben die Öfen genau hier kopiert und eingefügt. Und hier ist der Menüeffekt. Also von links, -0,75 M, von oben, der Z-Index, die Höhe mit Randradius, Farben und der Rest Wenn der gewählte Index Eins gleich Null ist , wird der Test schwarz sein, und sonst passiert nichts Wenden wir nun den eigentlichen Test an. Ich weiß, dass dieser Teil ziemlich knifflig ist, aber nach der Implementierung werde ich ihn einfach erklären. Der Farbwert wird 666 d47 sein. Das Gruppencover, wenn Sie darauf zeigen, wird aus dem Text ein Blog Lassen Sie uns die Hypertext-Referenz angeben. Dies ist ein Zeiger auf die Home-Komponente. Wenn Sie auf diesen Link klicken, müssen wir den ausgewählten Index aktualisieren. Wir sollten es auf Null aktualisieren. Gleich nach dem L machen wir Ich habe ausgewählt, dass Index eins gleich Null ist, dann werden wir etwas tun. Wir werden hier eine Zeitspanne haben. Lassen Sie uns den Stay-Menü-Effekt haben. Transformieren Sie, die Opazität macht es 100. Wir werden es in die negative Richtung drehen. Deshalb minus 12 drehen, damit es sich in Richtung des negativen Winkels dreht. Gruppe. Wir müssen es auch rotieren. S. Wir müssen nur die Spanne hervorheben. Kopieren, herkommen und einfügen. Der Unterschied besteht also darin, dass sich in die positive Richtung drehen wird. Sie müssen ihm kein Minuszeichen voranstellen. Und ich denke, das ist das einzige, was wir machen müssen. Schauen wir uns den Browser an. Kannst du es jetzt sehen? Es ist hervorgehoben. Okay. Gut. Was wir jetzt tun müssen, ist das LI-Tag hervorzuheben und dreimal zu duplizieren. Oder Sie können dreimal kopieren und einfügen. Markieren Sie die Zeilen 38 bis 50. Ich werde es dreimal duplizieren. Perfekt. Das ist also das erste Duplikat. Nun hier, wenn der gewählte Index eins gesetzt ist, ist eins gleich eins. Aktualisieren Sie es auf eins, und das führt uns zum Portfolio-Bereich. Das werden zwei sein. Zwei. Wenn auf diesen Link geklickt wird, möchten wir problemlos zum Abschnitt Über mich scrollen Komponente „Über mich“. Zu guter Letzt, Leute, das tut mir leid. Schau, wir müssen den inneren HTML-Code ändern. Hier werde ich Portfolio machen. Hier werde ich etwas über mich tun, oder du kannst etwas tun. Schließlich werden hier drei sein. H. Drei. Wir werden Ami ausstellen. Speichern Sie die Anwendung. Schau es dir im Browser an. Wunderschön. Kannst du sehen, wann ich gehe? Ordnung, also ich bin von dem Ergebnis, das wir haben, nicht ganz überzeugt. Denn wenn Sie genau hinschauen, werden Sie feststellen, dass die Links alle hervorgehoben sind. So wollen wir das nicht. Lassen Sie uns das in den nächsten beiden Vorlesungen beheben. Wir sehen uns dann. 37. Navigationsschublade für Header Menü: Willkommen zurück bei Clouds. In diesem Abschnitt des Kurses werden wir mit dem Entwerfen der diagonalen Zeichnung fortfahren. Öffnen Sie die Header-Komponente. Scrollen Sie nach oben. Lassen Sie uns schnell das Konsolenprotokoll löschen. Hier werden wir die Schublade ständig öffnen und sie auf eine Pfeilfunktion einstellen. Die Funktion, die wir aktualisieren werden, ist geöffnet. Lass es uns auf wahr aktualisieren. Denken Sie daran, dass wir in der vorherigen Vorlesung erklärt haben, dass die Zustandsvariable offen ist und der Anfangsstatus falsch ist. Jetzt aktualisieren wir den Status direkt in dieser Funktion. Nett. Lass uns schnell die Schublade rendern. Was ich zuerst tun werde, ist, es oben zu importieren. Wir werden Drawer aus Dot Slash importieren , sie werden zeichnen Innerhalb der Fragmente werden wir also ein Div haben. Geben Sie den Klassennamen an. wollen wir die String-Interpolation verwenden, damit wir dazwischen etwas Java-Skript schreiben können Drache zur D-Schublade. Wenn is open auf true gesetzt ist, haben wir die Klasse is open, und sonst passiert nichts Wir werden diese Klasse in Zukunft stilisieren. Lassen Sie uns das D schließen. Innerhalb des D müssen wir die Schublade rendern Schließen Sie es mit dem selbstschließenden Tag. Jetzt werden wir tun, ist offen, wird gleich sein wie ist offen. Dann ist das Set geöffnet. Wird eingestellt ist offen. Ausgewählter Index eins wird gleich dem ausgewählten Index eins sein. Stellen Sie abschließend ausgewählten Index eins ein, es wird ausgewählter Index eins gesetzt. Wunderschön. Wir schicken all diese Oberteile als Requisiten in die Schublade. Nachdem wir das alles erledigt haben, müssen wir diese Requisiten nun in der Schubladenkomponente empfangen in der Schubladenkomponente Öffnen Sie den Explorer und diagnostizieren Sie dann unsere Stühle. Lassen Sie uns die Funktionskomponenten generieren. Das Innere, das wir destrukturieren müssen, ist offen. Das Koma-Set ist geöffnet. Koma hat Index eins ausgewählt, ausgewählten Index eins gesetzt. Ich habe das alles nicht destrukturiert. Gehen wir zurück zur Header-Komponente. In der Header-Komponente werden wir die Schublade anzeigen. Genau hier werden wir ein D haben und dir einen Klassennamen geben. Wir werden seine Position relativ haben. Innerhalb dieses D werden wir ein weiteres D haben . Der Z-Index wird 30 sein. Nehmen wir seine Position als absolut an. Die Autos werden Zeiger sein. Die Breite ist 14. Die Höhe ist ebenfalls 14. Bei großen Geräten sollte die Breite 24 sein. O G-Spalte, H 24. Die Bagrond-Farbe, wir werden unsere eigene benutzerdefinierte Farbe verwenden, für acht AF D E verwendet wird. Wir werden sie flexibel anzeigen lassen und den Inhalt so ausrichten , dass der Inhalt mittig ausgerichtet Richten Sie die Elemente mittig aus, und wir möchten, dass die Ränder abgerundet werden Abgerundetes D, B, R, x l. Dadurch wird der Rand unten rechts etwas kurvig. Hier. Lassen Sie uns das D schließen, und innerhalb des D. Bevor wir fortfahren, müssen wir den Klick implementieren. wir die Entwicklung verlassen, wollen wir die Schublade öffnen Lass es mich dir schnell zeigen. Kannst du es sehen? Hier ist es? Jetzt stellen wir das Menü hier hin und schauen uns das an. Was zur Hölle ist das? Das wird in Zukunft behoben sein. Lass uns weitermachen. Jetzt werden wir einen Entwickler haben. Gib dem Entwickler einen Stil. Wir werden seine Position relativ haben. Die Breite wird sieben sein, G zehn. Die Höhe wird sieben sein. G H, dann. Wir lassen es flexibel anzeigen, Inhalte zentrieren Richten Sie die Elemente zentriert aus. Schließe das D. Innerhalb des D müssen wir das Bild anzeigen, das ist das Menübild. IMG SRC Equ Slash Drawer Dot PNG. Die Alternative, wir machen Schubladenartikel. Geben wir den Stil und die Breite an und geben wir eine benutzerdefinierte Breite von 150 Pixeln an. Die Höhe wird zehn sein. Näher dran mit dem selbstschließenden Etikett. Wenn Sie den Browser speichern und auschecken, können Sie die ADs sehen? Ist das nicht wunderschön? Wenn du genau hinschaust, wirst du das Zeug hier sehen, und es nimmt tatsächlich Raum ein und ich mag es nicht Schreiben Sie das auf. Ich weiß nicht, wo wir es haben, aber wir müssen danach suchen. Ich denke, das sollte in der diagonalen Schublade sein. Und hier ist er, dieser tiefe Kopf. Jetzt werde ich dieses Element im inneren HTML löschen . Wenn Sie das Projekt speichern. Wunderschön. Jetzt machen wir Fortschritte und es gefällt mir. Wenn Sie den Navigationslink beobachten, werden Sie feststellen, dass die Schublade den Home-Link verdeckt. Können Sie sehen, dass sich in der oberen linken Ecke des Bildschirms ein Link befindet, der Home-Link. Wir müssen ihn also richtig ausrichten, damit das Home direkt hinter der Navigationsleiste erscheint. Also brauchen wir ein Leerzeichen dazwischen. Machen wir das in der nächsten Vorlesung. 38. Home Link Challenge: Aufgrund der Beobachtung in der vorherigen Vorlesung haben wir festgestellt, dass die Navigationsleiste die Heimatspur verdeckt, und genau das war das Problem, das ich Ihnen zu erläutern versprochen habe. habe ich nicht gesagt. Lass es uns schnell reparieren. Zurück zu S cot, innerhalb des Kopfes S müssen Sie nach oben scrollen , wo wir den Kopf am Tag haben, und hier ist es. Was wir hier tun werden, ist eine Breite von 100% anzugeben , was W ist Das tatsächliche CSS-Äquivalent wird Breite 100% sein. Und wenn Sie mit der Maus darüber fahren, werden Sie es in der Intellisens genau dort sehen Speichern Sie im Browser, das sind diese. Kannst du sehen? Wunderschön. Wenn Sie jetzt auf die Startseite klicken, wird die Startseite hervorgehoben und der Rest des Navigationslinks wird etwas schwach Wenn Sie auf Portfolio klicken, wird es hervorgehoben und die Testfarbe ist schwarz Das Gleiche hier, das Gleiche hier. Dann dasselbe hier. Alles funktioniert wie erwartet einwandfrei. Ich möchte , dass wir hier die Startseite mehrfach rendern. Ich möchte dir sehr schnell etwas zeigen. Öffnen Sie die Seiten und lassen Sie uns dann die Home-Komponente schnell mehrmals rendern . Ich möchte das nur machen, damit wir eine Schriftrolle bekommen. Jetzt können wir auf der Website scrollen. Sie werden also feststellen , dass, wenn ich nach oben scrolle, können Sie sehen, dass die Kopfzeile weiß und der Schatten der Box blau wird. Und hier, indem wir die Navigationslinks sichtbarer machen. Ist das nicht wunderschön? Ich liebe es. Ordnung. Es reagiert auf unserer Plattform. Kannst du sehen? Auf dem iPad. Wunderschön. In Ordnung, Leute, also genau das werden wir in dieser Vorlesung erreichen. Schnell, geh zurück zum VS-Code. Wischen Sie die verschiedenen Renderings ab, und lassen Sie uns dann nur noch eine Home-Komponente auf dem Bildschirm Ordnung, alles cool. Und das ist richtig. 39. Öffne und schliesse das Navigationsmenü:: In der vorherigen Vorlesung haben wir das Navigationsmenü implementiert. Aber wenn du darauf klickst, passiert nichts. In dieser Vorlesung werden wir uns der Implementierung der Funktionen zum Öffnen und Schließen befassen. Er kennt den VS-Code. Ganz oben werden wir importieren. Verwenden Sie Router, com Ue den Pfadnamen. Und das kommt von Next S Navigation. Der Use-Router ist eine Funktion, also müssen wir sie aufrufen Und dann werden wir ihm eine Variable zuweisen. Konstante Route Equu. Machen wir dasselbe mit dem Pfadnamen. C Pfadname entspricht U Pfadname. Der Use-Pfadname ist ein Hook für Client-Komponenten , mit dem Sie den aktuellen URL-Pfadnamen lesen Nachdem wir das getan haben, ersetzen wir dieses d durch ein React-Fragment. Innerhalb des Fragments werden wir ein df haben, geben Sie den Klassennamen an, um es zu stilisieren Wir werden es relativ positionieren. Innerhalb dieses D werden wir ein weiteres DF haben , geben Sie ihm den Klassennamen. Jetzt wollen wir die String-Interpolation verwenden, damit wir dazwischen ein Stück Java-Skript schreiben können ein Stück Java-Skript Der Z-Index-Index 50. Im Moment werden wir ein gewisses Maß an Kondition haben. Wenn der Pfadname so aussieht, der Zeiger auf die Home-Komponente ist, werden wir ihn von den oberen Null-Pixeln aus haben, und andernfalls werden es 100 Pixel von oben sein. Hier haben wir also die Kosten oder wir werden darauf hingewiesen. Wir wollen, dass es bis zum Rand repariert wird. Das Menü in der Schublade wird genau die gleiche Höhe haben genau die gleiche Höhe das Menü in der Header-Komponente. Okay? Keine Sorge, Sie werden auf jeden Fall das Wesentliche verstehen Gehen Sie also zur Header-Komponente, scrollen Sie nach unten und lassen Sie uns alles hier kopieren Ausgehend von der Höhe. Komm her. Und dann füge es ein. Wunderschön. Schließ es. Noch eine, gib den Klassennamen an, innerhalb des Klassennamens werden wir ihn stilisieren Ebenfalls, komm her. Lass uns diesen Tauchgang kopieren, weil es genau dasselbe sein wird. Lass es uns ersetzen. Schließ es. Eine weitere Sache, die wir in diesem DF tun müssen, ist, hierher zu kommen. Wir wollen den Klick spezifizieren. auf dieses DF klicken, wollen wir das Menü schließen. Wir werden das Set mit Gewalt öffnen. Wir werden es hier machen. Wenn es offen ist, ist e quo wahr, wir wollen das geschlossene SVDic anzeigen Öffnen Sie also schnell die Coderessource Punkt MD. Markieren Sie aus den Zeilen 192 2205. Kopieren Sie, kommen Sie her und fügen Sie es dazwischen ein. Und s. Wir müssen auch das Menüsymbol anzeigen. Markieren Sie Kopieren, kommen Sie her und fügen Sie es dazwischen ein. Alles was wir brauchen, um den Code zu formatieren. Wenn Sie im Browser speichern. Ordnung. Nichts passiert. Daher können Sie den Effekt vorerst möglicherweise nicht auf dem Bildschirm sehen. Lass mich dir etwas zeigen. Lassen Sie uns das BG auf Rot ändern , damit Sie verstehen, wovon wir sprechen. BG, rot, 500. Nachdem wir das getan haben, lassen Sie uns schnell die Sterne auftragen. Öffne die diagonale Zeichnung bei CSS. Wir müssen stilisieren, dass sie beim Jubel innerhalb des Kopfes zeichnen werden beim Jubel innerhalb des Kopfes zeichnen Verstanden, komm her, Punkt, sie werden zeichnen. Die Breite der Ziehung wird 100% betragen. Die Höhe 100 (Ansichtshöhe). Die Position wird nach oben fixiert. Transformiere den Ursprung, wir wollen ihn von oben rechts. Transformieren, übersetzen, -100%, -100%. Transction, wir wollen es in 0,5 Sekunden in einem umwandeln. Der Coso wird ein Zeiger sein. Der Z-Index ist 100. Nun zur Diagonale, zum Himmel. Wenn dieses Öffnen auf true gesetzt ist, müssen wir auch diese Klasse hier öffnen stilisieren Kopiere die diagonale Zeichnung, komm her und füge Punkt öffnen. Alles, was wir hier tun müssen, ist 00 zu transformieren, zu übersetzen. So einfach ist das. Gehen Sie zurück zur Header-Komponente, ganz oben, wir werden Pot-Do-Punkt-Schrägstrich, Header-Slash Sie werden Punkt-CSS zeichnen. Wenn Sie speichern, werden Sie jetzt definitiv etwas Gutes auf dem Bildschirm sehen. Kannst du sehen? Wenn du klickst, schließt du es. Klicken Sie, um es zu öffnen, Sie schließen es. Lassen Sie mich nun alles Zeile für Zeile erklären. Sie werden feststellen, dass, wenn ich auf dieses Menü klicke, die Navigationsleiste von der oberen linken Ecke des Bildschirms nach rechts angezeigt wird der oberen linken Ecke des Bildschirms . Schau es dir an. C. Wenn es dann angezeigt wird, sehen Sie das X-Symbol, das Symbol zum Schließen. Wenn ich jetzt auf das Schließen-Symbol klicke, siehst du, wenn du wachsam genug bist, ein Menüsymbol Jetzt schau zu. Siehst du? Vor diesem anderen Menü erscheint ein Menüsymbol. Lassen Sie mich ein wenig vergrößern. Schauen Sie sich das an. Siehst du? Es erlischt mit einem Menüsymbol. Also genau das haben wir in der Schublade gemacht. Lass es mich dir zeigen. Wenn sein Öffnen auf true gesetzt ist, zeigen wir das Schließen-Symbol an, und hier ist es, das X-Symbol. Und wenn das Öffnen auf Erzwingen gesetzt ist , also wenn Sie die Navigationsleiste schließen, werden wir dieses Symbol schnell anzeigen , bevor es geschlossen wird. Dann schau es dir an und beobachte es genau. In Ordnung. Gut. Nachdem wir das getan haben, haben wir hier oben das Layout für die Schublade entworfen. Die Farbe ist also rot und hier ist sie. Es hat genau die gleiche Größe wie das an der Kopfkomponente. Kannst du sehen? Jetzt konnten wir einleiten, dass das geöffnet und geschlossen ist. In der nächsten Vorlesung werden wir der Implementierung der Menüpunkte beginnen. In Ordnung, alles cool. Aber eine Sache, die wir hier tun sollten, ist, die BG auf Blau umzustellen. Okay? Ich habe es tatsächlich rot für Unterrichtsarbeiten gemacht, also musst du es wieder in diese Farbe bringen. Wenn Sie im Browser speichern. Wenn du jetzt klickst, kannst du sehen? Ordnung. Alles funktioniert einwandfrei. Fahren wir mit der nächsten Vorlesung fort, in wir die Menüpunkte implementieren werden. Wir sehen uns in der nächsten Vorlesung. 40. Navigationslinks für Menüschubladen: Lassen Sie uns also mit dem Menüdesign fortfahren. Öffne die diagonale Zeichnung Gs. In Ordnung. Scrollen Sie nach unten. Gleich nach diesem Ende werden wir einen Header haben. L Lassen Sie uns den Header schnell stilisieren. Geben Sie den Klassennamen an, wir werden eine starke Interpolation verwenden Die Position wird repariert. Die Breite wird voll sein , also 100%. Der Übergang wird alles sein. Die Dauer, machen wir 500 draus. Der Z-Index ist 40, wunderschön. Nachdem wir das getan haben, werden wir hier eine Bedingung haben. Wenn der Pfadname gleich diesem ist. Wir werden es von Anfang an haben. A s, wir werden es von den oberen -98 Pixeln haben, oder du kannst es auf 100 machen, wenn du willst Okay. Also im Kopf haben wir ein Dif, geben ihm den Klassennamen, lassen wir es positionieren. Noch ein DF mit dem Klassennamen. Hier haben wir die Z-Indexposition, positionieren wir sie absolut. Transformieren Sie die GPU. Wir werden es rein und raus haben. Die Dauer beträgt 500. Übergang ist alles. Skala, wir wollen es auf 100 skalieren. Übersetze x, keine. Lassen Sie uns das hervorheben. Verstanden, komm her. Einfügen. Das wird übersetzt Y. Geben wir ihm Opazität, 100 Das Bargelände zwei, zwei, 3740 . Lass uns es schließen. Wir stilisieren es immer noch. Wir sind mit dem Stil noch nicht fertig. Deckkraft von BG, also die Deckkraft des Hintergrunds, wird 95 betragen Bei einer Breite von 100% werden wir eine flexible Spalte haben. Bei kleineren Geräten werden wir dann die flexible Rolle verwenden. Damit sind wir fertig. In diesem Moment werden wir die Nerven haben. Der Test im Nerv wird weiß sein. Die Schriften, wir wollen die Farbtafel verwenden. Testen Sie align c. T für Excel. Lassen wir es einfach transformieren. Ordnung. Gut. Nachdem wir das getan haben, werden wir die UL haben. Gewinnt die UL. Geben wir ihm schnell den richtigen Stil. Klassenname, Display-Flex. Die Flex-Richtung ist Spalte. Gewinnt die UL, wir bekommen ein LI-Tag. Geben wir der Klasse einen Namen, um sie zu stilisieren. Wir werden es gruppieren lassen. Wir bewegen uns oben und unten. Es werden vier sein, ein Excel, wir werden die Paarung oben und unten so haben, dass vier Dies wird dem oberen Rand und dem unteren Rand am Bruchpunkt von 15 36 Pixeln zugeordnet Nachdem Sie dies getan haben, klicken Sie beim Speichern im Browser auf das Menü. In Ordnung. Es kommt. Kannst du sehen, dass die Schublade tatsächlich kommt, aber lass uns versuchen, sie fertigzustellen, um zu sehen, ob wir Probleme haben Innerhalb des LI-Tags werden wir ein D haben, den Klassennamen angeben Wir werden einen Display-Inline-Block haben Die Position ist relativ. Wir sind im D, wir werden das A-Tag haben. Wir machen hier im Header eine ganze Menge. H REF, die Hypertext-Referenz. Wir werden Slash Home machen. Wenn Sie also auf diesen klicken , gelangen Sie zur Home-Komponente Geben Sie den Klick an. Klicken Sie, wir setzen den ausgewählten Index eins auf Null, einfach weil das der Standardwert für das Home ist. Und ich hoffe, Sie verstehen aus der vorherigen Vorlesung, in der wir die zu verwendenden Zustandsvariablen deklariert haben, was wir hier tun der vorherigen Vorlesung, in der wir die zu verwendenden Zustandsvariablen deklariert haben . Wenn also ausgewählt ist Index eins Null ist, bedeutet das, dass wir uns auf der Startseite befinden. Verstehst du, mach dir keine Sorgen, während wir weiter rocken, wirst du bestimmt alles verstehen Hier werden wir setzen, ist offen für Gewalt. Denn wenn du auf den Link klickst, sollten wir in der Lage sein, das Menü zu schließen. Stellen wir es also auf Force. Lassen Sie uns das A-Tag schließen. Das innere HTML werden wir auf der Startseite anzeigen. Wenn Sie den Browser auschecken, klicken Sie, können Sie sehen, es kommt. Wenn Sie darauf klicken, gelangen Sie zur Home-Komponente und die Navigationsleiste wird ausgeblendet. Das ist genau die Idee. Nachdem wir all dies getan haben, möchten wir, dass es hervorgehoben wird, wenn darauf geklickt wird Außerhalb des A-Tags werden wir etwas Java-Skript haben Wenn der gewählte Index Eins gleich Null ist, wollen wir ihm einen Stil geben. Jetzt haben wir ein D, geben den Klassennamen ein. Wir werden es als absolut positionieren. Von oben wird es zwei von links sein , wird minus zwei sein. Jedes Mal, wenn Sie sehen, dass ich der Tail Wind Utility Class ein Minuszeichen voranstelle , sollten Sie verstehen , dass wir einen negativen Wert angeben wollen . Links, zwei. Es wird links sein, minus zwei. Die Breite wird voll sein , also 100%. Die Höhe wird ebenfalls voll sein, was sie zu 100% hoch macht. Transformieren Sie die GPU. Der Übergang ist die ganze Dauer. Machen wir 300 draus. Wir drehen es um minus sechs minus um sechs. Die Opazität 100. Gruppe dv rotiert sechs. Gruppe dv. Die Hva-Opazität wird 100 betragen. Entschuldigung, der Hintergrund, wir werden ihn mit Excel umbenennen lassen, weil wir wollen, dass die Kanten gekrümmt lassen, weil wir wollen, dass die Kanten Der Z-Index, wir werden eine negative Zehn haben. Okay, speichern wir es und schauen, was passiert. Ups, bevor wir speichern, müssen wir das D so schließen Der Schlusskreis sollte nicht hier sein. Schneide es ab und dann lass es uns hier unten schließen. Ls, ls, es passiert nichts. Stellen Sie sicher, dass Sie den Unterschrank hier schließen. Dann markiere dieses D noch einmal, C P. Komm her. Hoppla. Außerdem müssen wir das unter d schließen. Dann fügen wir es hier Jetzt werden wir einige Änderungen vornehmen. A Das wird sein. Wenn Sie auf Null drehen, wird die Opazität Null sein. Und was ist nochmal? Ich denke, das ist alles. Wenn Sie im Browser speichern, wenn Sie klicken, wenn ich mit der Maus über das Menü fahre, schauen Sie es sich Es wird rot hervorgehoben, und dieses Rot wird gedreht Verstanden. Wunderschön. Jetzt ändern wir es auf die tatsächliche Farbe. Ich denke, die tatsächliche Farbe wird hellblau sein, also müssen wir sie von hier kopieren. Die Himmelskopie. Wo haben wir die Farbe? Okay. Hier ist es. Befehl D zur Mehrfachauswahl. Wischen Sie es in beiden Zeilen ab und fügen Sie es dann ein. Speichern Sie im Browser. Wenn Sie gehen , schauen Sie sich das nochmal an. Ich liebe das. Wir werden das LI-Tag hervorheben und es dann dreimal duplizieren, genau wie wir es getan haben, als wir die Links innerhalb der Head-Komponente implementiert haben. Drücken Sie auf die 10-Quote und tippen Sie dann auf den Abwärtspfeil, um Duplikate eins, zwei und drei zu duplizieren. Wunderschön. Wenn Sie im Browser speichern, haben Sie es jetzt so. Aber ich habe Zweifel in meinem Herzen. Dieser Typ hier soll den Bildschirm abdecken, das ist dieses Menü hier drüben, und ich weiß nicht, warum es nicht so angezeigt wird. Okay. Kannst du sehen? Sieht gut aus. Lassen Sie uns nun beginnen, einige Änderungen vorzunehmen. Dies ist das erste LI-Tag für die Startseite. Für diesen hier werden wir den ausgewählten Index auf Eins aktualisieren, und ich setze den ausgewählten Index auf Eins, dann müssen wir das tun. Und hier wird das Portfolio sein. Dies wird uns mit der Portfoliokomponente verbinden. Das zweite LI-Tag N C. Für das dritte LI-Tag. Wir werden den ausgewählten Index zwei des Satzes aktualisieren. Wenn es dann gleich zwei ist, wollen wir zur Komponente Über mich übergehen. Übrigens müssen wir auch die Referenz ändern. Also hier werde ich mich mit der Komponente befassen. Scrollen Sie nach oben. Hier müssen wir zwei ändern. Portfolio. Und das ist der letzte. Also lass uns es auf drei aktualisieren. Wenn es gleich drei ist, müssen wir zu den IAMI-Komponenten übergehen Hier geben wir direkt im Laufwerk ein M an. Was ist nochmal? Wir müssen es sehr gut überprüfen. Alles klar? Okay, es ist in Ordnung. Wenn wir in Zukunft etwas verpassen, können wir es definitiv reparieren. Wenn Sie im Browser speichern, öffnen und boomen. Wenn du jetzt mit der Maus darüber fährst, siehst du solche Dinge. Kannst du es sehen? In der nächsten Vorlesung werden wir also die Social-Media-Symbole implementieren. 41. Navigation Drawer Challenge (Fixiere die Höhe): Der Diagono Draw ist also halb so groß wie der Bildschirm, und ich bin mit dem Endergebnis nicht zufrieden Natürlich gibt es ein Problem mit der Höhe. Deshalb möchte ich, dass du es als Herausforderung annimmst, das Video postest und so viel wie möglich versuchst , es an deiner Seite zu beheben. Ich habe nicht versucht, das Problem auf deiner Seite zu beheben. Lassen Sie mich Ihnen schnell zeigen, wie ich das Problem behoben habe. Geh zurück zum VS-Code. Gewinnen Sie das Dagono-Unentschieden, hier ist der Header. Wir müssen die Höhe dieses T angeben. Wir haben also die Flexrichtung als Spalte Das Richtige ist, dass es Flex anzeigt und dann die Flex-Richtung Spalte ist. Nachdem wir das getan haben, müssen wir auch den HD-Bildschirm machen. Dadurch wird die Höhe 100 Ansichtshöhen zugeordnet. Wenn Sie speichern, checken Sie es im Browser aus. Jetzt können Sie sehen, dass alles gut ausgerichtet ist. Wenn ich gehe, sieh mal nach. Es sieht gut aus und ich mag es. In der Nähe. Öffnen, schließen. Das Problem ist also im Grunde behoben und alles funktioniert wie erwartet einwandfrei. In der Vorlesung werden wir mit der Implementierung des Social-Media-Symbols direkt unter dem Navi beginnen, bei dem es sich um der Implementierung des Social-Media-Symbols direkt unter dem den Link handelt Wir werden es hier implementieren. Lassen Sie uns das in Dines Vortrag machen. 42. Social Media Icons für Navigationsschublade: Ordnung, fangen wir an, die Social-Media-Symbole zu implementieren. Gewinnen Sie Diag zu Unentschieden, gleich nach dem Schließnerv Wir werden eine Sektion haben. Geben wir ihm einen Klassennamen. Der obere Rand und der untere Rand werden 14 und ein kleineres Gerät haben. Der obere Rand und der untere Rand werden 12 betragen. Ordnung, also auf kleineren Geräten werden wir es absolut positionieren. Bei O G werden wir es relativ haben. Auch hier wird auf kleineren Geräten von rechts Null sein. Die Höhe wird zuerst erhöht, bevor wir zur Höhe übergehen , was auch bei großen Geräten der auch bei großen Geräten Hoffe du kannst es klar sehen. Ordnung. Bei der Einstellung Small entspricht die Höhe der vollen Höhe , also 100%. Bei LG wird die Höhe automatisch eingestellt. Ordnung. Also innerhalb des Abschnitts werden wir ein H-Tag haben. Geben wir den Klassennamen an. Wir werden einen Displayblock haben. Auf kleineren Geräten möchten wir, dass es versteckt ist. Auf kleineren Geräten möchten wir, dass nichts angezeigt wird. Jetzt G, wir werden einen Display-Block haben , den Font Bode Der Test, wir müssen einen benutzerdefinierten Test spezifizieren. Testen Sie Dash in Excel. Dann müssen wir Großbuchstaben umwandeln. Der untere Rand wird bei fünf liegen. Innerhalb des inneren HTML-Codes werden wir mir überall hin und her folgen. Einfach so. Wenn Sie speichern, checken Sie den Browser aus. Öffne die Schublade. Hoppla. Lass uns etwas sehen Lass mich nochmal sparen. Laden. Ordnung. Hier ist es. Wunderschön. In der nächsten Zeile wird das Social-Media-Symbol angezeigt. In diesem Abschnitt werden wir ein D haben. Geben wir den Stil an. Wir werden einen Display-Flex haben. Die Flex-Richtung wird „Roll“ sein. Bei kleineren Geräten wird die Flex-Richtung eine Spalte sein. Großes Gerät, wir wollen, dass es sich biegt und rollt. Innerhalb des D werden wir einen Zug machen. Innerhalb des A-Ziehens geben wir ihm einen Schiedsrichter. Genau hier müssen Sie Ihr Twitter-Handle angeben. Der Link, und ich habe gerade meinen eingefügt. Gut. Gib dir den Klassennamen. Der Test wird grau sein, und dann müssen wir den Wert angeben, um ihn dicker zu machen. Wenn der Mauszeiger darüber bewegt wird, möchten wir den Test auf ändern. Text weiß. Übergang, Farbe und dann die Dauer. Machen wir 300 draus. Die nächste Zeile besteht darin, das Twitter-SVG zu kopieren und einzufügen. Gehen Sie jetzt zurück zur Code-Ressource MD. Hier ist das Twitter-SVG. Kopieren Sie aus den Zeilen zwei, 27, 2238. Markieren und kopieren. Geh zurück zum Code. In den inneren HTML-Code des A-Tags müssen wir nur einfügen. Wenn Sie speichern, formatieren wir den Code, um die richtige Einrückung zu erhalten Ordnung. In Ordnung. Speichern und checken Sie den Browser aus. Kannst du sehen, jetzt haben wir das Twitter-Symbol. Eine Sache, die ich beobachte, ist, dass zwischen dem H-Tag und dem Symbol nicht viel Platz ist. Lass uns etwas sehen. Ordnung. Hier liegt der Mystiker. Es ist in der Tat ein Tippfehler. Es wird B sein, was Magin Bottom ist. Okay? Wenn Sie im Browser speichern, schauen Sie sich das jetzt an. Kannst du sehen? Wunderschön. Ich liebe jedes Detail der Partituren. Und ich hoffe, Sie schreiben einen wunderbaren Kommentar, um meine Handarbeit wirklich zu schätzen. Danke dafür Das nächste in der Reihe besteht also darin, das A-Tag hervorzuheben und es dann so oft zu duplizieren, wie Sie möchten. Ich werde es dreimal duplizieren. Ich denke, das ist genug. Ordnung. Es ist nett. Noch einmal. Und wenn Sie im Browser speichern, schauen Sie mal. Es sieht nett aus. Also, was ich jetzt tun werde, ist, die Symbole und die Hypotext-Referenz zu ändern Symbole und die Hypotext-Referenz Ja. Für mich habe ich das an meiner Seite getan. Sie müssen also die UR-Quelle Ihres Profils kopieren und sie dann direkt in die Hage Reve einfügen sie dann direkt in die Hage Reve Jetzt, die zweite Hage Reve. Wir werden das Git haben. Ich werde einfach hier Git machen. Das ist nicht die URL meines Git-Profils. Du kannst deine an deiner Seite machen. Öffne dein Git-Konto, gehe zu deinem Profil, kopiere dann die URL und füge sie in die HRF Nachdem wir das getan haben, müssen wir das SVG ändern , da es sich um ein Twitter-SVG handelt Gehe zurück zur Code-Ressource. Nun, hier ist der Git. Kopiere die Gits so. Schau es dir in den Zeilen 242, zwei, 254 an. Kopieren Sie es, kommen Sie zurück und fügen Sie es dann hier ein. Formatieren Sie den Code schnell. Außerdem werden wir diesen für Dribble haben. Kopieren Sie die URL Ihres Dribble-Kontos und fügen Sie sie ein. Ich werde einfach das SVG ändern und dann können Sie den Rest an Ihrer Seite erledigen. Wischen Sie es ab, kehren Sie zur Code-Ressource zurück, markieren Sie es und kopieren Sie es dann. Okay, füge es hier ein. Okay, stellen Sie sicher, dass Sie formatieren. Übrigens können Sie die Umschalttaste und T gedrückt halten und dann zum Formatieren auf die F-Taste tippen. Das ist die Abkürzung zum Formatieren mit Predia. Und hier werden wir Ng dabei haben. Kopieren wir auch Ihr Link Den Konto und fügen es hier ein, den Link. Ich werde nur Link Dn spezifizieren. Lösche das SVG. Gehen Sie zurück zur Code-Ressource und lassen Sie uns dann die SVG-Datei für den Link D kopieren Markieren und kopieren. Komm her, füge ein, halte Shift und D gedrückt und drücke FG auf deiner Tastatur, um zu formatieren. Auch hier müssen wir das alles tun können, auch ohne die Vorlesung anzuschauen. Hier werde ich Instagram machen. Kopiere dein Instagram-Konto. Dafür muss ich nur meinen eigenen Instagram-Account kopieren. Wischen Sie es ab, hinter der URL Ihres Instagram-Kontos. Das ist meins, und du kannst mir übrigens auf Instagram folgen. Also müssen wir auch das SVG für Instagram ändern. Einfach so. Schieben Sie eine ungerade um und drücken Sie die F-Taste, um zu formatieren. Schauen wir uns nun das Endergebnis an. Kannst du extrem schön sehen? Auf dem iPad ist es nach rechts ausgerichtet. Dann auf dem Mobilgerät einen Blick darauf. Es funktioniert einwandfrei, genau das, was wir erwartet hatten. Das reagiert auf allen Plattformen und ich mag es. Sie können also klicken, um mein Instagram-Handle zu öffnen, und mir dann unbedingt folgen. Ordnung. Also funktioniert alles wie erwartet einwandfrei. Wir sehen uns in der nächsten Vorlesung. 43. Portfolio-Bildschirmlayout und Artikelanzeige: Wir kommen zurück zum Unterricht. In diesem Abschnitt des Kurses werden wir mit der Gestaltung der Portfoliokomponenten fortfahren. Im Grunde werden wir in dieser Vorlesung das Hintergrundlayout einrichten . Wo, wenn ich das mache. Lass uns anfangen. Öffnen Sie schnell den Explorer und dann SRC Wir müssen es innerhalb der Seiten implementieren . Bevor wir fortfahren, müssen wir die notwendigen Eingaben zur Schriftart vornehmen Öffnen Sie die Komponente, das Home und dann Homes. Wir müssen von Zeile fünf in Zeile zehn kopieren. Markieren und kopieren, schließen, zurück zur Seite gehen, die die übergeordnete Seite ist. Drücken Sie B, um den Explorer zu schließen. Und dann müssen wir es hier einfügen. Wunderschön. Das Nest und die Linie geben hier die Höhe an. Geben wir ihm schnell einen Klassennamen. Mann, Bildschirm. Wir werden es relativ positionieren. Die Mindesthöhe wird 100 V betragen. Danach unterhalb des Renderings der Home-Komponente richten wir unterhalb des Renderings der Home-Komponente das Layout für das Portfolio ein. Jetzt werden wir einen Entwickler haben. Geben Sie ihm einen Klassennamen und innerhalb des Klassennamens müssen wir Stile darauf anwenden. Der obere Rand muss Null sein. Dann das Padin oben Fünf, der Rand unten, wir haben es -40 minus Rand unten, Schließt den Entwickler. Außerdem müssen wir die ID des D angeben. Ich komme gleich her. Wir werden ID, Equa, Portfolio machen Also hier drüben muss man präzise sein. Öffne den Explorer. Gehen Sie zurück zur Kopfzeile, Kopfzeile Punkt G. Also müssen wir nach allem suchen. Hier ist es. Es ist äußerst korrekt. Stellen Sie also sicher, dass es mit dem übereinstimmt, was wir hier haben , denn wenn auf diesen Link geklickt wird, möchten wir diese Komponenten öffnen Wunderschön. Ich rede nur zu viel. Schließ den Header, schließ den Explorer. Und jetzt lass uns weitermachen. Nachdem wir das getan haben, müssen wir diesem DV-Stil auch noch etwas geben. Wir wollen hier einen Inline-Stil verwenden. Das Hintergrundbild, linearer Farbverlauf, wir werden es um -62 Grad drehen Koma, und die Farbe wird hellblau sein. Wir werden EF 7 F B haben. Wir werden Null haben, 50%. Und dieser Teil wird null, 50% ausmachen. Wenn das Koma und der andere Teil weiß sein werden und dann null bis 100% ausmachen. Sie können es auch an Ihrer Seite neu berechnen und es besser aussehen lassen, was die Aufteilung des Bildschirms angeht Platziere genau hier ein Koma und dann lass uns runter gehen Trenne es mit dem Komma. Komm her, es sei denn, die Breite ist angegeben. Die Breite wird 100% betragen. Sie beim Speichern sicher, dass die Anwendung ausgeführt wird, und checken Sie dann den Browser aus. Im Moment sehen Sie möglicherweise nichts auf dem Bildschirm. Lassen Sie uns schnell einige Elemente anzeigen, um sie sichtbar zu machen. Wäre das nicht D? Wir müssen den Code schnell formatieren. Direkt innerhalb des D werden wir ein weiteres D haben, geben ihm einen Klassennamen. Dann müssen wir es auf unserer Plattform, dem Container, responsiv machen . Dann wird das Auto automatisch sein. In diesem DF werden wir ein P-Tag haben, und das innere Hetermal des P-Tags wird das Portfolio sein Wir wollen, dass dieses Portfolio hinter dem Hintergrund steht. Speichern. Nun, hier ist das Portfolio. Geben wir ihm einen Stern. Klassenname, wo im Klassennamen. Wir werden den Test machen. Machen wir 300 Pixel, weil wir wollen, dass es groß Vorerst kannst du dir das Portfolio hier ansehen, wie richtig. Geben Sie jetzt 300 Pixel ein, wenn Sie zum Browser zurückkehren, und dann sehen Sie wunderschön Jetzt möchte ich, dass Sie den Portfolio-Bildschirm genau beobachten Sie werden feststellen, dass es in zwei Teile unterteilt ist. Der erste Teil ist weiß und der rechte Rand des Teils ist hellblau. Deshalb wollen wir , dass dieses Portfolio nur in diesem Teil, dem weißen Teil, Platz findet Wir werden also dafür sorgen, dass der Überlauf ausgeblendet wird , und dann werden wir weitere Stile darauf anwenden Beachten Sie jedoch zunächst, dass der Bildschirm in zwei Teile unterteilt ist, und hier ist die Implementierung Dieser Typ hier. Hier. Wunderschön. Okay. Lass uns weitermachen. Der Test, wir werden einen benutzerdefinierten Farbtest haben, F 7 FB, Cod. Auf mittelgroßen Geräten wird das verbleibende Muster 50 Pixel betragen. Andernfalls werden wir das Paddn links und rechts so einstellen, dass es fünf ist Die maximale Breite haben wir bei 2750 Pixeln. Die Breite 100%. Dann überlaufen. Dann machen wir es richtig krachen. Wenn Sie speichern, nimmt das Portfolio hier jetzt den ersten Teil des Bildschirms ein. Schau es dir an und hier ist es. In Ordnung. Jetzt werden wir einen Stil haben. Wir werden ihn transformieren, übersetzen lassen, null Pixel, -20 Pixel Jetzt, nach dem P-Tag, werden wir noch ein D haben. Wir werden genau den gleichen Stil haben, also muss ich nur Cop hervorheben Komm her. Bitte schauen Sie es sich an und fügen Sie es in das D ein . Im inneren HTML-Code des D werden wir ein P-Tag haben. Gib dir den Klassennamen. Der Test, wir werden einen blauen Test machen. Für A, FDE, auf mittleren Geräten werden es acht Pixel sein Andernfalls die Polsterung links und die Polsterung rechts . Es werden fünf sein. Die Vorderseite soll extra groß sein, innerhalb der beiden Spitzen, und dann müssen wir extra bod wählen Der Text fünf Excel. Gewinnen Sie den inneren HTML-Code des P-Tags, wir werden aktuelle Arbeiten durchführen. Speichern. Lass es uns überprüfen. Ordnung. Wunderschön. Jetzt haben wir die neuesten Arbeiten. Okay. Mir fällt schon etwas auf, aber ich werde es dir sagen, wenn wir fertig sind Nach dem letzten P-Tag der letzten Arbeit werden wir ein weiteres P-Tag haben. Geben wir den Stern. Wir wollen die String-Interpolation verwenden. Die maximale Breite, machen wir es in Excel. Auf den mittleren Geräten ist die Entschuldigung weg. Behalten wir 80 Pixel bei. Pad links und Pad und rechts, lassen Sie uns fünf beibehalten. Der Test wird aus System-Pixen bestehen. Die Testfarbe für sieben, c26d. Dann Linienhöhe, machen wir es einfach, Rand oben, usw. Jetzt weisen wir ihm das Telefon zu, damit wir Google Hind verwenden Ich werde Hind Dot Class Name machen. Perfekt. In das innere H T ML des P-Tags werden wir dort etwas kopieren und einfügen. Öffne das fertige Werk. Ich muss das nur hervorheben. Klicken und kopieren. Sie können weiterschreiben, was auch immer Ihr Unternehmen oder sich selbst beschreibt. Ich muss es nur hier einfügen. Lass uns als Code formieren, speichern. Und hier ist es. Alles funktioniert gut, aber wir müssen ein Problem beheben. Das Portfolio überschneidet sich ebenfalls, der Test überschneidet sich Schauen wir uns das an der fertigen Arbeit an. Schau dir das fertige Werk an, alles ist im ersten Teil enthalten. Außerdem wird das Portfolio als Hintergrund für den Rest des Artikels verwendet als Hintergrund für den Rest des , und Sie können es sich ansehen. C. Was machen wir jetzt? Geh zurück zum Code. Es ist ziemlich einfach, das zu tun. Wenn du nach oben scrollst, würde das nicht richtig sein. Lass uns das Minor auf 250 Pixel setzen, damit es das Objekt nach oben schieben kann. Wenn Sie jetzt im Browser speichern, sehen Sie, alles ist gut ausgerichtet. Ich liebe das. Wunderschön. Eine weitere Sache , auf die ich Sie aufmerksam machen möchte , ist , dass die Elemente am linken Bildschirmrand gerade wachsen. Wir können das beheben, indem wir diesen Container größer machen als den Container am rechten Bildschirmrand. Ich hoffe, Sie können beobachten und sehen, wovon ich spreche . Komm her. Lass uns sehen, wo wir den Bildschirm aufgeteilt haben. Genau hier. Machen wir das jetzt auf 45%. Wenn Sie im Browser speichern, ist alles gut ausgerichtet, und genau das ist das erwartete Ergebnis. Jetzt sind wir mit der Einrichtung des Layouts fertig. In der nächsten Vorlesung werden wir mit der Implementierung der Slider-Karten fortfahren . Das ist alles für den Moment. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert und pass immer auf dich auf. 44. Portfolio-Karte: Lassen Sie uns fortfahren, die Elemente auf dem Bildschirm anzuzeigen. Zurück zum VS-Code. Das erste, was wir hier tun werden , ist das Importieren der Daten. Minimiere den VS-Code, ziehe ihn an den rechten Bildschirmrand und öffne dann die Portfolio-Ressourcen. Innerhalb der Portfolio-Ressourcen werden Sie die Datenquelle sehen, die Datenquelle öffnen und hier liegen die Daten Gs. Gehe zurück zum VS-Code. Common B, um den Explorer zu öffnen. Ziehen Sie nun die Daten per Drag & Drop direkt in das App-Verzeichnis. Wunderschön. Maximieren Sie jetzt den IAS-Code. Dies schließt die Daten ein, die wir in der Slider-Karte verwenden Es ist nur ein Array von Objekten. Innerhalb des Objekts haben wir den Titel, Namen, die Beschreibung und die Bilder. beim zweiten Element haben wir genau das Gleiche. Und so weiter und so fort. Lassen Sie uns schnell all diese Elemente auf dem Bildschirm rendern. Öffnen Sie die Komponenten. Klicken Sie mit der rechten Maustaste auf die Slider-Karte. Hier auf Neue Datei. Mein Slider-Punkt, G ist. Noch einer, klicken Sie mit der rechten Maustaste auf Neue Datei. Slider Card Dot Gs. Generieren Sie die funktionale Komponente direkt in den Dateien. Schließen Sie den Explorer. Fahren wir mit meinem Slider GS fort. Damit die Artikel auf dem Bildschirm angezeigt werden. Zuerst müssen wir es in diese Komponente importieren. Importieren Sie ein Datenarray aus App-Slash-Daten. Natürlich befinden sich die Daten S direkt im App-Verzeichnis. Nachdem Sie das getan haben, kommen Sie her. Wisch es ab. Wir in der D, wir werden die Daten kartografieren. Jetzt werden wir Data Array Dot Map machen. Wir nehmen einen Artikelspaltenindex. Dieses Element hier steht für jedes Element im Array. Lassen Sie mich Ihnen den Titel, den Namen, die Beschreibung, die Bilder usw. zeigen . Wann immer wir den Titel abrufen möchten, geben wir den Artikelpunkttitel, Artikelpunktnamen, die Beschreibung usw. ein. Sie können den Namen des Elements beliebig ändern, achten Sie jedoch darauf, ihm einen aussagekräftigen Namen zu geben , der die Absicht beschreibt Hier stellen wir es auf eine Pfeilfunktion ein, um Perenten zu öffnen und zu schließen Wir werden die Benutzeroberfläche zurückgeben. Wir werden ein D mit dem Klassennamen M Slider haben. Gewinnen Sie meinen Slider, wir rendern die Slider-Karte, das ist dieser Typ hier. Also geh nach oben. Jetzt müssen wir den Slider von der Dot Slash Slider-Karte importieren. Also der Einfachheit halber, ich werde Slider machen. Näher dran mit dem selbstschließenden Etikett. Und jetzt werden wir das Objekt und den Index als Requisiten an die Slider-Karte weitergeben als Requisiten an die Slider-Karte Also werde ich Artikel gleich Artikel machen. Und dann index equ index. Also geben wir diese Requisiten die Slider-Karte weiter. Was für Neuigkeiten? Lassen Sie uns weitermachen, um die Requisiten direkt im Slider zu erhalten die Requisiten direkt im Slider Schieben Sie einen Schnitt, und dann müssen wir das Objekt, einen Index, destrukturieren Ich denke, wir sollten ein Haarfragment verwenden. Markieren Sie es, wischen Sie es ab und ich mache das Reaktionspunktfragment W in den Fragmenten, wir erhalten ein D, geben Sie den Klassennamen ein. Die Höhe wird 200 Pixel betragen. Es ist eine benutzerdefinierte Höhe. Auf einem großen Gerät wird die Höhe 450 Pixel betragen. Auf einem mittleren Gerät wird die Höhe 400 Pixel betragen. Auf einem kleineren Gerät, Ihrem Mobilteil, wird die Höhe 200 Pixel betragen Auf einem großen Gerät wird die Breite 650 Pixel betragen. Auf einem mittleren Gerät wird die Breite 450 Pixel betragen. Lass uns 300 Pixel draus machen. Wir werden eine relative Position haben. Die Marge wird hoch sein, auf Def geschlossen. Gewinnen Sie die DVD, wir werden eine weitere DF haben. Gib ihm einen Klassennamen. Die Höhe wird voll sein , also 100%. Die Breite ist voll. Geben wir ihm eine Gruppe. Dann machen wir Coso All Scroll. Der Z-Index Z 50 ist relativ zur Position. Das D wurde geschlossen, und innerhalb des D werden wir ein IM-Tag haben, S R C equ Denken Sie daran, dass wir die Requisiten hier erhalten haben, und dieses Objekt steht für jedes Element innerhalb der R A. H, und hier drüben, wir ordnen das Datenfeld und dann übergeben wir das Denken Sie daran, dass für dieses Element ein Index als Test an die Slider-Komponente gesendet wurde. Also hier unten, um auf die Bilder zuzugreifen, werde ich Item-Punkt-Bilder machen Und hier sind es Bilder. Also wollen wir das erste Bild innerhalb des Arrays bekommen. H. Ich rede zu viel. Um auf das erste Element in einem Array zuzugreifen. Natürlich weißt du das. Sie müssen nur den Array-Index Null verwenden. Schließen Sie es mit dem Self-Close-In-Tag. Wenn du selbst. Mal sehen, was wir im Browser haben. Auf dem Bildschirm wird nichts angezeigt. Wissen Sie warum? Lass es mich dir zeigen. Öffne den Explorer. Scrollt die Seite, auf der Jz steht, nicht runter? nach dem Schließen von Dif zeigen, Lassen Sie mich Ihnen nach dem Schließen von Dif zeigen, dass dieser Dif der Klassenname des Containers war Wir werden noch einen Dif haben. Gib ihm einen Klassennamen. Vorerst werden wir keinen Stil anwenden. Hier werden wir meinen Slider rendern. Schließen Sie es aus dem selbstschließenden Tag und achten Sie bitte darauf, es oben zu importieren. Speichern Sie im Browser. Sie sind diese. Kannst du das sehen? Jetzt ist es uns gelungen die Bilder anzuzeigen. Es sieht gut aus. Aber wir müssen es richtig dimensionieren. Lassen Sie uns es so stylen , dass es schön aussieht. Das T wird sein. Die Breite wird 100% betragen. Die Höhe wird 200 Pixel betragen , aber auf einem großen Gerät. Lass uns 50 Pixel draus machen. Machen wir es auf einem mittleren Gerät auf 300 Pixel. Die maximale Breite beträgt 100%. Kannst du sehen? Jetzt haben die Bilder genau die gleiche Größe. Lassen Sie uns die Ränder etwas abrunden. Jetzt mache ich den gerundeten Strich G., Sf und den Browser. Schau es dir an. Kannst du sehen? Jetzt sind die Ränder alle abgerundet. Nach diesem D werden wir ein weiteres D haben . Lassen Sie uns diese absolute Position einnehmen. Von oben, 14 und kleineres Gerät. Links 12, von links, abgerundetes LG. Wir wollen auch, dass die Grenzen abgerundet werden. Wir erstellen die Kartenüberlappung, geben ihr die Farbe Weiß. Die Höhe wird 200 Pixel betragen. Auf einem großen Gerät beträgt die Höhe dann 30 bis 50 Pixel, auf dem Median 300 Pixel Breite 100% Also innerhalb des Tauchgangs. Okay. Kurz bevor wir weitermachen, müssen wir ihm einen Box-Shadow geben . Lass mich dir etwas zeigen. Jetzt mache ich VG, Red 500. Ich möchte wirklich, dass du siehst, dass sich die Karten überschneiden. Kannst du das sehen? Siehst du, es sieht wirklich nett aus? Sieht nett aus. Das ist die Kartenüberlappung. W der rote Hintergrund. Jetzt ändern wir es auf Weiß. Um es sichtbar zu machen , denn wenn es weiß ist, können Sie es möglicherweise nicht klar sehen. Kannst du es sehen? Es ist nicht sichtbar genug. Was wir also tun müssen, ist, Box Shadow an den Ecken anzubringen. Also werde ich Stale Box Shadow machen. 48 A von E. Wir wollen den Box Shadow sowohl von links als auch von rechts, oben und unten anwenden rechts, oben und unten Minus zehn Pixel, zehn Pixel, 20 Pixel, zehn Pixel. Lass uns speichern und sehen Ordnung. Wunderschön. Ich liebe das. Sieht wirklich nett aus. Formatieren Sie den Code mit Predia. Wo in diesem D werden wir den Namen des Elements anzeigen Wir werden ein weiteres Div mit dem Klassennamen haben. Wir werden seine Position relativ hoch haben, immer 200 Pixel. Auf großen Geräten wird die Höhe 50 Pixel betragen. Auf einem mittleren Gerät wird die Höhe 300 Pixel betragen. Natürlich sind dies alles meine Spezifikationen, sodass Sie Ihr eigenes T an Ihrer Seite erstellen können. 100%. Schließ das D. Innerhalb des D werden wir ein P-Tag haben. Gewinnen Sie das innere Hetemel des P-Tags. Wir werden den Punktnamen für den Artikel verwenden. Lassen Sie mich Ihnen zeigen , wo in den Daten. Hier sind die Namen. Okay? Im Browser speichern. Hoppla. In Ordnung. Also es taucht tatsächlich auf, aber es steckt hinter dem Bild. Also, was ich jetzt tun werde, ist, ihm den richtigen Stil zu geben. Wir müssen es absolut positionieren. Und dann die letzten drei. Und wenn Sie den Browser auschecken, hier ist er. Ordnung. Mir gefällt nicht, wie es von links aussieht. Es gibt überhaupt keinen Spielraum. Was ich jetzt machen werde, ist von links. Lass uns weit gehen. Beim Test wird es O G sein, die Schrift. Machen wir 300 draus. Okay. In Ordnung. Alles ist jetzt gut aufeinander abgestimmt und ich liebe die Endergebnisse. Schau mal. Ist das nicht wunderschön. Eine weitere Sache, die wir tun werden, ist das anklickbare Symbol anzuzeigen Gleich nach dem IMD-Tag werden wir ein D haben und den Klassennamen angeben Wir werden es als absolut positionieren. Von unten, 270 Pixel, auf einem großen Gerät. Wir versuchen also tatsächlich, alle Breakpoints ins Visier zu nehmen. Also ja, es wird bei 44 erscheinen, ein mittelgroßes Gerät. Auf einem kleineren Gerät wird es zwei erscheinen. Es werden 270 Pixel angezeigt. Aber etwas, das wir hier tun müssen, ist, das auf 100 Pixel zu ändern. Ja. Ich denke, das ist richtiger. Links, sechs, von links, es wird bei sechs beginnen. Dann wollen wir es abgerundet haben LG , Übergang, Die Dauer wird 300 sein Ich hoffe, du kannst es klar sehen. Die Opazität ist Null. Lassen Sie es uns gruppieren. Wir möchten nur, dass das Symbol angezeigt wird, wenn wir den Mauszeiger über das Bild bewegen Gruppe. Jetzt wird die Opazität 100 sein Bg, der Hintergrund, 47 c2cd. Der Cos, der Coso wird ein Pointer sein. Wir lassen es flexibel anzeigen, Elemente zentriert ausrichten, Inhalt zentriert ausrichten Akzentfarbe im Schatten. G für 76 bis sechs d. Die Breite des Symbols beträgt zehn, die Höhe zehn und das mittlere Gerät die Breite 12. Auch hier gilt, dass auf einem mittleren Gerät die Höhe 12 sein wird und LG, ich spreche nicht von LG, wenn es um das Produkt geht. Eher auf einem großen Gerät. W 20, wieder auf LG H 20. Ordnung. Es ist ziemlich komplex hier. Okay? Also lass uns das D. Beautiful schließen. Du kannst es noch einmal durchgehen. Wenn es so stressig wird, kannst du meinen Code kopieren und einfügen. Es ist überhaupt kein Verbrechen. Lassen Sie uns nun das SVG anzeigen. Gehe zurück zur Code-Ressource. Sie werden I S V G für Card Slider sehen. Lass uns dieses SVG gleich hier kopieren. Geh zurück zum Mantel. Füge es in dieses Sieb ein. Formatieren wir den Mantel. S im Browser. Ordnung. Jetzt, wenn ich auf den Browser gehe, siehst du, dass ich bin. Kannst du das sehen? Ich liebe es so. Kannst du das sehen? Kannst du sehen, geben wir ihm einen Box-Shadow. Geh und stilisiere das D. Platziere deine Maus genau hier. Drücken Sie die Enter-Taste, den Stil, Box Shadow Mit dem Slider Cut Shadow wird es genauso sein. Ich muss nur herkommen und dann einfügen. Im Browser speichern. Jetzt haben wir es. Ich liebe das Endergebnis. Schau es dir an. Ordnung. Das ist wunderschön, fantastisch. Ich denke, wir sind mit dieser Komponente fertig, und wir sind endgültig fertig. Jetzt sind wir mit der Anzeige der Karte fertig. Ein sehr wichtiger Punkt , auf den ich Sie aufmerksam machen möchte, ist das dynamische Routing-System. Wir möchten dieses Symbol nicht als Design anzeigen. Wir wollen, dass es funktioniert. Es geht also eher um Funktionalität als um Design. Wenn ich auf dieses Symbol klicke, sollten wir in der Lage sein, diese Elemente an eine Portfolio-Detailseite weiterzugeben . Wenn ich auf diesen Typen klicke, der Name, die Bilder und alles, was mit diesem Typen zu tun werden der Name, die Bilder und alles, was mit diesem Typen zu tun hat, auf eine neue Seite übertragen. Genau wie dieser Typ und der Rest von ihnen. Die Idee ist einfach. Wir möchten einzelne Beiträge erhalten, wenn auf dieses Symbol geklickt wird. Lassen Sie uns den Internetvortrag umsetzen, einfach weil ich ihn gerne im Detail erklären würde Siehe Internetvortrag. Bleib konzentriert. Ich werde mich immer darum kümmern. 45. Implementierung des Kartenschiebers: Wir haben die Elemente in einer Spalte angeordnet. Aber wenn Sie das fertige Projekt auschecken, werden Sie feststellen, dass die Elemente alle in einer Reihe angeordnet sind. Lassen Sie uns das schnell mit Hilfe von React Slick implementieren mit Hilfe von React Slick Zurück zum FS-Code C B, um den Explorer zu öffnen. Slider-Karten, öffne meine Slider-Punkte. Auch hier müssen wir einige Eingaben direkt von Home-Component, Home-Component, Home-Component kopieren direkt von Home-Component, Home-Component, Home-Component Wir müssen aus den Zeilen zwei bis vier kopieren. Kopieren Sie es und fügen Sie es dann hier ein. Der nächste Schritt besteht darin, die Slider-Einstellungen zu implementieren. Keine Sorge, ich habe es schon vorbereitet. Also lasst es uns schnell aus der Code-Ressource do MD holen. Hier ist es. Sie müssen die Zeilen 340 2482 markieren und kopieren Zeilen 340 2482 Kopieren Sie, kommen Sie her und fügen Sie es dann wie folgt in die Komponente ein Speichern Sie, wir müssen es anwenden. Wir werden also eine konsistente Schleife haben. Slide to Show wird eins sein, Slide-to-Scroll wird eins sein. Das ist die Geschwindigkeit. Der Pfeil soll fallen, weil wir nicht wollen , dass er einen Pfeil nach links oder einen Pfeil nach rechts hat. Der Mittelmodus ist wahr. Der Abstand in der Mitte beträgt 400 Pixel. Der Punkt ist auf „Wahr“ gesetzt. Wir möchten einige Punkte direkt unter den Bildschiebereglern haben müssen direkt unter den Bildschiebereglern Jetzt wollen wir es auf Mobilgeräten stilisieren. den Grenzwert von 1.700 erreichen, werden wir die zu zeigende Folie als Eins haben Slide to Screw ist eins. Wir werden es kontinuierlich nachschauen lassen. The Dots ist auf true gesetzt. Der Abstand in der Mitte beträgt 400 Pixel. Es reagiert also auf den Breakpoint von 640. An diesem Grenzpunkt ist die anzuzeigende Folie eins, Scrollen ist eins, unendlich, was bedeutet, dass wir wollen, dass kontinuierlich gescrollt Der Punkt ist auf Kraft gesetzt. Der Mittelmodus ist auf Kraft eingestellt, und danach wird der Mittelscheitel auf Null gesetzt Wenden wir diese Schiebereglereinstellungen auf die Elemente an. Jetzt müssen wir dieses D löschen. Hier machen wir Slider. Direkt im Slider müssen wir die Einstellungen verteilen . Einfach so. H markieren und ausschneiden, und dann müssen wir es über Kopf zusammenpacken. Wunderschön. SF. Schauen wir uns den Browser an. Hoppla. Es heißt, dass der Name Slider mehrfach definiert Lassen Sie uns nach oben scrollen und sehen, was passiert. Wir haben hier einen Slider und wir haben auch einen Slider hier. Es gibt also einen Namenskonflikt. Schrauben Sie es an und lassen Sie es uns reparieren. Lass uns Slider-Karte aus Slider-Karte machen. Wir müssen es auch hier anwenden. SF, und im Browser sind sie diese. Kannst du es sehen? Sieh so wunderschön aus. Ich liebe es. Nun, hier sind die Punkte. Kannst du die Punkte ganz unten sehen? Schauen wir es uns also auf dem Mobilgerät an. Auf einem Mobilgerät. Die anzuzeigende Folie ist eine, und die Folie, die gescrollt werden soll, ist ebenfalls eine. Jetzt haben wir die Punkte unten deaktiviert. Kannst du das sehen? Aber auf dem iPad ist die anzuzeigende Folie eine, und die Folie zum Scrollen ist auch eine. Wir können nicht zwei Folien anzeigen. Kannst du sehen, wir haben nur eine Vorstellung, und das ist dieser Typ in der Mitte. Alles funktioniert einwandfrei. Ups, wir müssen die Konsole wegen dieses nervigen Fehlers löschen , weil wir ihn bereits behoben haben . In Ordnung. Wenn Sie genau hinschauen, werden Sie feststellen, dass der Abstand zwischen dem P-Tag und dem Slider ziemlich groß ist. Also werden wir den Slider ein wenig nach oben schieben. Und hier ist eine weitere Herausforderung für dich. Also poste das Video auf deiner Seite und versuche dann, es schnell zu korrigieren. Ordnung. Also lass mich dir helfen. VS Code, öffne die Seite mit den Punkten s. Genau hier, in dieser Entwicklung, in der wir meinen Slider gerendert haben Lassen Sie uns den Klassennamen löschen. Scrollen Sie nach oben. Wir werden diesen Stil von hier aus kopieren. Markieren Sie die Kopie. Gewinnen Sie dieses D. Wir werden es einfügen. Dann speicherst du, das. In Ordnung, es ist ein bisschen gestiegen. Also hier werde ich 100 machen. Das entspricht eher der Angabe des oberen Randes auf -100 Pixel, wodurch das Objekt nach oben gedrückt wird Es sieht toll aus, aber wir wollen es auch noch weiter anheben. Lass uns 170 Kuchen backen. Minus 170 Pixel. Wunderschön, und das löst das Problem. Kannst du das sehen? Ich liebe den Rest. 46. Dynamische Route: Hallo zusammen. Willkommen zurück bei Claus. In dieser Vorlesung. Wir werden mit der Implementierung der einzelnen Beitragsseite fortfahren. Wenn ich auf diesen Artikel klicke, sollten wir in der Lage sein, den Artikel auf eine neue Seite weiterzugeben. Außerdem sollten wir, wenn ich auf diesen Typen klicke, in der Lage sein, ihn präzise auf eine neue Seite weiterzugeben . Wir können es die Seite mit den Portfolio-Details nennen. Genau hier kommt dynamisches Routing ins Spiel. Lassen Sie uns weitermachen, es schnell zu implementieren. VS-Code, öffne den Explorer. Slider-Karte, Slider-Karte. Wenn Sie es hier bemerken, werden Sie feststellen, dass wir kein On-Click haben. Selbst wenn du auf diesen Typen klickst, passiert nichts. Kannst du das sehen? Man kann nur drüber fahren und es wird angezeigt Aber wenn du klickst, wird nichts schlimmer. Wir müssen auf Klick D D hier drüben implementieren , wo sich das SVG befindet Standardmäßig läuft Next es auf der Serverseite. Um On-Click zu implementieren, müssen wir vom serverseitigen Rendern zum clientseitigen Rendern wechseln serverseitigen Rendern zum clientseitigen Rendern Scrot top, um einen Schalter zu haben, werden wir den Client verwenden Außerdem werden wir einige Beiträge leisten. Wir werden den Use-Router aus der nächsten Slash-Navigation importieren aus der nächsten Slash-Navigation Der Use-Router ist eine Funktion, also müssen wir sie aufrufen Verwenden Sie einen Router. Weisen Sie es einer Variablen zu. Koste Router und Ue Router. Lassen Sie uns schnell den Klick hier auf den Steve definieren. Wir werden einen On-Click machen und ihn auf eine Pfeilfunktion umstellen. Mit Hilfe des Use-Routers können wir den Artikel also auf eine neue Seite verschieben. Und wie wir das machen, ist einfach. Ich mache Router-Dots, Drücken, Öffnen und Schließen von Perentenss, und dann wollen wir die dicke Tasche nutzen Wir wollen die Artikel dynamisch anhand der ID abrufen. Also mache ich Schrägstrich, Portfoliodetail, Schrägstrich , die ID Erinnern Sie sich daran, dass ich Ihnen in der vorherigen Vorlesung gesagt habe, dass wir den Index als ID verwenden, und wir ihn hier versuchsweise destrukturiert haben. Gut unterrichtet Wunderschön. Hab das nicht gemacht. Wenn ein Benutzer auf das DF klickt , das dieses Symbol enthält. Mit anderen Worten, wenn ein Benutzer auf dieses Symbol klickt, möchten wir diese ID an eine neue Seite namens Portfolio Dt weitergeben . Also, wenn Sie den Browser speichern und auschecken, lassen Sie uns das wiederholen. Wenn Sie darauf klicken, wird eine 404-Fehlerwarnung zurückgegeben, die besagt, dass die Seite nicht gefunden werden konnte Eine Sache ist das Einstellen. Es ist uns gelungen, die ID dynamisch abzurufen. Wenn Sie in der Registerkarte nachschauen, werden Sie feststellen, dass das D dieses Beitrags Null ist, was dem Index des Beitrags entspricht. Verstanden. Perfekt. Wenn du zurückgehst, lass uns darauf klicken. Schau es dir an. Auf der Registerkarte werden Sie die ID sehen. Die ID ist eins. Kehren wir nun zum VS-Code zurück , um die dynamische Seite zu erstellen. Common B, um den Explorer zu öffnen. Ich werde die Portfoliodetails kopieren, die wir hier als Route angegeben haben. Kopieren Sie, klicken Sie mit der rechten Maustaste in der App auf Neuer Ordner. Fügen Sie das Portfoliodetail in den Text ein. Machen Sie sich Notizen. Was Sie hier haben, muss genau dem entsprechen, was Sie als Route angegeben haben. Wenn Sie es anders machen, wird es nicht funktionieren. Ups, schau mal. In Ordnung. Gewinnen Sie das Portfolio-Detail, jetzt erstellen wir die dynamische Route selbst. Neuer Ordner. Um eine dynamische Route zu erstellen, müssen wir sie in eine eckige Klammer setzen. Was wir uns hier holen werden, ist die ID auf der Enter-Taste. Nachdem wir das getan haben, müssen wir eine Seite innerhalb der ID erstellen. Klicken Sie mit der rechten Maustaste auf die ID, neue Datei. Ich werde diese Seite Punkt Gs nennen. RFC zur Generierung der Funktionskomponente. Wir werden einen Hage One-Tag für Unterrichtsarbeiten haben. Ich werde eine dynamische Seite erstellen. Geben wir dem Hage einen Klassennamen und dem Test sieben Excel Schauen Sie sich den Browser an. Als ich klicke, Ups, ist etwas schief gelaufen Ordnung. Oh, mein Unrecht. Leute, wir müssen den Schrägstrich so angeben. Ich glaube, wir haben es schon einmal gemacht. Wenn Sie die Anwendung neu laden, klicken wir. Kannst du sehen? Jetzt haben wir eine dynamische Seite. Lass uns auf diesen Typen klicken. Kannst du sehen? Wir haben die dynamische Seite? Wunderschön. Alles funktioniert wie erwartet einwandfrei, und ich liebe den Rest. Dies ist die Seite, auf der J Jetzt konnten wir unsere dynamische Route implementieren. In der nächsten Lektion werden wir uns den Beitrag schnappen und ihn auf dem Bildschirm anzeigen lassen. Glauben Sie mir, das Endergebnis wird Sie umhauen. Das ist vorerst aus. Wir sehen uns in der nächsten Vorlesung. Bleib konzentriert, A, pass auf dich auf. 47. Erhalte die ID auf einer neuen Seite (Dyamicals): In der vorherigen Vorlesung. Es ist uns gelungen , die ID jedes Elements auf eine neue Seite zu übertragen. Wenn Sie hier auf eines der Elemente klicken, werden wir die ID dynamisch an eine neue Seite weitergeben. Wenn Sie sich die Registerkarte ansehen, werden Sie sie bestimmt dort sehen. Dieser Artikel hat die ID eins. Denken Sie daran, dass wir den Index als ID verwenden. In dieser Vorlesung werden wir uns diese ID schnappen, und zwar mit Parametern Öffne den VS-Code. In der App werden wir einen neuen Ordner namens page erstellen . Auf der Seite werden wir ein weiteres Verzeichnis mit dem Namen Portfolio Dt Design erstellen . innerhalb des Portfolio-Dt-Designs Lassen Sie uns innerhalb des Portfolio-Dt-Designs schnell eine neue Seite erstellen Klicken Sie mit der rechten Maustaste auf neue Datei, und dann nennen wir sie Index Dot GS Nachdem Sie das getan haben, schließen Sie die Seite. Öffnen Sie nun das Portfolio-Detail. Innerhalb der dynamischen Route müssen wir die Seite öffnen. Portfoliodetail, ID und Seite. Schließen Sie den Explorer. Was wir hier tun müssen, ist die grundlegenden Funktionskomponenten, die wir generiert haben, hervorzuheben und zu löschen. Dann haben wir const portfolio und setzen es auf eine Pfeilfunktion Lassen Sie uns schnell das Standardportfolio exportieren. Lassen Sie uns React aus React importieren. Wir müssen Requisiten aufnehmen. Wir müssen uns die ID und die Daten schnappen. Wir müssen das Portfolio-Detaildesign importieren. Lassen Sie uns schnell das Datenarray importieren. Erledigt. Genau hier werden wir die Benutzeroberfläche zurückgeben. Wir werden React Dots Fragmente verwenden. Wickeln Sie die Fragmente auf, lassen Sie uns das Portfolio-Design rendern. Gestaltung der Portfoliodetails. Schließen Sie es mit dem selbstschließenden Etikett. Die Verschachtelungslinie dient dazu, die Daten als Requisiten in das Portfolio-Design weiterzuleiten als Requisiten in das Portfolio-Design Daten sind gleich, Datenarray, und hier machen wir Props Dots Params Vergiss nicht, dass wir hier Requisiten aufnehmen, wunderschön. Die ID entspricht den Requisiten Punkt, Parameter-ID. Schließlich ist Datenarray gleich, Datenarray. Lassen Sie uns die Parameter konsolen. Die IP-Parameter-ID der Konsole protokollieren. Nachdem wir das getan haben, werden wir oben den Client verwenden Wir müssen vom Sea-Side-Rendering zu einem clientseitigen Rendering wechseln . Lass uns klicken, um uns die Konsole anzusehen. Wenn du also auf ein Objekt klickst, komme ich zu I, um die Konsole zu öffnen. Dann werden Sie sehen, dass die Artikel-ID Null ist. Machen wir es lesbarer. Hier werde ich es tun. Die ID ist, was auch immer die ID sein mag. Speichern, und hier möchte ich auf ein anderes Objekt klicken. Lass uns auf diesen Typen klicken. Öffne die Konsole und du siehst, dass die ID zwei ist. Zwei 48. Einzelne Beitragsseite (Portfolio Detail Design): Lassen Sie uns mit dem Portfolio Dido Design fortfahren. Lassen Sie uns schnell das Hintergrundlayout einrichten. Gleich nach dem Schließen von df der Position Absolute. Hier ist es. Wir werden eine weitere DF haben, gib ihr einen Klassennamen. W im Klassennamen, wir werden das Raster anzeigen lassen, Spalte für die Rastervorlage ist 12. Lassen wir es relativ positionieren. Der Abstand links und rechts ist Null. Auf einem großen Gerät ist der Leerzeichen links und rechts ebenfalls Null. Schließe das D innerhalb des D. Jetzt geben wir ihm den Stern. Der Hintergrund. Linearer Gradient. Wir wollen seinen 90-Grad-RGBA 238, 247, 251 und eins Wir wollen, dass dieser Anteil bei 58% von 100 liegt. Dann der andere Teil RGB A zwei, 255 2551. Wir möchten, dass es 52% des Bildschirms einnimmt. Das ist nur meine Spezifikation. Du kannst auf deiner Seite mehr tun. In der Def werden wir nun noch ein De haben, ihm einen Klassennamen geben und dann Column Span 12. Auf einem großen Gerät: Spalte, Bereich acht, Rand unten Wir wollen scrollen. Auf einem großen Gerät links klopfen“ und „Nach rechts abbiegen“ gleich Null Auf einem kleineren Gerät links klopfen“ und „Nach rechts trennen“ ebenfalls Lass uns 20 draus machen. Dann wissen wir alle , dass jeder Portfolio-Beitrag mehrere Bilder enthält. Lassen Sie uns die Bilder schnell anzeigen. Datenpunktbilder Punktkarte. Nimm einen Gegenstand. Nehmen wir ein D und geben ihm einen Klassennamen. Wenden wir schnell die Utility-Klasse an. Wir werden einen Display-Flex haben. Begründen Sie den Inhalt in der Mitte. Aber auf einem großen Gerät wollen wir den Inhalt bis zum Ende rechtfertigen? Lassen Sie uns die Elemente zentriert ausrichten. Schließt das D. Wird das nicht, wir werden das IMD-Tag S R C equ haben, Item, das ist dieser Typ hier Schließ es mit dem SF-Abschluss-Tag. Wenn Sie Ventrical, den Browser, sehen, und hier ist er. Kannst du das sehen? Hier sind alle Bilder , die der Website der Food Delivery Company entsprechen . Wir haben all diese Bilder direkt in der Gegend. Sie können es sich in den Daten als ansehen. Jetzt ist es uns gelungen, die Bilder anzuzeigen. Lassen Sie uns schnell Stile darauf anwenden. Bei Portfolio-Fotos. Die Höhe wird automatisch sein. Geben wir ihr einen Klassennamen. Der obere Rand ist 20. Wir möchten, dass die Ränder der Bilder abgerundet sind. Im Browser, hier ist es. Kannst du es sehen? Alles sieht sehr schön aus. Eine Sache, die wir hier nicht wollen, ist, dass das erste Bild ein überlaufender Container ist Lassen Sie uns das also kontrollieren, indem wir die Breite anwenden. Die Breite wird 800 sein, wenn Sie im Browser speichern, und jetzt haben wir sie. Wunderschön. Die nächste Zeile besteht darin, die Elemente auf der rechten Seite des Bildschirms zu implementieren. Übrigens, wenn Sie zur Startseite zurückkehren auf eines dieser Elemente klicken, werden wir es dynamisch abrufen Nach der Veröffentlichung von df. Wir werden noch eine DF haben. Jetzt möchte ich ein bisschen schnell sein. Auf einem großen Gerät muss ich das nur kopieren und dann auf die Piste fahren. Auch auf einem großen Gerät wollen wir, dass px Null ist Kleines Gerät, wir wollen auch, dass P X Null ist. Natürlich sollten Sie das CSS-Äquivalent des Px und der übrigen Öfen kennen des Px und der übrigen Öfen Ich habe es euch allen gezeigt. Jetzt haben wir ein anderes Dif, gib diesem Div-Klassennamen gib diesem Div-Klassennamen Der Rand tb ist zehn, aber auf einem kleineren Gerät ist der Rand tb 24. Die Breite wird die volle Breite sein. Bei LG werden wir eine maximale Breite von 300 Pixeln haben . Auch bei LG werden wir linke Ende trennen und das rechte Ende auf eins abbiegen Die Polsterung am linken Ende, pardon rechts, wird drei sein. Also werden wir es von oben bis hinten klebrig haben. Der untere Teil wird 14 sein. Das wird also eine klebrige Position haben. Ich denke, das ist die einzige Utility-Klasse , die ich nicht erklärt habe. Und jetzt habe ich es erklärt. Wunderschön. Das getan zu haben. Wir werden eine Absicherung von einem Tag auf den anderen machen. Gewinnen Sie den Hedge One, wir werden den Namen des Portfolios anzeigen. Also sozusagen der Name des Projekts. Ich werde Data Dot Name machen. Lass uns sehen, was wir haben. Ordnung. Das ist Yum Food Company A. Geben wir schnell den Stil an. Wir greifen auf die Utility-Klasse von Text d Three Cell zu. Der untere Rand ist vier, also die Farbe des Textes, wir wollen, dass unsere Farben einheitlich sind. Lassen Sie uns also ein hellblaues Bild verwenden. Für acht FDE. Wenn Sie es bemerken, werden Sie feststellen, dass wir bei unseren Farben, einschließlich der Schriftgröße und der übrigen Farben, konsistent geblieben sind Das liegt einfach daran, dass wir bei der Erstellung einer professionellen Anwendung die Schriftarten, die Farbe und den Rest des Designs einhalten müssen. Das ist natürlich ein wichtiger Punkt , den Sie zur Kenntnis nehmen müssen. Ups, schau mal. Machen wir 20 draus. Im Moment haben wir es hier. Lass uns weitermachen. Okay Leute, es gibt keinen Rand zwischen dem Bild und dem Namen. Lass uns weitermachen. Wir müssen das am Ende korrigieren. Habe den Namen des Projekts nicht angezeigt. Lassen Sie uns mit der ersten Beschreibung und der zweiten Beschreibung fortfahren . Jetzt müssen wir ein p-Tag verwenden. Beschreibung des Datenpunkts. Hier ist es. Geben wir ihm schnell den richtigen Stil. Die Testgröße wird 14 Pixel betragen. Wir werden die Schriftgröße verwenden. Der untere Rand wird vier sein. Dann müssen wir auch bei der Testfarbe konsistent sein. Zwei, zwei, 370. Ordnung. Jetzt haben wir es geschafft. Noch ein P-Tag. Setzen Sie dieses P-Tag ein, wir wollen den Datenpunkt und die Beschreibung eins anzeigen . Mal sehen, was wir haben, und hier ist die erste Beschreibung. Perfekt. Geben Sie ihm den Klassennamen und lassen Sie uns die Utility-Klasse anwenden. Bei den Utility-Klassen wird alles gleich sein. Also muss ich nur Kopieren markieren, herkommen und einfügen. Wenn du sparst, oh, wunderschön. Ich liebe das. Ordnung. Nachdem wir das getan haben, lassen Sie uns den Himmel direkt hinter dem P-Tag anzeigen Wir werden diesem D einen Klassennamen geben lassen. Wir werden es Display-Flex haben und wir werden es Flex Rb haben. Ein H, ein Tag. Gib schnell diesen Stil. Leute, bevor wir damit fortfahren, denke ich, dass wir ein Highlight zwischen den P-Tags haben werden. Gleich nach diesem P-Tag werden wir ein weiteres P-Tag haben. Geben Sie dem P-Tag eine ID, beenden Sie es, markieren Sie es. Wir werden Projektbeschreibungen machen. Mal sehen, hier ist es. Was ich jetzt tun werde, nachdem ich das getan habe, gib ihm einen Klassennamen. Rand oben und Rand unten werden zwei sein. Der Text, wir werden ihn ausgraben. 20 Pixel, die Schrift ist sechs. Ordnung. Das ist genau das erwartete Resort. Lassen Sie uns mit diesem D weitermachen Der rechte Rand wird fünf sein. Der Text, machen wir 14 Bilder draus. Wir bleiben hier konsequent. Der Barboden wird sehr hellblau sein. 65f1. Auf einem großen Gerät möchten wir die Grundfarbe des Balkens ändern Px zwei, Py, eins. Wir wollen, dass die Ecken abgerundet sind, die Schriften, der Rand unten. Die Texte, auf einem großen Gerät wollen wir die Testfarbe auf 6a787 d ändern. Gewinnen Sie den inneren H-Term des H-Tags, Sie werden Ihre Skala anzeigen IU x Design. Speichern Sie und sehen Sie, was wir im Browser haben. Ordnung. Schau es dir an. Es sieht sehr schön aus. Was ich jetzt tun werde, ist, es so oft hervorzuheben und zu duplizieren, wie ich möchte. Markieren Sie das Hadron-Tag. Ich werde eins, zwei, drei, vier, fünf duplizieren zwei, drei, vier, fünf Sicher, wunderschön. Es sieht so hübsch aus. Sie können die Waage ändern. Nächster Punkt s. Sie können reagieren und so weiter und so fort. In Ordnung. Jetzt sind wir mit dem Design fertig und alles sieht hervorragend aus. Die nächste Endzeile besteht darin, ein Leerzeichen zwischen den Beschreibungen und dem Bild zu bilden. Lassen Sie uns diese Korrektur im nächsten Köder vornehmen. 49. Portfolio Space Challenge (Aufgabe): In der vorherigen Vorlesung hatten wir eine Herausforderung mit dem Bild und der Beschreibung. Wenn Sie genau hinschauen, werden Sie feststellen, dass es keinen Raum dazwischen gibt. Deshalb möchte ich, dass du das Video postest und dann so viel wie möglich versuchst, es an deiner Seite zu reparieren. Okay. Also lass mich dir zeigen, wie ich es repariert habe. An die Spitze geschraubt, wo wir das Elternhaus haben. Das ist das Elternteil , das alle Artikel direkt nach der Arbeit enthält . Alles hier ist genau in diesem d. Wenn Sie den DV beobachten, werden Sie feststellen, dass wir bei großen Geräten den Rand links und rechts auf Null gesetzt Ändern wir es im Browser auf zwei s. Jetzt haben wir ein bisschen Platz dazwischen. Lassen Sie uns weitermachen, um den Wert zu erhöhen. Ich werde dafür sorgen, dass es sicher ist. Übrigens, das ist eine Gedankenspezifikation. Sie können es am Ende mit einem anderen Wert versuchen. Kannst du das sehen? Jetzt haben wir Platz dazwischen. Und alles funktioniert wie erwartet einwandfrei. Schauen wir es uns auf dem Mobilgerät an. Kannst du sehen? Auf Mobilgeräten ist dieser Hintergrund blau. Der Testhintergrund hier , der die Skala hervorhebt, und das ist genau das erwartete Ergebnis. In Ordnung, also alles funktioniert einwandfrei. Die nächste Aufgabe besteht darin, das nächste, das Preview-Boarding, zu implementieren. Machen wir das in der nächsten Vorlesung. 50. Nächste und Vorherige Schaltfläche: Das. Willkommen zurück im Unterricht. In dieser Vorlesung. Wir werden die nächste und die vorherige Funktionalität implementieren nächste und die vorherige Funktionalität , sodass wir, wenn der Benutzer auf den nächsten Bot klickt, das nächste Projekt in den Portfoliodetails öffnen können den Portfoliodetails Das Gleiche gilt für das vorherige Verschrauben. Lassen Sie mich es schnell demonstrieren, damit es jeder gut genug versteht Hier ist das endgültige Projekt. Wenn ich nach unten scrolle, siehst du die vorherige und die nächste Verschraubung Ich möchte, dass du genau hinschaust. Wenn Sie jetzt genau hinschauen, werden Sie feststellen, dass wir bei der vorherigen Zusammenfassung das Portfolio-Bild haben In der nächsten Verschraubung haben wir das Bild der Lieferung von Lebensmitteln. Du weißt warum Es liegt einfach daran, dass, wenn Sie auf das vorherige Bolting klicken, das vorherige Projekt, das angezeigt wird, das Portfolio ist, Axal das nächste Projekt ist die Lieferung von Lebensmitteln Lass es mich dir zeigen, wenn ich auf Weiter klicke, siehst du, jetzt ist hier das Essenslieferprojekt Wenn Sie das nächste Boarding beobachten, ist die Immobilien-Website die nächste und die vorherige ist die Hotelmanagement-Website. Lassen Sie uns es im VS-Code implementieren. Ganz oben werden wir den Used State Hook und den Use Effect Hook importieren . Wir müssen auch den Use-Router importieren. Ab dem nächsten Schrägstrich, Navigation. Lassen Sie uns schnell die Google-Schriftart importieren. haben wir schon einmal gemacht. Jetzt müssen wir nur noch kopieren. Öffne die Seite, scrolle nach oben und kopiere von den Zeilen vier bis neun. Schließe es, füge es ein. Wunderschön. Lassen Sie uns die notwendigen Zustandsvariablen und den Funktionsumfang deklarieren. Innerhalb der Komponente. Lassen Sie uns den Use-Router schnell initialisieren. Es ist eine Funktion, natürlich müssen wir sie aufrufen und sie dann einer Variablen zuweisen Cost Router equ use Router und deklariert die Als nächstes werden wir den nächsten Dash setzen. Außerdem müssen wir es nur markieren und dann duplizieren. Hier werden wir vorheriges haben und wir werden vorheriges einstellen. So einfach ist das. Im Rahmen des Nutzungseffekts müssen wir die Funktionalität implementieren. Wenn Js den Punkt überschreitet, wenn Js in der Punktpass-ID steht, werden gleiche Daten in der Länge gelesen. Lassen Sie uns schnell den Code eingeben, und ich werde ihn besser erklären, wenn wir fertig sind. Hier werden wir den Wert auf Null setzen. Andernfalls setzen wir neben Json Punkt Paz ID plus eins Nachdem wir das für das nächste getan haben, wollen wir es schnell für das vorherige duplizieren Lassen Sie uns alle Vorkommen von Set Next und Set Previos ersetzen Set Next und Set Previos Befehl D, um beide zu markieren und dann hier. Wir werden den vorherigen Satz verwenden und den Wert auf minus eins ändern, und den Wert auf minus eins ändern weil wir gerade dekrementieren Wenn Sie auf Weiter klicken, wird die Zahl erhöht. Aber wenn Sie auf Zurück klicken, bewegen Sie sich gewissermaßen rückwärts Ja, das ist es also. Nachdem wir das getan haben, implementieren wir die Bodins und wenden dann diese Funktionalität Gleich nach diesem abschließenden d werden wir ein weiteres D haben. Geben Sie diesem d einen Klassennamen Wir werden seine Position relativ haben. Lassen Sie es Flex und Hintergrund als Farbe anzeigen. Die Höhe wird 48 sein. Der Text, weil wir Text darin anzeigen werden, wird die Farbe weiß sein. In diesem DF werden wir ein weiteres Div haben, dem wir einen Klassennamen geben. Jetzt werden wir die String-Interpolation verwenden , da wir einen Java-Script-Ausdruck dazwischen erwarten Die Rückseite befindet sich übrigens in der oberen linken Ecke der Tastatur direkt unter der Escape-Taste Die Breite wird 1/2 sein, was in CSS tatsächlich 50% entspricht. Wir werden einen Display-Flex haben : Elemente zentriert ausrichten, Inhalt zentriert ausrichten. Großes Deckblatt. Dann wollen wir die Google-Schrift Ind Dot verwenden, Close Up das D. Auch hier müssen wir unseren eigentlichen Stern verwenden. Natürlich solltest du wissen, was wir jetzt machen wollen. Wir wollen das Hintergrundbild spezifizieren. Lass uns eine Tasche verwenden. URL. Datenstrahl aus früheren Punktbildern. Und wir werden das erste Bild direkt im Bildarray aufnehmen. Speichern Sie und sehen Sie, was wir haben. Komponenten, Slider-Karte, meine Slider-Karte. Meinst du das ernst? Ups, Leute. Was zur Hölle ist das? Wisch es ab. Wir brauchen es hier nicht. Und ich denke, es wird uns jetzt gut gehen. Geh, mach weiter. Ups. Gehen wir nochmal zur Seite hat. Oh, meine Güte. Ich habe da einen Fehler gemacht, mein Fehler, und das tut mir leid. Füge es hier ein. H. Okay. Jetzt haben wir einen Fehler, können die Eigenschaften eines undefinierten Lesebildes nicht lesen. Eine Sache, die wir jetzt tun werden, ist, vor dem Punkt ein Que-Zeichen wie dieses anzubringen, und das wird das Problem lösen Schau es dir an. Jetzt haben wir das vorherige. Sie werden auf jeden Fall das Wesentliche verstehen. Wir werden ein A-Tag haben. Lassen Sie uns das A-Tag schnell stilisieren. Wir haben ein Display Flex Justify Content Center, und dann ist die Farbe die tatsächliche Farbe, die wir verwendet haben Der nähere Zeiger, Übergang, 3D-Farbe , Dauer, Ski it 300 Der Barboden 405 b66. Die BG-Opazität, machen wir 90. Elemente mittig ausrichten. Die Breite wird die volle Breite sein, und natürlich sollten Sie das CSS-Äquivalent inzwischen kennen. Und die Höhe wird die volle Höhe sein. Nachdem wir dies getan haben, implementieren wir schnell das On-Click. Im inneren HTML-Code des A-Tags werden wir das vorherige Projekt ausführen. Sicher, im Browser, und dann kriegst du es Nachdem wir dies getan haben, müssen wir das vorherige Symbol anzeigen. Öffnen Sie die Code-Ressource. Hier ist das vorherige Symbol. Markieren Sie es und lassen Sie es kopieren. Füge es hier ein. Formatieren Sie den Code für eine korrekte Einrückung. Stellen Sie den Browser ein, jetzt haben Sie es Wunderschön. Wenn Sie jetzt auf diese Schaltfläche klicken, passiert nichts. Lassen Sie uns schnell das On-Click implementieren. E Innerhalb des A-Tags. Wir werden das auf Klick haben. Beim Klicken auf diese Schaltfläche. Wir werden Route a Dot machen. Drücken. Was werden wir pushen? Wir nehmen eine Tasche und kürzen dann die Portfoliodetails. Es sollte also genau das Gleiche hier innerhalb des dynamischen Routingsystems sein. Detail des Portfolios. Okay. Slash, zurück, Speichern Sie die Änderungen Ordnung. Versuchen wir also, einen Artikel auszuwählen. L Lass uns schnell nach unten scrollen. Wenn Sie jetzt auf Zurück klicken , gelangen wir zum vorherigen Projekt. Kannst du sehen? Lassen Sie uns es jetzt für das nächste implementieren. Wir haben etwas Luft hier im Terminal. Okay, Leute, schaut mal, was wir jetzt machen werden. Schraube nach oben. Lass es mich dir zeigen. Zehn tun es. Wir werden so etwas machen. Speichern. Lass uns sehen. Und das vorherige verlangt , dass wir es für den Titel tun . Lass es uns hier machen. Lass es uns hier machen. Lass es uns überall machen. Speichern. Lasst uns wieder zuschlagen. Tagesname 177. Richtig veraltete Hoffnungen. Hier ist es. Jetzt ist das Problem gelöst. Okay. Nett. Wunderschön. Ich denke, wir müssen auch den nächsten umsetzen, damit alles ausgewogen ist. Was ich jetzt schnell tun werde, ist, dieses de hervorzuheben. Du siehst diesen De hier drüben. Es endet hier. Schreiben Sie in die Zeilen 138. Kopieren wir zwei Zeilen eins, 38. Markiere und kopiere, komm her und füge es dann ein. Speichern Sie im Browser. Jetzt haben wir vorherige. Lassen Sie uns schnell die Eigenschaften ändern. Zuerst wird hier das nächste Projekt sein. Save und C. Jetzt haben wir Next. Sie können sehen, dass der Pfeil nach links zeigt, also verwenden wir das Propol-SVG für das nächste Projekt W in der Code-Ressource, kopiere das nächste SVG und wische es dann ab und füge es Speichern und formatieren Sie den Code für eine korrekte Einrückung. Wenn Sie den Browser auschecken, haben wir jetzt den nächsten. Kode. Was müssen wir noch tun? Jetzt müssen wir das aktuelle Bild für das nächste aufrufen. Was ich hier tun werde, ist als Nächstes. Wir müssen das nächste hier aktualisieren und dann das Bild aufrufen. Da wir schon hier sind, müssen wir es für das nächste Projekt packen. Wenn Sie den Browser speichern und auschecken. Lass uns als Nächstes weitermachen. Geh zurück nach Hause. Lass uns jetzt neu anfangen. Lass uns auf diesen Typen klicken. Vorher. In Ordnung. Als Nächstes, wunderschön. Als Nächstes wunderschön. Als Nächstes. Alles funktioniert einwandfrei. Es funktioniert. Ordnung, Leute, wir sind also mit der nächsten und der vorherigen Portierung fertig . Und ich hoffe, Sie finden diesen Vortrag hilfreich. Ordnung. Das ist jetzt aus. In der nächsten Vorlesung werden wir mit der Implementierung des Abt-M-Abschnitts beginnen der Implementierung des Abt-M-Abschnitts Wir sehen uns in der nächsten Vorlesung. 51. Über Layout: Hallo zusammen. Willkommen zurück im Unterricht. In dieser Vorlesung werden wir die Aba M-Komponenten entwerfen. Schnell, dafür müssen wir das tun. Lass uns anfangen. VSCode, öffne den Explorer S RC-Komponenten im Verzeichnis Abad M mit der rechten Maustaste erstellen im Verzeichnis Abad M mit der rechten Maustaste eine neue Datei mit dem Namen Abat Mi Dot s. Generieren Sie die Funktionskomponente. Schließen Sie den Explorer. Lassen Sie uns mit dem Layoutdesign fortfahren. Wie üblich werden wir die Fragmente verwenden. Reagieren Sie auf ein Punktfragment. Gewinnen Sie die Fragmente, wir werden ein D haben . Die Hintergrundfarbe wird f3d sein Geben wir ihm das Patent Top 250 Pixel. Geben Sie ihm eine Marge von den Top Ten. Die Polsterung unten 100 Pixel. Bei einem großen Gerät die Polsterung unten. Lass uns 600 Pixel draus machen. Wir werden es relativ positionieren. Auf einem großen Gerät wird die Höhe 800 Pixel betragen. Noch einer. Wir werden es in einem Container haben und die Marge wird bei sein. Dabei muss alles innerhalb dieses T zentriert werden , weil der Rand links und rechts gleich sein wird. Jetzt werden wir eine Hecke mit einem Etikett haben. Im inneren HTML-Code des Hage One-Tags werden wir uns mit mir befassen Lass es uns herausfinden. Lassen Sie uns auch die Utility-Klassen auf das Hage One-Tag anwenden Utility-Klassen auf das Hage One-Tag Der Text wird 240 Pixel groß sein, der W 8%. Überlaufheizung. Absolute Position. Auf einem großen Gerät werden es 40 sein, von links. Auf einem mittelgroßen Gerät wird es 30 sein, von links. Oben werden wir -50 Pixel haben. Die Textfarbe #e7fc. Gut. Schau es dir im Browser an. In Ordnung, nichts passiert. Lassen Sie uns diese Komponenten schnell innerhalb der Seiten rendern. Gehen wir aus dem Steve raus. Dann werden wir über mich rendern. Und bitte stellen Sie sicher, dass Sie diese Komponenten oben importieren . Es wurde automatisch für mich importiert. In Ordnung. Jetzt gehen wir zurück, sicher im Browser. Rot. In Ordnung. Und hier ist es. In Ordnung, der Hintergrund wird also nicht angezeigt. Es liegt einfach daran, dass wir für einen benutzerdefinierten Stil einen Abstand zwischen den eckigen für einen benutzerdefinierten Stil einen Abstand zwischen den eckigen Lassen Sie uns schnell die notwendigen Anpassungen innerhalb der eckigen Klammer Und er es. Wunderschön. Nach dem Hecken-ein-Ziehen werden wir noch einen Hedge eins-zuziehen, und dieses Mal werde ich mich um mich selbst kümmern Geben wir ihm schnell den Stern. Lass es uns relativ positionieren. Die Schrift wird Rector Block sein. Text, fünf Excel. Auch hier die Textfarbe, wir werden mit der Header-Farbe konsistent bleiben. Ich werde 48 AF dE machen. Jetzt verstehst du es. Rand unten. Es wird fünf sein, und auch die obere Marge wird bei -40 liegen Auf einem Gerät mit Medianwert ergibt der Abstand links und der Abstand rechts einen Wert von 24. Und E, wir werden links klopfen und rechts abtasten, bis wir am anderen Breakpoint fünf sind Lassen Sie uns speichern und sehen, was wir haben, ob die Überschrift richtig gemacht ist , und hier ist sie Wunderschön. Alles ist richtig ausgerichtet. Alles klar. Perfekt. Gut, bevor wir weitermachen, geben wir diesem D schnell eine ID. Okay? ID, equ, speichere das Projekt, Befehl B, um den Explorer zu öffnen, gehe zum Kopf gz Schauen wir uns den Link an, um die Referenz zu sehen , ob sie tatsächlich korrekt ist Dies ist der Abt M, und hier haben wir die A-Komponente ins Visier genommen. Ich schlage vor, dass Sie und C markieren . Gehen Sie zurück zu Abt M und fügen Sie es dann wie folgt Speichern Sie, lassen Sie uns sehen, ob es funktioniert. Jetzt klicke ich auf Über mich. Bum. Es bewegt sich gescrollt zu den Abat Me-Komponenten Portfolio, bumm, hm. Endlich, Hm. Lass es uns jetzt nochmal machen. Über mich und Bum. Wunderschön gemacht. In Ordnung. Lass uns weitermachen. Schließt den Explorer. Jetzt musst du über dich selbst schreiben. Nach dem Hage One Tag werden wir einen H Four-Tag haben. Innerhalb. Ich werde einfach ein Händchen für Pod-In-Software mit Front-End-N und Back-End-Betrieb Ups, sehen Sie sich das an. Ordnung. Speichern. Lass es uns überprüfen. Fein. Lass uns schnell das H f t stilisieren. Lass es uns relativ machen Die Breite wird die volle Breite sein. Die Frontbreite wird 300 betragen. Auf einem mittleren Gerät wird die Breite 3/4 betragen, was dem CSS-Äquivalent 70% entspricht. Auf einem großen Gerät W 2/3. Bei großen Geräten beträgt die Breite 66,6%, bei besonders großen Geräten W 1/2 Die Vorderseite wird Rektor sein. Der Text. Wir werden uns an den Text halten, zwei, zwei, drei, 740. Die Schriftgröße und Zeilenhöhe sind zwei Excel. Rand unten zehn, Verzeihung links und Verzeihung rechts ist fünf, auf einem Medianwert Das P x, das für Verzeihung links und Verzeihung rechts steht , wird 24 Mal sehen, ob es jetzt gut ausgerichtet ist. H. Wunderschön. Wir machen gerade s. Lass uns ein paar andere Stopps machen. Nach der Hitze ziehen vier. Formatieren wir den Code. Gut. Jetzt haben wir einen richtigen Einschnitt. Nach dem Heat Four-Tag werden wir einen Abschnitt haben Innerhalb dieses Abschnitts werden wir ein P-Tag haben. Bevor wir mit dem P-Tag fortfahren, geben wir ihm den Stern. Wir werden es relativ positionieren. Wir werden es flexibel anzeigen lassen. Die Flex-Richtung ist Doppelpunkt. Bei großen Geräten wird die Flex-Richtung verschoben. Abschied nach links und rechts ist fünf. Auf einem mittleren Gerät Natürlich, was konsistent bleiben sollte. Der Abschied nach links und rechts wird 24 sein. Okay. Gut. Innerhalb des P-Tags muss ich nur Stopps über mich schreiben. Also habe ich den Text kopiert und dann in das P-Tag eingefügt. Sie sollten genau wissen, was das Recht des Kopfes ist, um Ihre Fähigkeiten zu beschreiben. das getan haben, wenn Sie den Browser auschecken , sind es diese. Wir werden also den Bildschirm auf einem großen Gerät in drei verschiedene Teile unterteilen auf einem großen Gerät in drei verschiedene Teile . W im P-Tag. Geben wir den Klassennamen an. verwenden Aufgrund des Google-Hinweises werden wir die Zeichenfolge in der Tapulation Die Breite ist voll. Lass es uns schnell auf einem großen Gerät machen. Auf unserem Gerät wird die Breite 1/3 betragen. Nun, das ist der erste Teil. Es nimmt einen Teil des gesamten Abschnitts ein. Verstanden, wunderschön. Der Test, die Farbe des Tests, wir werden natürlich konsistent bleiben. Ich muss ihn mir nur von hier holen. D fertig. Hier ist es. Einfügen. Der rechte Rand wird Null sein. Der untere Rand ist fünf. Auf einem großen Gerät beträgt der rechte Rand vier. Mir gefällt die Schrift nicht, wir wollen sie etwas schwächer machen. Ja. Gehen Sie schnell zur Seite zu s, was die übergeordnete Seite ist. Lassen Sie uns schnell die Pods kopieren. Scrollen Sie nach oben und fügen Sie dann ein. Auch hier werden wir uns diesen aus den Zeilen sieben bis zehn holen . Dann füge es hier ein. Scrollen Sie nach unten. Lassen Sie uns nun die Schrift anwenden. Geben Sie einen Punktklassennamen ein. Im Browser speichern. Lass es uns überprüfen. Das sieht so wunderschön aus. Ich liebe es. In Ordnung. Aber mir fällt etwas auf , das nicht in Form ist. Keine Sorge, wir werden es auf jeden Fall beheben, wenn wir fertig sind Und genau so möchte ich, dass die Vorlesung endet. Okay, gut. Hebt schnell das P-Tag hervor und dupliziert es zweimal. SF, das ist genau das erwartete Ergebnis. Und ich liebe es. Sie können die Schreibweise hier und hier ändern. Jetzt poste ich einfach die Vorlesung und gehe dann zurück zu meinem Portfolio, kopiere und füge sie ein. Das ganze Recht auf ein Haar beschreibt eine Sechs. Tun Sie am Ende alles, um sich richtig zu beschreiben. Perfekt. In der nächsten Zeile werden nun die Artikelklicks implementiert. Ich denke, das sollten wir in der nächsten Vorlesung tun. Aber bevor wir zur nächsten Vorlesung übergehen, sehen Sie sich diesen Hintergrund über mich an. Ich möchte es ein bisschen nach oben bringen. Ich möchte es als Herausforderung für jeden von uns betrachten. schnell die Vorlesung auf und versuchen Sie dann so gut wie möglich, das Problem bei Ihnen zu beheben. Diese Herausforderung ist sehr wichtig, weil sie uns die Augen für die häufigsten Fehler öffnet , die wir bei der Verwendung von t wind CSS machen. Jetzt poste den Vortrag und sortiere ihn selbst. Ordnung. Lass es mich mit dir regeln. Geh zurück zum VS-Code. Scrollen Sie nach oben, wo wir das Hedge One Tag der Aba Me haben. Wenn Sie nun an diesen Ort kommen, werden Sie feststellen, dass wir von oben wollen, dass es bei -50 Pixeln beginnt Aber im Moment stimmt etwas nicht. Wo wir das Top haben, haben wir es nicht mit dem Strich umgesetzt. Sie müssen der Tail Wind Utility Class einen Strich anhängen, damit es funktioniert Hier ist es. Kannst du sehen, jetzt ist es oben. Wunderschön. Alles nett, Portfolio über mich zu Hause. Also sag mir, sieht es nicht gut aus? Natürlich tut es das. Das ist vorerst aus. Wir sehen uns in der nächsten Vorlesung. 52. Komponentenlogik: Da kommen wir zurück zum Unterricht. In dieser Vorlesung werden wir die notwendigen Zustandsvariablen einrichten die notwendigen Zustandsvariablen und die zu verwendenden Funktionen definieren. Lass uns das schnell machen. VS-Code oben. Lassen Sie uns den State-Hook importieren. Hooks sind in Serverkomponenten nicht erlaubt. Daher müssen wir zu Client-Komponenten wechseln. Lassen Sie uns die Daten schnell importieren. Daten aus Schrägstrichdaten. Und innerhalb der Komponenten. Const ist umgedreht gesetzt ist umgedreht. E gibt an, der Anfangszustand wird f sein. Du musst ihn nur dreimal duplizieren Hier werden wir es verblasst haben. Dann ist das Set auf vier eingeblendet. Dieser wird der Selektorindex sein. C Setzt den Selektorindex. Bitte stellen Sie sicher , dass Sie diesen Typ auf Capit Set selector index ändern Capit Set selector Wir werden es auf Null setzen. Okay. Kartendaten. Stellen wir es so ein, dass Kartendaten festgelegt werden. In der Anfangsphase wird es um Daten gehen. Wir werden das erste Element in den Daten haben, das als Ausgangszustand dient. Ordnung. Nachdem ich das getan habe. Lassen Sie uns all das in einer Funktion zusammenfassen. Jetzt werden wir const meine Funktionen auf Funktion gesetzt haben , innerhalb nehmen wir die auf Okay. Set umgedreht Behalten wir es bei falsch. Zufrieden. Herbst. Stellen wir Kartendaten ein, setzen wir sie auf Daten. Ordnung. Holen wir uns den Handle Card-Klick. Konst. Kartenklick bearbeiten. E qui, wir nehmen Daten auf, indexieren. Lassen Sie uns es schnell formatieren. Diese Funktion aktualisiert den ursprünglichen Zustand auf einen neuen Status. Let's set ist auf true umgestellt. Set wurde auf „Wahr“ umgestellt. Setzt den ausgewählten Index auf Index. Wir werden hier Sachen machen. Legen Sie eine Auszeit fest. Meine Funktionen und dann das Übergeben von Daten, und wir wollen es. Im Grunde versuchen wir , dass , wenn Sie auf die Karte klicken, sie ausgeblendet wird. Es wird einige Zeit dauern, bis es eingeblendet und auf eine andere Karte gezogen wird. Mach dir keine Sorgen Nochmals, wenn wir mit der Implementierung beginnen , werden Sie das Wesentliche auf jeden Fall verstehen. Vertrau mir. Sie werden das Wesentliche auf jeden Fall verstehen. Nachdem wir dies getan haben, werden wir die nächste und die vorherige Funktion implementieren C und weiter. Stellen Sie es auf eine R-Funktion ein. Jetzt werden wir hier eine E-Anweisung haben , die besagt, wenn der gewählte Index kleiner als fünf ist, dann rufen wir die Funktion handle click auf. Gewinnen Sie die Funktion, wir holen uns die Daten und dann den ausgewählten Index plus eins. Wir werden die Daten abrufen und dann um eins inkrementieren. Auch hier der ausgewählte Index plus eins. Pfeile, Griff, Warenkorb anklicken. Über Daten. Wir werden den ersten Artikel beibehalten. Wenn die Schaltfläche nicht angeklickt wird, behalten wir das erste Element Wir werden alles als Standard beibehalten. Ordnung. Ich rede zu viel. Lassen Sie uns nun das vorherige Handle implementieren . Ich muss es nur markieren und dann duplizieren. Sie können auch kopieren und einfügen. Vorheriges behandeln. Wenn der gewählte Index nicht gleich Null ist, rufen wir die Handle-Click-Funktion auf, greifen auf die darin enthaltenen Daten zu greifen auf die darin enthaltenen Daten und dekrementieren sie dann um eins So einfach ist das, sonst werden wir den fünften Punkt behalten, genau so wie diesen. Okay, gut. Jetzt sind wir mit der Einrichtung der Logik fertig, mach dir keine Sorgen. In der nächsten Vorlesung. Wenn wir anfangen, diese Logik zu nutzen, werdet ihr definitiv die Oberhand gewinnen. Das ist vorerst aus. S in der nächsten Vorlesung. Bleib konzentriert und pass immer auf dich auf. 53. Implementierung von Grid-Buttons: Jetzt sind wir mit der Implementierung der Logik fertig. Lassen Sie uns es schnell auf die Benutzeroberfläche anwenden. Scrollen Sie nach unten. Das erste, was wir hier tun werden ist das Hintergrundlayout zu erstellen. Natürlich haben wir das während der gesamten Vorlesungen gemacht . Was ich jetzt tun werde, ist schnell zu kopieren und einzufügen. Füge es hier ein. Schließe das d. Wir haben nur den Hintergrund, einen linearen Farbverlauf. Wir spezifizieren nur das Layout eines Kopfes. Auf einem großen Gerät setzen wir den oberen Rand auf -60. Innerhalb dieses D werden wir einen Abschnitt haben. Lassen Sie uns die Hilfsklassen anwenden. Setzen wir es auf Container. Wir lassen es Flex anzeigen, Flex-Richtung ist Spalte, Margin Strich Auto. Dann werden wir es auf einem kleineren Gerät flexibel haben. Die Flex-Richtung wird Roll sein. Die Polsterung links auf rechts beträgt fünf. Auf einem mittelgroßen Gerät beträgt der Abstand zwischen links und rechts 24. Die Randwanne, machen wir 50 Pixel draus. Auf einem kleineren Gerät wird die Margin-Tube Null sein. Lassen wir es transformieren. Übersetze Y, so dass es -100 Pixel ergibt. In diesem Abschnitt werden wir ein weiteres D haben, geben Sie den Klassennamen Dann werden wir es auf einem kleineren Gerät veröffentlichen, wir werden es flexibel anzeigen lassen. Mit wird voll sein. Auch hier wird die Breite auf einem kleineren Gerät 50% 1/2 betragen. Auf einem großen Gerät machen wir die Breite auf 7/12. Schließ es. Jetzt werden wir in der Tiefe die Daten kartografieren und sie auf dem Bildschirm anzeigen lassen Aber bevor wir weitermachen, möchte ich dir etwas zeigen Scrollen Sie nach oben. Hier drüben, wo wir den Index und die Daten aufgenommen haben. Vorher gefiel mir das, was nicht richtig ist. Sie sollten wissen, dass dies ein Index sein wird. Wunderschön. Nur ein kleiner Tippfehler Und ich denke, jeder macht Fehler. Und übrigens, ich bin kein Roboter. In Ordnung. Jetzt machen wir eine Datenpunktkarte. Bitte, ich möchte, dass du hier aufpasst. Wir sind dabei, die Daten zu kartografieren. Wir nehmen den ersten Parameter auf , der jedes Element innerhalb des Arrays oder innerhalb der Daten darstellt innerhalb des Arrays oder innerhalb der Daten Dann ist der zweite Parameter der Index , der als ID dient. Jetzt, außerhalb der Elternschaft, werden wir eine Pfeilfunktion haben Dieses Mal kehren wir zur Benutzeroberfläche zurück. Aus diesem Grund müssen wir die Klammer Elternschaft verwenden und nicht die Co-Klammer Wenn wir in der Elternschaft stehen, schreiben wir jetzt die Benutzeroberfläche Zuerst werden wir ein A-Tag haben. Lassen Sie uns den Klick auf dieses A-Tag angeben. Übrigens, wann immer Sie den Klick angeben möchten, müssen Sie auf jeden Fall vom serverseitigen Rendern zu einem clientseitigen Rendern wechseln serverseitigen Rendern zu einem clientseitigen Rendern Scrollen Sie nach oben und dann ist es hier. Wenn Sie es am Ende noch nicht getan haben, lassen Sie mich es aus Gründen der Klarheit abwischen. Ich werde einfach den Client benutzen. So einfach ist das. Okay. Lass uns weitermachen. R innerhalb. Wir werden den Handlecard-Klick aufrufen Mir ist aufgefallen , dass es auch einen Fehler in der Schreibweise des Handle-Klicks Also genau so buchstabiert man es. Wenn deins nicht so ist, wird es nicht registriert. Also schrauben Sie es bis hierher an, es wird ein Kartenklick sein. Poste das Video, nimm die notwendigen Korrekturen vor, lass uns weitermachen. Klicken Sie auf die Karte. Dann nehmen wir einen Index auf. Dann geben wir ihm einen Stil. Die Box Shadow 48 e DE. Sie müssen konsistent bleiben. Wir werden minus fünf Pixel haben, oder um die vier Ecken der Karte herum werden wir den Boxschatten auftragen Zehn Pixel, 20 Pixel, Null Pixel. Eine Seite kriegt den Schatten der Kiste nicht . Cool. Geben wir ihm jetzt einen Klassennamen. Innerhalb des Klassennamens müssen wir dies innerhalb des hinteren Häkchens tun. Die Position wird relativ sein. Der Closer wird der Zeiger, die Transaktion, alles sein. Dann werden wir es transformieren lassen. Die Dauer wird 300 sein. L Lass es uns zuschneiden. Die Ränder dieser Karte werden abgerundet. Diese Karte wird also als Rand dienen. Machen Sie sich keine Sorgen, Sie werden das Bild bekommen , wenn wir mit den Implementierungen fertig sind . Es gibt nichts, worüber man sich Sorgen machen müsste Übrigens können Sie jederzeit so oft Fragen stellen , wie Sie möchten. Und ich werde da sein, um dir sofort zu antworten. Abgerundetes Excel. Wir nehmen es in der Mitte, die Polsterung, machen wir sechs draus Bei einem großen Gerät, der Polsterung, machen wir zehn draus. Lassen Sie es Flex anzeigen, Flex-Richtung ist Spalte, Inhalt zur Mitte und dann die Elemente zentriert ausrichten, und das war's für das A-Tag Geben Sie ihm innerhalb des A-Tags einen Klassennamen. Dieses D wird also als Container für das Bild dienen . Wir geben die Breite mit d 16, Höhe 16 an. Dann ein kleineres Gerät, Breite zehn. Auch Höhe zehn. Ein größeres Gerät, die Breite wird 16 sein. Auch bei einem größeren Gerät wird die Höhe 16 betragen. Wunderschön. Wir werden ein IMG haben, um das Bild anzuzeigen, S RC, e qui, dieses Element hier drüben , das jedes Element im Array darstellt. Also machen wir Item Dot. Wann immer wir also auf die Elemente zugreifen wollen , die wir innerhalb des Arrays haben, werden wir diesen Parameter verwenden. Punkt des Artikels, IMG. Näher dran mit dem selbstschließenden Etikett. Lass es mich dir schnell zeigen. Hier haben wir die Daten GS. Wenn Sie das alles durchgehen, werden Sie die About-Daten sehen. Wir haben also die Zählungen, den Titel, das IMG und die Informationsfelder. Und alle Einstellungen befinden sich direkt im Array-Objekt, okay? Und wir haben es an sechs Orten. Wenn Sie also Punkt, Punkt zählen, zählen, werden Sie bis eins zählen. Artikelpunkttitel, IMG oder R A eingeben und so weiter und so fort. Schließen wir es also schnell, schließen wir den Explorer. Lassen Sie uns beim Speichern sehen, ob es im Browser angezeigt wird. Es sieht gut aus, aber das ist nicht das erwartete Ergebnis. Alles klar? Die Bilder passen gut in das D. Ich glaube, ich habe es vorhin erklärt. Der Artikel ist auf einer Rolle. So wollen wir die Artikel nicht haben. Lass uns so etwas machen. Wir werden ein D haben, gib den Klassennamen an. Wir werden ein Display-Raster haben, auf einem kleineren Gerät, Körnung C bis zu einer extra großen Körnung Drei Der Abstand beträgt sechs, Rand rechts, Null. Auf einem großen Gerät wird der rechte Rand zehn sein. Schließe das D. Jetzt, innerhalb dieses D, zeige ich es dir. Kopieren Sie von der öffnenden Co-Klammer in die schließende Co-Klammer. Sie müssen nur das Optionszeichen gedrückt halten und dann auf die Pfeiltaste tippen, um es innerhalb des Steves zu verschieben. Oder Sie können es auch markieren, ausschneiden und dann in den Stev einfügen. Speichern Sie und sehen Sie, was wir haben. Jetzt ist alles wie erwartet ausgerichtet. Wunderschön. Aber jetzt, wenn Sie mit der Maus über die Tasten fahren, können Sie sehen, dass nichts passiert Selbst wenn Sie klicken, passiert nichts. Kannst du sehen? Lassen Sie uns also den On-Hover implementieren. Und wenn der Benutzer dann auf die Schaltfläche klickt, möchten wir, dass die Schaltfläche hervorgehoben wird Wir müssen auch den Titel in der Schaltfläche anzeigen. Okay? Geh zurück zum FS-Code. Nach dem schließenden D, das als IMG-Container dient, werden wir ein H-Four-Tag haben. Gewinnen Sie die H-Vier. Wir werden den Item Dot Title machen. Speichern Sie und sehen Sie, was wir haben. Jetzt haben wir die Titel angezeigt, aber sie sind nicht gut ausgerichtet. Lass es uns schnell ausrichten. Geben Sie ihm jetzt einen Klassennamen. Wir werden die String-Interpolation verwenden weil wir darin Java-Skript erwarten Lassen wir es testen, ausrichten, zentrieren. Auf einem kleineren Gerät betragen die Schriftgröße und die Zeilenhöhe jedoch 0,8 RM. Auf einem größeren Gerät testet man Excel. Die Schrift, das Rektorat. Die B sollte auf Cp sein. Übergangsfarben, Dauer 500. Was ist nochmal, müssen wir tun? Gruppe, wir werden sie gruppieren, schweben. Text, weiß. Wenn wir mit der Maus auf den Boden zeigen, wird der Text weiß Und andernfalls, bei der Textfarbe, behalten wir die Farbe bei, die wir verwendet haben F sieben, 626d, der obere Rand Ordnung. Also lass uns jetzt die Bedingungen klären. Lass es uns so machen. Wenn der ausgewählte Index gleich dem Index ist, möchten wir den Text weiß anzeigen. Text weiß, sonst passiert nichts, speichern und schauen, ob es funktioniert. Kannst du sehen, wenn ich mit der Maus darüber fahre, wird der Text weiß Eine weitere Sache, die wir tun werden, ist die Anzahl anzuzeigen Wenn wir mit der Maus auf diesen Typen zeigen, wollen wir die Anzahl dieses Elements direkt im Array Wenn es als Nummer eins, Nummer zwei, drei usw. erscheint , müssen wir es tun Gleich nach dem H-Vier-Tag wir ein DI ein und geben den Klassennamen ein. Lassen Sie uns wieder das Ba Ti verwenden. Wir werden es als absolut positionieren. Von rechts werden wir es minus zwei haben, und von oben werden wir es minus zwei haben. Wir werden es transformieren lassen. Der Übergang wird alles sein. Dauer, 500. Die Opazität ist Null. Lassen Sie uns die Tiefe schnell schließen , damit der Minenfehler behoben werden kann. Gruppe, Hover, lasst uns den Hover implementieren. Wenn Sie mit der Maus darauf zeigen, wird die Deckkraft 100 sein. Denken Sie daran, dass wir die Standard-Opazität auf Null gesetzt haben. Wenn Sie mit der Maus auf die Karte zeigen, setzen Sie die Deckkraft auf 100 und das Objekt wird dann auf dem Bildschirm angezeigt So einfach ist das. Der Showschatten Excel. Die Breite wird 12 sein, die Höhe 12. Die Ecken werden abgerundet. Der Hintergrund. Für Lehrarbeiten werden wir einen zufälligen Hintergrund verwenden. B, grüner Strich, 500. Keine Sorge, ich verwende den Originalhintergrund. Wir werden einen Display-Flex haben. Richten Sie den Inhalt so aus, dass er mittig ausgerichtet ist. Was müssen wir noch tun? Die Schriften, lass uns ein Boot draus machen. Schrift macht beides. Text d weiß. Und die Schrift, erinnere dich daran, dass sie eingereicht wurde. Und der Text X ist gut. Gewinnen Sie das D, wir müssen die Anzahl anzeigen, Punkt, Anzahl, so einfach ist das. Speichere und sieh, was wir haben. Wenn ich mit der Maus auf die Karte fahre, wird die Anzahl in der oberen rechten Ecke der Karte angezeigt in der oberen rechten Ecke der Karte Schau es dir an. Also das ist die Nummer eins in der Reihe, zwei, drei, vier, fünf, sechs, und ich hoffe, Sie bekommen den Käse. Was können wir jetzt noch tun? Wir möchten, dass es auf eine sehr nette Art und Weise aussieht. Lass es uns irgendwie rotieren. Nun, was ich tun werde. Manchmal ist die Implementierung die beste Erklärung , die man geben kann. Lassen Sie mich also das umsetzen, was ich vorgestellt habe, damit Sie es verstehen. Wenn ausgewählt, entspricht Index dem Index. Die Opazität wird 100 und nicht Null sein. Dann drehen wir es um 12 Grad. Also drehen wir es ein bisschen und dann, was passiert? Gruppe, rotiert um 12. Schauen wir uns das schnell an. Kannst du sehen? Beachten Sie, dass, wenn ich mit der Maus über die Knöpfe fahre, die Anzahl der Ausschnitte nach rechts geneigt wird Das ist auf die von uns implementierte Utility-Klasse Rotate zurückzuführen Utility-Klasse Rotate Nachdem wir das getan haben, möchten wir die Schaltfläche hervorheben, wenn darauf geklickt wird Lass uns das schnell machen. Scrollen Sie nach oben, wo wir das A-Tag haben. D D. Hier ist der Klassenname des A-Tags. Gewinne den Batik Schauen wir uns jetzt einige Java-Skripte an. Wenn der gewählte Index gleich dem Index ist, wird er hervorgehoben, was einfach bedeutet, wenn ein Benutzer auf die Schaltfläche klickt Wenn ein Benutzer sozusagen auf das A-Tag klickt, möchten wir, dass es hervorgehoben wird Dazu müssen wir nur die Farbe angeben. BG. Verwenden wir Rot, 500. Wenn du sparst, müssen wir das Haus einrichten, bevor es funktioniert. Gut. Speichern. Kannst du sehen? Alles funktioniert. Gut. Nun, eine weitere wichtige Sache, die wir implementieren müssen, ist, dass wir die Farbe ändern möchten, wenn wir mit der Maus über die Elemente Farbe ändern möchten, wenn wir mit der Maus über die Und übrigens, das Rot ist nur für Unterrichtsarbeiten. Keine Sorge, wir werden alles reparieren lassen. Okay. Auch wenn wir die Farbe spezifizieren wollen, wollen wir auch eine süße Animation. Okay. Sehr einfache Animation. Minus übersetzt Y. Y minus zwei. So können wir ihm ein Präfix voranstellen, wenn Sie einen negativen Wert anwenden möchten Bei Ha, der Hintergrundfarbe, machen wir sie blau. Der Va-Shadow, es wird Excel sein. Also werden wir es y minus zwei übersetzen lassen. Ich muss diesen Typen nur hervorheben und kopieren und ihn mit dem Feuer übergießen. Was ist nochmal? Die Farbe. Lass es uns weiß machen. BG Weiß. Okay. Jetzt lass uns speichern. Formatieren Sie den Code schnell, um die richtigen Einrückungen zu erhalten. Speichern und checken Sie den Browser aus, diese . Klicken Sie. Kannst du sehen? Wenn Sie mit der Maus darauf zeigen, ändert sich die Farbe, und wenn Sie darauf klicken, wird es hervorgehoben In Ordnung, so wunderschön. Und ich möchte, dass du die Animation beachtest. Kannst du es sehen? Schau es dir an. Ich liebe das. Jetzt müssen wir die richtige Farbe verwenden. Für den Whoa-Hintergrund werden wir eine benutzerdefinierte Farbe verwenden, sie hervorheben, abwischen, eckige Klammern öffnen und schließen, und innerhalb der eckigen Klammer haben wir diese Farbe Das Gleiche gilt für Sie, die auf diese Weise mit genau derselben Farbe hervorgehoben wurden Außerdem denke ich, dass wir hier noch eine Sache ändern müssen. Stimmt. Geben wir ihm dieselbe Hintergrundfarbe für die Zählung. Okay. Wunderschön. Alles cool. Alles klar, Leute. Siehst du? Sieht gut aus. Kannst du es sehen? Schau es dir an. Okay, ich liebe es so. Das ist vorerst aus, und in der nächsten Vorlesung werden wir mit der Implementierung der Showcard fortfahren . Wir sehen uns dann. 54. Skill-Card-Anzeige: In der vorherigen Lektion haben wir das Bild und den Titel direkt innerhalb des A-Tags angezeigt , das wir als Butting verwenden Wenn Sie es tragen, funktioniert es wie erwartet einwandfrei In dieser Vorlesung werden wir die Daten anzeigen, die sich auf jeden Titel beziehen. Wenn ich beispielsweise auf den Frontend-Entwickler klicke, möchten wir die Daten anzeigen, die sich auf das Frontend beziehen, also die Skala Wenn ich auf Backend klicke, sollten wir sozusagen in der Lage sein, die beiden Daten, die sich auf das Backend beziehen, anzuzeigen beiden Daten, die sich auf das Backend beziehen, Lassen Sie mich Ihnen schnell zeigen, was in den Daten steht. Hier innerhalb der Daten haben wir hier die Daten über uns, und haben wir ein Objekt innerhalb des Objekts, wir haben die Zählung bis eins, den Titel , also I x, das Bild. Wie in der vorherigen Vorlesung haben wir den Titel und das Bild angezeigt. Hier. Wenn Sie in dieser Vorlesung auf die Schaltfläche klicken, möchten wir Ihnen alle Öfen anzeigen Das Gleiche gilt für den Rest des Objekts , das in das Array eingefügt Wenn Sie auf das Backend klicken, möchten wir die Daten abrufen, die sich auf das Backend beziehen, d. h. den Knoten S, Mongo DB und den Rest Das Namensarray hier kann geändert werden. Sie können es in Elemente oder einen anderen Namen umbenennen , der Ihrer Meinung nach Ihre Absicht beschreibt. Fahren Sie mit der Komponente „Über mich“ fort. Lassen Sie mich Ihnen nach diesem D dieses PDF hier zeigen. Das ist das abschließende D. Wenn wir in diesem D noch ein anderes Dif haben werden, gib den Klassennamen Die Breite wird voll sein, was sie zu 100% breit macht Auf einem kleinen Gerät wird die Breite 1/2 betragen, was 50% entspricht. Auf einem großen Gerät wird die Breite 5/12 sein Überlauf sichtbar. Links und rechts gesetzt, der Hash Null. Auf einem kleinen Gerät ergibt Teil und links bei großen Geräten sechs. Nach links und rechts werden es zehn sein. Schließe das DF, und innerhalb dieser Def werden wir ein weiteres DF haben Geben wir ihm den Klassennamen. Der Hintergrund wird weiß sein. Wir wollen also, dass alle vier Ecken abgerundet sind. Abschied ist zehn. Auf einem besonders großen Gerät beträgt der Abschied 14. Schattenakzent, Farbe. Bei uns ist die Position relativ, und innerhalb der Entwicklung werden wir einen Abschnitt haben Schließ es. Lassen Sie uns schnell Stil auf den Abschnitt anwenden. Geben Sie ihm einen Klassennamen. Jetzt wollen wir die String-Interpolation verwenden. Gewinnen Sie den Bati, wir werden ihm einen Klassennamen geben, der Notieren Sie sich diesen Klassennamen. Wir werden es in Zukunft stilisieren. Überlauf, lass es uns erhitzen , damit es nicht außerhalb seines Behälters wächst Lassen Sie uns jetzt etwas Java-Skript drin haben. Wir werden tun, wenn is faded gleich true ist, dann werden wir den Klassennamen Fad out zuweisen, und andernfalls wird kein Klassenname Gewinnen Sie das D, wir werden ein P-Tag haben , das als Bezeichnung dient Ich werde meinen Text es A schreiben. Dann werden wir den Text Skies unten haben Aber vorher speichern wir es und checken es im Browser aus. Gut. Hier ist es. Mein Texthimmel ist, was auch immer Ihre Texthinweise sein mögen wenn Sie auf eines dieser Boards klicken Lassen Sie mich Ihnen die Karte zeigen. Hier ist das D. Mit dem Hintergrund aus weißem, abgerundetem Excel, wodurch alle Ecken dieser DVD abgerundet werden Ich hoffe du kannst perfekt sehen. W im P-Tag, geben wir den Klassennamen an, und wir wollen auch die String-Interpolation verwenden Jetzt werden wir den Text haben. Lassen Sie uns die Farbe beibehalten. Also werden wir hier 476 26d haben. Sieben C. Gut. Sie werden es vielleicht nicht bemerken, aber die Farbe wurde aufgetragen. Machen wir es jetzt mit der Schrift. Wir können es hier machen. Es gibt kein Problem. Wir werden den Klassennamen int dot machen. Nochmals speichern. In Ordnung. Schauen Sie sich das jetzt an. Gut. Der Text wird G sein, was der Schriftgröße und Zeilenhöhe entspricht, und das ergibt 1,2 m. Auf einem kleinen Gerät ist der Text Bs auf G, Text, Excel. Lassen Sie uns eine Transaktion machen und dann die Dauer Machen wir 500 draus. Lassen wir es transformieren. Die Opazität, die Opazität sollte 100 sein. Es ist in Ordnung. Nach dem P-Tag wollen wir die Titel anzeigen. Lass uns ein H-One-Tag haben. Machen wir es mit einem H-Two-Tag. Lassen Sie mich Ihnen zeigen, dass wir bei H zwei den Titel Kartendatenpunkte verwenden werden. Wenn ich auf Frontend klicke, haben wir jetzt das Frontend. Wenn ich auf das Backend klicke, haben wir das Backend. Zu und so, wir haben das Tool und so. Lassen Sie uns die Gegenstände und die zugehörigen Fähigkeiten anzeigen. Bevor wir fortfahren, müssen wir das H-Two-Tag stilisieren. Geben wir schnell den Namen der Sternklasse an. Die Schriften, rechter Körper. Die Schriftfarbe wird dieselbe sein. Komm her und füge Komm her und Text d drei Zellen. Geben Sie auf einem kleinen Gerät den Text d in Excel ein. Schreiben Sie auf einem mittleren Gerät drei Excel-Texte. Jetzt versuchen wir, auf jedem Bildschirm eine andere Schriftgröße anzuwenden . Jeder Bruchpunkt. Rand unten sechs, die Breite ist 44. Auf einem mittleren Gerät wird die Breite fünf, sechs sein. Lass uns eine Transaktion durchführen. Die Dauer, 50. Dann werden wir eine Transformation durchführen. Geben Sie die Opazität auf 100 an. So einfach ist das Im Browser speichern, wunderschön. Schau es dir an. Genau das erwartete Ergebnis. Geh zurück zum Code. Nach dem H-Two-Tag. Lassen Sie uns den Code schnell formatieren, damit er richtig eingerückt ist. Drücken Sie dann die Ken-Tastatur mit Umschalt- und Wahltaste und tippen Sie anschließend auf die Taste F. Sie können auch auf Dokument im Pre-Code-Format formatieren klicken . Nach dem H-Two-Tag werden wir ein UL-Tag haben. Jetzt wollen wir den entsprechenden Schlüssel zum Titel anzeigen. Lass uns das schnell machen. Hier werden wir Map Data Dots Array Dot Map machen. Wir werden Fähigkeiten erwerben, die für jedes Element innerhalb des Arrays stehen. Stellen Sie es dann auf eine Pfeilfunktion ein. Wir möchten eine Benutzeroberfläche zurückgeben, also müssen Sie parentenss öffnen und schließen Und bitte benutze nicht die Ci-Klammer. Jetzt werden wir ein LI-Tag haben. Innerhalb des LI-Tags müssen wir den Skill anzeigen. Save und C. Hoppla. Es sollten Fähigkeiten sein Ordnung. Lass es uns überprüfen. Scrollen Sie jetzt nach unten. Hier haben wir es. Wunderschön. Lassen Sie uns den Stil angeben und die Schrift extrem toll aussehen lassen. Ordnung. Das UL-Tag, gib ihm den Klassennamen. Wir werden die String-Interpolation verwenden. Zuallererst wird die Schriftart ein D-Dot-Klassenname sein. Die Schriftstärke beträgt 300. Letzte CD. Der letzte Stiltyp ist Disc. Die Textfarbe wird dieselbe sein , wenn diese hervorgehobene Kopie hier einfügen M hoch, Rand links, acht, und Gerät vergrößern, M dann Der Text B, der der Zeilenhöhe und Schriftgröße entspricht. Auf einem großen Gerät: Text G, S-Transaktion, Sorry. Die Dauer ist immer 500. Dann transformiere. Die Opazität ist 100. Okay, speichern Mal sehen, wie es jetzt aussieht. Ups sagt: Oh mein Gott, schau mal. Leute, das ist so. Speichert und lasst es uns überprüfen. Okay. Wunderschön. Alles sieht gut aus und ich mag es. Wenn Sie auf Ende B klicken, erscheint hier der Skill, der sich auf das Backend bezieht Oh mein Gott. Sag mir, sieht es nicht gut aus? Natürlich tut es das. Okay, lass uns weitermachen. Auf einem Mobilgerät wollen wir dieses Rasterlayout hier verstecken, diese Schaltflächen, und dann wird nur diese Karte angezeigt Wir benötigen also eine weitere Schaltfläche innerhalb der Karte, um zwischen den Skalen zu wechseln Das machen wir in der nächsten Vorlesung. 55. Skill-Count: Wir wollen etwas Außergewöhnliches tun. Wir wollen eine neue Karte in der oberen rechten Ecke dieser Karte erstellen. Lass uns das schnell machen. Nach dem abschließenden Tag des Abschnitts erhalten wir ein D mit dem Klassennamen. Nehmen wir es als absolute Position an. Perspektive. 500. Wir geben es minus sieben von oben. Auf einem kleinen Gerät minus acht von oben. Die rechte Seite ist Null und ein kleines Gerät. Die rechte ist 20. Auf einem kleineren Gerät wird es bei 20 beginnen. Und sonst geben wir ihm den Klassennamen Karte. Bitte notieren Sie sich diese Karte. Wir werden es in Zukunft stilisieren. Schauen wir uns danach das Java-Skript an . Hat das D geschlossen . Jetzt werden wir, wenn umgedreht gleich Wahr ist, einen Klassennamen umgedreht haben und sonst werden wir keinen Klassennamen haben Formatieren Sie den Code außerdem so, dass er einen korrekten Einzug hat. Innerhalb des D werden wir einen weiteren Unterschied haben, geben Sie der Klasse eine innere Namenskarte Wir werden das Innere der Karte mit Cs stilisieren. In der inneren Karte werden wir noch einen Unterschied machen, dir den Klassennamen geben Wir wollen, dass die Grenzen abgerundet sind. Die Cs, lassen Sie uns das klarstellen. Der Text auf dieser Karte, wir werden ihn zu Excel machen. Auf einem besonders großen Gerät der Text neun überragend. Die Schrift wird rechteckig schwarz sein. Text weiß. BG, geben wir ihm eine Grundfarbe für die Tasche, und wir möchten, dass die Bagrand-Farbe genau dieselbe Textfarbe hat , die wir verwendet haben Kopieren Sie alles innerhalb des benutzerdefinierten Stils und fügen Sie es dann ein Speichern Sie und sehen Sie, welche Operationen wir haben. Wir müssen das D schließen. Es wird noch nichts angezeigt. Jetzt, nach der Hintergrundfarbe, wollen wir, dass der Abstand fünf beträgt Ein extra großes Gerät, Polsterung wird acht sein Die Breite beträgt 28. Die Höhe ist 28. Ein extra großes Gerät, die Breite 48. Schon wieder ein extra großes Gerät, die Höhe 48. Formatieren wir den Code. Wir werden es transformieren lassen, Transaktion, Dauer 500 Dann werden wir Transform Preserve verwenden. Jetzt wollen wir es um minus drehen, um sechs drehen. Auch hier werden wir Transform Preserve durchführen. Nachdem wir das getan haben, sollten wir die Karte hier sehen können. Kannst du sehen, jetzt haben wir eine Karte hier drüben. Was wir tun wollen, ist die Anzahl auf der Karte anzuzeigen. Hier werden wir sprengen. Wir in der Spanne werden Map Data Dots Ct. Bevor wir mit dem Markieren und Abschneiden fortfahren, wollen wir es außerhalb der Spanne machen. Nun wollen wir sehen, wie es im Browser aussieht. Perfekt. Lassen Sie uns die Spanne stilisieren. Geben Sie ihm einen Klassennamen Text Strich nach Excel, ein extra großes Gerät, Text da sechs Excel. Rand rechts, zwei, und ein kleines Gerät, M R, was der rechte Rand ist, wird drei sein. wir das getan haben, werden wir einen Stern dazwischen haben, damit es wunderschön aussieht. Jetzt haben wir es verstanden. Alles erscheint wie erwartet. Wunderschön. Wunderschön. Tommy. Sieht es nicht gut aus? Natürlich tut es das. Perfekt, Leute. Ordnung. Es war eine sehr lange Reise Das getan zu haben. Der nächste Schritt besteht darin, das nächste und das vorherige Boting direkt in der Karte zu implementieren direkt in der Karte Ganz einfach, weil auf Mobilgeräten die Bots direkt im Rasterlayout unsichtbar sein werden. Lass es mich dir zeigen. Das ist nur auf dem iPad und. Lass uns zum iPhone gehen. Scrollen Sie nach unten. Siehst du, die Botins sind alle verschwunden Also wir wollen ein Gegenstück, um zwischen den Himmeln zu wechseln , genau in der Karte . Also gut, lass uns das in der nächsten Vorlesung machen. 56. Button Flip: Ordnung, die Komponente „Über mich“ ist eingestellt und alles funktioniert wie erwartet einwandfrei . Eine Sache noch. Wir müssen das nächste und das vorherige Boting implementieren . Leg die Karte Ihr wisst alle, dass das Stromnetz auf Mobilgeräten zusammenbrechen wird Wir brauchen also einen Boting, um uns zwischen den Waagen zu bewegen, und der Stoß wird da sein Lass es mich dir auf einem Mobilgerät zeigen. Siehst du? Der Netzanschlag ist weg. Wir müssen das Butting direkt in der Karte implementieren. Lass uns das schnell machen. Nach diesem abschließenden D werden wir ein weiteres D haben . Geben Sie den Klassennamen an. Wir werden es absolut positionieren. Oder dann. Von rechts werden wir es zehn haben. Die untersten fünf. Und dann werden wir einen Display-Flex haben. Darin werden wir ein A-Tag haben. Innerhalb des A-Tags müssen wir das SVG anzeigen. Dieses A-Tag übernimmt die Funktionalität des vorherigen. Lassen Sie uns den Klick schnell implementieren, damit Sie ihn verstehen. Sie auf das A-Tag klicken, rufen wir das Handle previos Nein. Innerhalb des A-Ziehens werden wir das SVG einfügen Gehen Sie zurück zu den Codeergebnissen, machen Sie MD. Dann wirst du das vorherige SVG für at me flip sehen . Kopieren Sie aus den Zeilen 527 2541. Markieren Sie die Kopie innerhalb des A-Tags. Einfügen. Stellen Sie sicher, dass Sie formatieren, speichern und sehen, was wir haben. Da das SVG weiß ist, Sie es auf dem Bildschirm möglicherweise nicht bemerken. Ändern wir es auf Rot. Lass uns sehen, was wir haben. Lass uns nachladen Ich hab ihn schon gesehen. Kannst du es sehen? Hier ist es? In Ordnung. Lass es uns schnell stilisieren. Lass es uns weiß machen. Geben wir dem A-Tag einen Klassennamen. Die Breite ist 12, die Höhe ist 12. Abgerundet, Excel. Wir wollen, dass die Grenze ein bisschen kurvig ist. Ich denke, wir sollten den Hintergrund so spezifizieren , dass Sie ihn auf dem Bildschirm sehen können BG 47, 626d. C. Hier ist es. Kannst du es sehen? Wunderschön. Lass uns jetzt weitermachen. Der rechte Rand wird eins sein. Wir werden uns transformieren lassen. Tranktion, Dauer, machen wir 300 draus. Hier ist es Der Kosort sollte Punkt sein. On Hove, wenn du mit der Maus auf den Button fährst, werden wir meinen übersetzen Es wird ein bisschen aufwärts gehen mit einer süßen Animation Lass es mich dir zeigen. Lass es uns verteilen. Wenn ich jetzt draufhänge, bewegt es sich nach unten. Nein, wir wollen, dass es nach oben geht. Wir müssen einen negativen Wert angeben, um ihn nach oben zu treiben. Wir machen Minus, übersetzen y eins, was minus eins ist. Probieren Sie es aus. Kannst du es sehen? Geht es nach oben? Gut. Hab dir doch gesagt, dass ich jedes Detail der Nutzfahrzeugklasse für Rückenwind erklären werde . Wir werden den Inhalt bis in die Mitte rechtfertigen. Und dann werden die Elemente zur Mitte ausgerichtet. Wir werden das SVG in der Mitte der Karte haben. Ich bin immer noch nicht in der Mitte erschienen. Schau, das SVG ist immer noch da. Bevor das ganze Zeug funktioniert, werden wir es flexibel anzeigen lassen. Und du siehst, jetzt werden die Elemente zentriert. Kannst du es sehen? Bevor wir den Artikel ausrichten und begründen können, müssen wir die Flexibilität angeben. Okay? Ich denke das jetzt oft. So ist es cool. Es ist in Ordnung. Wir müssen hier nicht zu viel tun. Also, was ich jetzt tun werde, ist einfach. Wir müssen die A-Tag-Highlights aus den Zeilen 182, zwei, 199 duplizieren, duplizieren oder Sie können sie kopieren und einfügen. Wir haben also das erste A-Tag. Dies ist das erste A-Tag. Und dann ist das das zweite A-Tag. Wenn du speicherst, richtig. Also haben wir es so. Wenn du jetzt klickst, klicke. Wir haben also die Knöpfe, die genau das Gleiche tun. Kannst du das sehen? Das ist früher. Schau es dir an. Okay. Jetzt müssen wir es für das nächste implementieren. Zuerst müssen wir dieses SVG entfernen, hervorheben aus 242217. Wischen Sie es ab und kehren Sie zur Code-Ressource Dot MD zurück. Hier müssen wir dieses SVG hervorheben, das nächste SVG für eine M-Flotte. Markieren Sie Kopieren, kommen Sie her und fügen Sie es ein. Formatieren Sie jetzt schnell den Code. Wischen Sie den Griff vorher ab. Als nächstes werden wir das Handle machen. Wenn Sie den Browser sehen, sieht alles wie erwartet gut aus. Zurück, zurück, und es kann weiter, weiter gehen. Rückwärts, rückwärts, vorwärts, vorwärts, vorwärts und immer vorwärts Wunderschön. Alles funktioniert einwandfrei. Also müssen wir es auf einem Mobilgerät auschecken. Gute Neuigkeiten. Jetzt haben wir auf Mobilgeräten die Schaltfläche, um von einem Skill zur Bestellung zu wechseln. Jetzt haben wir den Backend-Entwickler-Skill. Und so kannst du zurückgehen, vorwärts gehen, zurückgehen. Kannst du das sehen? Alles funktioniert einwandfrei. Und ich liebe die Endergebnisse. In Ordnung. Gehen wir also schnell zur nächsten Vorlesung über , wo wir mit der Implementierung des F beginnen werden . Das ist vorerst soweit. Wir sehen uns in der nächsten Vorlesung. 57. Flip-Animation: Willkommen zurück im Unterricht. In dieser Vorlesung wollen wir die Animation der Flips implementieren , wenn auf die Karte geklickt wird Im Moment kannst du sehen, wie es traditionell umgedreht wird. So ist es nicht nett. Okay. Lass uns ein paar gute Animationen hinzufügen. Gehe zurück zum VS-Code. Öffne den Explorer. Direkt im Verzeichnis Über mich. Klicken Sie mit der rechten Maustaste auf eine neue Datei. Ich nenne es Abt M dot CSS. Zuerst müssen wir die Karte stilisieren. Punktkarte. Lass es mich dir zeigen. In diesem D? Jetzt holen wir uns die Karte. Hier ist sie. Ja. Also lass es uns gleich hier machen. Die Perspektive 800 Pixel. Der Cursorzeiger, wir werden ein flexibles Display haben und den Inhalt nach rechts ausrichten. Die Karte A Karte NA. Lass es mich dir noch einmal zeigen. Hier ist es. Also diese Karte hier, ich denke, der beste Weg, dir das Zeug zu zeigen , ist, die Hintergrundfarbe zu ändern. Nehmen wir an, die Hintergrundfarbe ist Rot 500. Wenn Sie jetzt den Browser speichern und auschecken, können Sie ihn sehen? Hier ist die innere Karte. Lassen Sie mich Ihnen jetzt die Container-Karte zeigen. Das ist die Container-Karte. Lass uns BG, Blue 500 machen. Speichern Sie im Browser, hier ist es. Kannst du sehen, diese Karte hier drüben ist auf diese andere Karte gelegt. Also lass es uns schnell stilisieren. Lassen Sie uns die Breite zu 100% und die Höhe zu 100% ermitteln. Transaktion. Wir werden es 0,6 Sekunden transformieren lassen. Dann der Transformationsstil. Behalten Sie drei d bei. Bevor wir fortfahren, müssen wir die Komponente mit der CSS-Datei verknüpfen. Gehen Sie zurück zu „Über mich“, scrollen Sie nach oben und lassen Sie uns das Ganze über Kopf erledigen Wir werden s Abt M C S S eingeben. Nachdem Sie das getan haben, kehren wir zu Über mich Css zurück Wir müssen die Kartenpunkte stilisieren. Dreh die Karte um, Ops. Schau es dir an. Es sollte ein Konkator Verwandeln. Wir wollen uns im Y-X-Winkel um 90 Grad drehen. Machen wir einen negativen Winkel daraus. Passen Sie Dash links an. Übrigens, lass mich dir die Kurse zeigen. Hier ist das Fed links und dann das Futter raus. Für die linke Fed werden wir eine Transaktion haben, die Opazität beträgt 0,5 Sekunden Transformiert ebenfalls 0,5 Sekunden, und hier die Deckkraft Transformiere auf der X-Achse. Machen wir es auf Null. Für die Option „Links“ und „ Auspassen “ ist die Opazität da Transformieren. Transformiere, übersetze X, lass es uns 40% haben. Nachdem wir das alles getan haben, kehren wir schnell zum Browser zurück und prüfen, ob es gut gemacht ist. Schau es dir an. L Lass uns klicken. Wunderschön. Siehst du , auf der Karte haben wir einen süßen Animations-Flip. Siehst du? Aber wir wollen auch, dass es sich auf diese Karte hier auswirkt. Was machen wir jetzt? Mal sehen, was passiert. Bevor wir fortfahren, müssen wir die Kartenfarbe ändern. Es hat genau dieselbe Farbe. Dieser Typ hat keine Farbe, aber dieser Typ hat B G. In Ordnung. Wunderschön Gehen wir zurück zum CSS. Fangen Sie hier an, die Karte, den Einkaufswagen in Cut Flip Cut.In Oh, meine Güte. Leute, zieht das Zeug aus. Wenn ihr das so macht, wird alles funktionieren. Ja, Herr R. Versuchen Sie es noch einmal, versuchen Sie es immer wieder. Das ist in der Tat fantastisch. Schau es dir an. Und dann können wir es mit den Knöpfen ändern. Auf dem iPad. Es funktioniert. Das ist unglaublich. Alles klar. Wir sind mit der About-Komponente fertig. Aber was wir in der nächsten Lektion tun müssen , ist einige Dinge zu korrigieren, wie zum Beispiel den oberen Rand auf Mobilgeräten. Lass uns sehen. Kannst du das hier sehen? Der obere Rand auf dem Mobilgerät sollte etwas nach unten gehen. 58. Testimonial-Slider-Einstellungen: Hallo. Willkommen zurück im Unterricht. In dieser Vorlesung werden wir die Testimonial-Komponente entwerfen Aber bevor wir fortfahren, müssen wir die Slider-Einstellungen implementieren Öffnen Sie schnell den Explorer, Common B, öffnen Sie die Komponente. Klicken Sie in der Komponente mit der rechten Maustaste auf New Fed. Kundenreferenz. Klicken Sie also mit der rechten Maustaste auf Testimonial, No File, Testimonial Dot GS RFC, um die funktionale Komponente zu generieren Lassen Sie uns das Testimonial auf der übergeordneten Seite wiedergeben . Direkt unter der Apart M-Komponente. Wir werden ein Testimonial machen. Und bitte stellen Sie sicher , dass Sie es oben importieren. Speichern Sie und kehren Sie dann zum Testimonial zurück. Lassen Sie uns schnell die Slider-Einstellungen implementieren. Um die Slider-Einstellungen zu implementieren, müssen wir einige Importe vornehmen. Öffnen Sie die Home Component Homes. Lassen Sie uns schnell die Zeilen zwei bis vier hervorheben . Komm nach oben und füge dann ein. Außerdem werden wir den Kopf benutzen. Wir müssen auch aus den Zeilen fünf bis zehn kopieren. Dann fügt es ein. Lassen Sie uns abschließend schnell die Eigenschaften des Schiebereglers kopieren. Öffnen Sie die Coderessource MD und scrollen Sie dann nach unten. Sie werden die Slider-Einstellungen für das Testimonial sehen. Markieren. Höhepunkte von 584 2667. Kopieren Sie, kehren Sie zum Code zurück und fügen Sie ihn ein. Lassen Sie mich schnell die Einstellungen durchgehen. Hier haben wir variable Einstellungen. Natürlich ist diese Variable ein Objekt. Innerhalb des Objekts haben wir die Slider-Eigenschaften. Wir haben den Wert unendlich auf true gesetzt, wodurch der Slider kontinuierlich scrollt, ohne zu enden. Hier haben wir Slide to Show 3 gemacht. Slide-to-Scroll ist eins, Sie können also immer nur eine Folie gleichzeitig scrollen . Die Geschwindigkeit beträgt 3.000 Millisekunden. Der Pfeil ist auf Kraft eingestellt, das ist der Pfeil nach links und rechts, also brauchen wir ihn hier nicht Wir haben Autoplate auf true gesetzt, was bedeutet, dass der Slider mit dem Scrollen beginnt, ohne dass wir das manuell tun müssen Der Center-Modus ist auf True gesetzt und dann das Center-Pad, das ist der Abstand zwischen den einzelnen Slidern Es ist auf zehn px eingestellt, und hier haben wir dann eine Autopl-Geschwindigkeit 3.000 Millisekunden Bei der Reaktionsfähigkeit handelt es sich natürlich um einen Objektbereich, und dann haben wir Jetzt, am Breakpoint von 17 60, wollen wir die Einstellungen ändern, die Einstellungen hier drüben An diesem Breakpoint werden wir zwei Folien Die Folie zum Scrollen wird eine sein. Infinite wird für eine Endlosschleife auf true gesetzt, und dann wird der Punkt auf fallend gesetzt usw., bis Sie den kleinsten Breakpoint Formatiert den Code. Gut. Jetzt sind wir mit den Slider-Einstellungen fertig. Lassen Sie uns schnell mit der nächsten Vorlesung fortfahren in der wir mit der Gestaltung des Testimonials beginnen werden Wir sehen uns in der nächsten Vorlesung. 59. Testimonial Slider-Design: Lassen Sie uns mit dem Testimonial-Design fortfahren. Hier mit in der Rücksendung. Wisch das ab. Wir werden diesem D einen Ausweis geben. Zeugnis. Wir in diesem D, wir werden noch ein D haben, geben dir den Klassennamen Die maximale Höhe wird 450 Pixel betragen. Das Aufsetzen von oben und das Trennen von unten beträgt 12. Bei einem großen Gerät ist der Wert 12, wenn der linke Teil nach rechts gesetzt wird Auf einem mittelgroßen Gerät ist der Wert fünf , wenn der linke Teil nach rechts verschoben wird Und die Standardabstände werden drei sein. Wir werden es abgerundet haben. Nachdem wir das getan haben, erstellen wir schnell das Layout Öffnen Sie nun den Seitenpunkt. Wir wollen diesen Inline-Stil für das Layout kopieren. Platziere eine Maus genau hier. Dann einfügen. Alles wird gleich sein, sodass wir keine Änderungen vornehmen müssen. Im Browser haben wir jetzt das Layout. Lass es mich dir zeigen, hier ist es. Wenn wir anfangen , die Artikel auszustellen, wird es sehr aufgeräumt sein, damit ihr es sehen könnt. Innerhalb dieses D werden wir ein weiteres D haben, geben Sie ihm den Klassennamen. Auf einem großen Gerät werden wir es als Container haben. Der Rand links und rechts ist automatisch. Biegen Sie links ab und biegen Sie rechts ab Null. Auf einem kleinen Gerät beträgt die maximale Höhe 350 Pixel. In diesem DF werden wir nun ein weiteres DF haben, geben Sie ihm einen Klassennamen. Der Text wird mittig ausgerichtet. Jetzt werden wir ein Überschriften-Tag haben und ich werde das tun, was meine Kunden über mich sagen. Und hier ist es. Es wird eine Überschrift sein. Geben wir ihm jetzt schnell den Stand. Die Schrift extra Holz. Der Text fünf Excel. Wir wollen, dass es groß ist, also haben Sie es jetzt. Rand unten und B sechs. Der Text. Geben wir ihm eine Textgröße, und wir wollen die Testfarbe der Überschrift beibehalten, die 48 ADD sein wird. Wenn du speicherst, und hier ist es. In Ordnung. Wunderschön. Nach dem H-2-Tag werden wir ein P-Tag haben. Dann wird dieses P-Tag die Beschreibung sein. Gehen Sie schnell zur Code-Ressource, kopieren Sie die Beschreibung des Testimonials und fügen Sie sie dazwischen Wenn du speicherst, und hier ist es. Geben wir ihm einen Stil. Geben Sie dem P-Tag einen Klassennamen. Wir wollen die String-Interpolation verwenden. Max D W nach Excel. Die Teiche 200. Reko ein Brett. Der Rand links und rechts ist automatisch. Der untere Rand ist 12. Bei großen Geräten beträgt der untere Rand 24. Ordnung. Jetzt schauen wir es uns an. Gut. Es sieht sehr schön aus. Mm. Nachdem wir dies getan haben, implementieren wir den Slider. Gleich nach diesem De. Wir werden den Slider rendern. Denken Sie daran, dass wir den Slider aus React Slip importiert haben. Geben wir ihm einen Klassennamen. Dann nehmen wir an der Spitze der Zehn teil. Dann auch die Cos-Schriftrolle, alle scrollen. Lassen Sie uns schnell die Elemente im Slider entwerfen. Wir werden ein D für den Klassennamen haben. Wir werden einen Display-Flex haben. Der linke Teil ist Null. Gewinnen Sie dieses D, wir werden ein weiteres D haben. Die Breite ist 100%. Ja. Hoppla. Schau mal Es sollte kein Leerzeichen dazwischen sein. Ja. Auf einem kleinen Gerät beträgt die Breite 95%. Polsterung links, 20. Margin ist mündlich. Die Kanten werden nach Excel abgerundet. Also versuchen wir, die Karte zu entwerfen. Ja. Geben wir ihm die Polsterung von vier Bei einem großen Gerät beträgt die Polsterung sechs. Geben wir ihm eine durchschnittliche Höhe von 250 Pixeln. Und das ist alles. Wir haben die Karte im Browser angezeigt. Aber es wird nicht sichtbar sein, nur weil wir das Co nicht angegeben haben. Wenn du kommst und PG machst, grün 500. Jetzt haben wir die Karte im Browser. Das wollen wir nicht benutzen. Vielmehr wollen wir ein Layout innerhalb der Karte einrichten. Schnell nach oben schrauben und schon können wir den Inline-Stil kopieren. Fügen Sie es hier ein. Wischen Sie die Breite ab und nehmen wir die erforderlichen Einstellungen vor. Hier werden wir es bei fünf Grad haben. Dieser Teil wird um fünf Grad gedreht die Farbe Blau, 48 AFD E. Schauen Sie sich das an. Kannst du sehen, dass die Karte jetzt in zwei gleiche Teile aufgeteilt ist , den weißen Teil oben und den blauen unten. Aber das ist nicht das, was wir wollen. Jetzt machen wir zehn daraus, weil es zu groß ist, und machen wir den weißen Teil auf 90. Wunderschön. Lassen Sie uns die Elemente auf der Karte anzeigen. Jetzt werden wir auf der Karte ein D haben , das dir den Klassennamen gibt. Lassen wir es Flex anzeigen. Noch einer. Mann, 100 Pixel für den Mittelwert W. Dann haben wir ein IMD-Tag, SRC-Äquivalent Die Bilder, die wir verwenden werden, befinden sich direkt im öffentlichen Verzeichnis Du kannst es dir ansehen, und dann mache ich Papo Dot PNG Jetzt sicher, und jetzt haben wir lila auf dem Bildschirm. Ordnung, wir wollen hier ein paar Stopps einlegen , was die Einstellungen angeht. Wir alle wissen, dass nicht alle Bilder abgerundet sind. Wir werden dem Bild eine Größe geben, damit es auch abgerundet werden kann, wenn Sie Bilder mit vier Ecken haben . Was ich jetzt tun werde. Geben wir ihm schnell einen Klassennamen. 20 hoch, 20 voll abgerundet. Hier ist Papa. Kannst du das sehen? Wunderschön. Auch hier müssen wir die Alternative spezifizieren. Und ich werde ein Kundenfoto machen. Bitte machen Sie kein Kundenbild. Ich habe gelernt, dass das Bild jetzt ein wichtiger Weg ist. Jetzt haben wir ein Kundenfoto. Mm hmm Ich habe das Bild nicht angezeigt. Wir müssen auch das rechte anzeigen. Nach diesem DF werden wir ein weiteres DF haben. Sie benötigen einen Container, um die Form Ihrer Website zu definieren. Das D ist also etwas, vor dem du nicht weglaufen kannst. innerhalb des Klassennamens Lassen Sie uns innerhalb des Klassennamens Flex, Flex-Spalte, anzeigen , was der Flex-Richtung entspricht. Dann machen wir Tab x Four, was der Spaltenlücke entspricht. Auf einem mittelgroßen Gerät wollen wir, dass es sich in die Spalte mit flexibler Richtung bewegt. Auch auf einem mittelgroßen Gerät die Elemente mittig ausgerichtet. Gut. Also innerhalb dieser Def werden wir eine weitere Def haben. Als Frontend-Entwickler ist der DF dein Der Frontwitz wird mittelmäßig sein. Grundlinie des Texts wird der Frontgröße und der Zeilenhöhe zugeordnet. Erledigt. Also innerhalb der Def werde ich Daisy Papo machen In Ordnung. Klingt lustig, oder? Hier ist es. Was müssen wir noch tun? Jetzt, nach diesem abschließenden D, werden wir ein weiteres D mit dem Klassennamen haben. Aber dieses Mal wollen wir String-Interpolation verwenden An der Vorderseite werden wir 300 sein. Dann verwenden wir den Klassennamen Google Hind Hind. Die Farbe des Textes. Es wird dieselbe Testfarbe wie die Überschrift haben. Ich muss das nicht zweimal machen. Ich markiere und kopiere es einfach und hebe es dann hier hoch. Schließe das D und innerhalb des D werde ich YouTube-Studenten schreiben. Das Papo hat meinen YouTube-Kanal kommentiert, also muss ich es hier hochheben Habe das nicht gemacht. Wir werden ein P-Tag haben. Gewinnen Sie das P-Tag, kehren wir schnell zur Code-Ressource zurück und kopieren Sie die Rezension von Des Papo Hier ist es. Markieren und kopieren Sie es, fügen Sie es in das P-Tag ein. Wenn Sie im Browser speichern, wird der. Wunderschön. Lassen Sie uns das p-Tag schnell ausrichten. Gib ihm einen Klassennamen. Auch hier wollen wir die String-Interpolation verwenden. Rand unten, es wird sechs sein, die Schrift. Sie können also sehen, dass die Schrift zu fett ist. Ich mag es so nicht, also wollen wir, dass es ein bisschen heller erscheint. Also die Schriftart gibt 200 für das W an. Jetzt siehst du Code. Lass uns den Rektorblock benutzen. Die durchschnittliche Höhe beträgt 70 Pixel. Der Text, machen wir 15 Pixel draus. Rand oben. Machen wir drei draus. Rette jetzt Beautiful. Lassen Sie uns zunächst den Code formatieren. Kannst du sehen, dieser Typ, sie sind zur Mitte ausgerichtet, und das ist nicht das erwartete Ergebnis. Lass uns gehen, sieh es dir an. Das ist das D, das auf dem mittleren Gerät steht . Das Objekt ist zur Mitte ausgerichtet Ich denke nicht, dass das notwendig ist. Dann haben wir es jetzt. Nachdem wir dies getan haben, wenden wir die Folie schnell an. Scrollen Sie nach oben, wo wir den Slider haben. Zunächst möchte ich Ihnen sagen, dass die Lücke zwischen dem Slider und der Beschreibung zu groß ist. Also ich denke, wir müssen etwas entfernen. Wo haben wir den Slider? Slider, wo bist du? Oh, meine Güte. Hier ist es Lassen Sie uns das Pad aus der Wanne entfernen. Nachdem wir das getan haben, wenden wir den Schieberegler hier an und dann die Einstellungen. So einfach ist das. Nun, was ich tun werde, weil wir mehrere Elemente benötigen, damit die Folie funktioniert. Das D-Highlight. Wir werden aus den Zeilen eins, zwei, 42160 hervorheben. Sie können es kopieren, aber für mich muss ich es einfach so oft duplizieren, wie ich möchte Speichern Sie, mal sehen, was wir im Browser haben. Bett. Jetzt funktioniert alles wie erwartet einwandfrei. Lassen Sie uns schnell die Reaktionsfähigkeit des Mobiltelefons überprüfen. Auf dem iPad ist die anzuzeigende Folie eins. Lass uns auf Mobiltelefonen auschecken. Außerdem ist die zu zeigende Folie eine. Es ist in der Tat responsiv auf unserer Plattform. Das ist wunderschön. Das sieht alles gut aus und ich liebe es. Das ist jetzt aus. Sicher, wir werden anfangen, das zu entwerfen Wir sehen uns, Idee. 60. Fußzeilen-Badge: Er hat es getan. Willkommen zurück im Unterricht. In dieser Vorlesung werden wir die FA-Komponente entwerfen. Das tue ich, lass uns anfangen. Common B, um den Explorer zu öffnen. Stellen Sie sicher, dass Sie die Komponente im Filter öffnen, mit der rechten Maustaste klicken und eine neue Datei erstellen. Schnelles Gas. Noch einer. Gewinne den Filter. Codon dot s. Generiert die funktionale Komponente Speichern Sie und kehren Sie zur Fa s. RO von C zurück , um eine reaktionsfähige Funktionskomponente zu generieren Der Filter wird während des gesamten Projekts konsistent bleiben . Also müssen wir ihn innerhalb des Layouts rendern. Öffne die Layout-Punkte s. Wir werden den Filter rendern. Schließe ihn mit dem selbstschließenden Tag und achte bitte darauf, ihn oben zu importieren. Speichern Sie und schließen Sie dann das Layout mit Punkt als. Fangen wir jetzt mit dem FA an. Lassen Sie uns diese DV-ID-ID schnell gleich geben. Fa. Schauen wir uns jetzt an, was wir im Browser haben. Kannst du sehen, dass das der Filter hier drüben ist? Und selbst wenn Sie die Seite mit den Portfolio-Details öffnen. Wenn Sie nach unten scrollen , sehen Sie den Filter. Kannst du sehen? Das passiert einfach , weil wir es im Layout als gerendert haben. Der Filter wird auf allen Seiten angezeigt. Wischen Sie ihn ab. Geben wir ihm schnell einen Klassennamen. Rand oben leer. Machen wir 90 Pixel draus. Innerhalb des D werden wir ein weiteres DF haben, geben Sie ihm einen Klassennamen. Die Hintergrundfarbe wird weiß sein. Teil unter Null. Auf einem großen Gerät ein Teil unter den ersten 100 Pis. Sie schließen das D und jetzt haben wir ein weiteres DF Geben Sie ihm einen Klassennamen Das maximale W max. 11 40 Pis. F Der Hintergrund wird blau sein d 500. Abgerundet, Excel. Lassen Sie uns das D schließen. Machen wir es responsiv. Px 20 Pixel. Auf einem kleinen Gerät, px 64 Pixel. Py 64 Pixel. Mm Auto. Das ist die Polsterung links und rechts. Die Polsterung links rechts bei einem kleinen Gerät, die Polsterung oben und die Polsterung unten Jetzt werden wir einen Inline-Stil haben. Wir werden es transformieren lassen. Übersetze Null Pixel, 70 Pixel. Wenn Sie jetzt den Browser auschecken, hier ist er. Kannst du es sehen? Nett. In Ordnung. Alles läuft gut. Lassen Sie uns den Inhalt in der anzeigen. Wir werden ein D haben. Wir werden Spalte 12 der Vorlage für das Display-Raster haben. Noch einer. Die Rasterspalte ist 12. Bei großen Geräten ist die Rasterspalte neun. Innerhalb des D werden wir ein P-Tag haben, und innerhalb des P-Ziehens werde ich das tun, um loszulegen Und er ist es. Lassen Sie uns es jetzt schnell richtig ausrichten. Der Text 30 Pixel. Die Testfarbe ist weiß. Lassen Sie uns den Test schnell zentriert ausrichten. Auf einem großen Gerät. Wir werden einen Textstart machen. Und jetzt hast du es. Auf einem großen Gerät wird es von hier aus beginnen, aber auf einem kleineren Gerät wird der Test mittig ausgerichtet. Schau es dir an. Kannst du sehen? Wunderschön. Gleich nach dem P-Tag werden wir ein weiteres P-Tag haben. Dann füge ich das entsprechende Recht ein. Sie können dieses P-Tag verwenden, um Ihrem Kunden Ihr Unternehmen mitzuteilen. Wenn du siehst, jetzt haben wir es so. Lass uns das schnell geben. Der Text wird weiß sein. Die Schrift klingt. Auch hier werden wir es genauso haben. Ich muss nur den Text markieren und ihn dann hier runterheben. Speichern Sie und sehen Sie, was wir haben. Wunderschön. Auch hier wird es auf einem kleineren Gerät zur Mitte ausgerichtet. Großartig. Was müssen wir noch tun? Jetzt brauchen wir das Bootfahren. Gleich nach dem Schließen von D. Wir werden ein Div mit dem Klassennamen Spam 12 haben dem Klassennamen Spam 12 Auf einem großen Gerät. Nochmals, ich muss diesen Typen nur hervorheben und kopieren. Komm her. Einfügen. Ändern wir es auf drei. Schließt das D, genau innerhalb des D. Wir werden noch eins haben. Lassen wir es Flex anzeigen und den Inhalt so ausrichten, dass er mittig ausgerichtet ist. Die fünf besten Margen. Aber auf einem großen Gerät liegt die Marge über Null. Innerhalb des D werden wir ein A-Tag haben. Ein Zug, innerhalb des inneren H-Temels des A-Tags, machen wir, melden Sie sich jetzt an Wir haben es in der Nähe des Containers. Lass es uns schnell stilisieren. Gib ihm einen Klassennamen. Schrift Sans. Die Schriftfamilie ist Sans. Die Cs, lassen Sie uns darauf hinweisen. P X zehn, P Y, fünf. Das BG, das ist die Hintergrundfarbe. Jetzt werden wir hier etwas anderes machen. 01, d9ff. Ups, schau mal. Jetzt haben wir den Butting. Aber wir wollen, dass die Kanten etwas kurvig sind. Was ich jetzt machen werde, ist ein abgerundeter Strich, Excel. Es sieht gut aus. Der Text ist weiß. Die Schrift, wir, machen wir sie mittelgroß. Geben Sie g ein, und das entspricht der Schriftgröße und Zeilenhöhe. Ordnung. Ich denke, das ist alles. Wenn Sie speichern, formatieren Sie den Code so schnell , dass er richtig eingerückt ist. Und jetzt haben wir so etwas Schönes. Nachdem wir dies getan haben, fahren wir mit der nächsten Vorlesung fort, in der wir das Elternteil entwerfen werden . Wir sehen uns die nächste Vorlesung an. 61. Fußzeilen-Icons: Lass uns mit dem Essensbehälter weitermachen. Öffnen Sie die Coderessource Punkt MD. Lassen Sie uns schnell die Puta-Elemente kopieren, bei denen es sich um das Datenarray handelt Ich muss nur von 6852 708 hervorheben. Scrollen Sie nach oben und fügen Sie es dann wie folgt in die Komponente ein Nachdem Sie dies getan haben, besteht das Nest und die Linie darin, das Logo anzuzeigen. Gleich nach dem Ende der Veranstaltung werden wir einen Pot Tag haben. Lassen Sie uns dem schnell einen Hintergrund geben . BG 223740. Innerhalb des Fußes werden wir ein D M X Auto haben, das ist der Rand links und rechts. M X Auto haben, das ist der Rand links und rechts Max W-Bildschirm Excel. Platz, acht. P X vier, und P Y wird 16 sein. Natürlich sollten Sie inzwischen mit den Nutzungsklassen für Rückenwind vertraut sein . Auf einem kleinen Gerät, P X sechs, auf einem großen Gerät, Space, Y, 16 LG, Px acht. Formatieren wir den Code. Noch eins, machen wir es zu einem Container. X Auto. P für D auf einem Median-Gerät. Wir wollen, dass es heizt. Dann müssen wir Block, Rand oben, Stift anzeigen. Der Rand links und rechts ist auf Auto eingestellt. Die maximale Breite beträgt 12 80 Pixel, und wir geben den oberen Rand und die Randschaltfläche an. Sie sind mit dem Rest der Klassen vertraut. Wunderschön. Lassen Sie uns jetzt das Logo anzeigen. Auf einem mittleren Gerät möchten wir, dass es versteckt wird. Andernfalls lassen wir es blockieren. Noch einer. Der Text ist hundert. Lassen Sie uns ein flexibles Display haben und den Inhalt so ausrichten, dass er mittig ausgerichtet ist. Der obere Rand ist zehn. Was wir jetzt tun sollten, ist das SVG zu kopieren und es dann zwischen den beiden einzufügen. Gehen Sie zurück zur Code-Ressource Punkt MD. Lassen Sie uns von 712 2742 hervorheben. Markieren Sie vom öffnenden SVG bis zum schließenden SVG. Kopieren Sie den Code, kehren Sie zum Code zurück und fügen Sie ihn dann ein. Formatieren wir den Code. Wunderschön. Nach diesem Abschluss werden wir ein P-Tag haben, und ich werde es tun, du verdienst es, gesehen zu werden. Lassen Sie uns das P-Tag schnell stilisieren. Geben Sie den Klassennamen ein. Maximaler Abstand von vier Assen. Dadurch wird die maximale Breite auf 20 m festgelegt. Text. Welche Textfarbe werden wir hier verwenden? Sieben b858b. Die Schriften, das ist die Schriftfamilie. Dann richten wir es zentriert aus. Ordnung. Lass uns jetzt ein P-Tag haben. Und das wird ein Urheberrecht sein. Wir werden genau dieselbe Farbe haben, genau dieselbe Testfarbe, also müssen wir sie nur dort anheben. Nochmals, genau dieselbe Schrift, markiere und kopiere sie, füge sie hier so ein und bumm. Nochmals, was wir tun müssen, nachdem wir d veröffentlicht haben, werden wir ein weiteres D haben. Wir werden es als Raster anzeigen lassen Der Abstand sechs, die Spalte sechs für die Rastervorlage und der Medianwert für Gerät, Teil und Oberseite sind 20. Und jetzt wollen wir das Logo auf einem größeren Gerät anzeigen. Ich werde es auf einem mittleren Gerät machen. Wir werden es blockieren lassen, sonst lassen wir es verstecken. Jetzt werden wir noch einen d. Text Blue 500 haben . Ordnung. Wir müssen auch das SVG kopieren und einfügen. Ist schon markiert. Ich muss nur kopieren. Fügen Sie es in das D-Format des Codes ein. SF scrolle nach oben, wir werden hier genau die gleichen Informationen haben. Ich muss nur „Alle P-Tags kopieren“ markieren. Dann füge es gleich nach dieser Tiefe ein. Nachdem Sie dies getan haben, schauen Sie es sich im Browser an. In Ordnung, wir haben das Logo. Das blaue Logo wird auf einem großen Gerät angezeigt, und auf einem kleineren Gerät werden wir das Logo auf grün ändern und so weiter und so fort. Also lass es mich dir schnell zeigen. Scrollen Sie nach oben. Das erste hier, wir haben das Logo „Heizung“ auf mittelgroßen Geräten. Und dann wird es nur auf einem kleineren Gerät erscheinen. Und das zweite Logo hier, wir haben es auf einem kleineren Gerät beheizt und wir haben es auf mittelgroßen Geräten angezeigt, und dann ist das das Logo. So einfach ist das. Aber das Problem, das wir jetzt haben, ist, dass die Dinge nicht gut aufeinander abgestimmt sind. Schauen wir uns also an, was passiert. Scrollen Sie nach oben. In Ordnung, Leute. Schau es dir an. P X. Lass es uns ändern und schauen, ob wir die richtige Ausrichtung bekommen. Nachladen. Das Gleiche hier. Wir müssen zurück zum Code. Ordnung. Also hier, weißt du, wir haben diesen Code von hier geklaut, richtig? Also müssen wir einige Eigenschaften ändern. Wir wollen nicht, dass es mittig ausgerichtet wird. Nachdem Sie dies getan haben, scrollen Sie nach oben. Die Spalte mit den Grid-Vorlagen wird hier fünf sein. Und ich denke, das wird das Problem lösen. Ordnung. Wunderschön. Schauen wir uns das an oder mehr pro Gerät. Dies ist das erwartete Ergebnis. Ordnung, Leute. Die Fußzeile nimmt allmählich Gestalt an Das Nest in der Reihe dient zur Anzeige der Elemente. Lass uns das in der nächsten Vorlesung machen. 62. Fußzeilenelemente: Lassen Sie uns schnell die Puta-Elemente anzeigen. Und ganz oben. Wir haben also eine Reihe von Dienstleistungen. W im Array, wir haben alle Dinge , die Sie rendern können. Und übrigens, du kannst es auf deiner Seite ändern. Ja. So können Sie die Art der Dienstleistung angeben, die Sie erbringen. Auch hier haben wir eine Reihe von Begleitern. Wir haben einen Bat Meet The Team-Kontoüberprüfung. Und hier haben wir eine Reihe von Heapings, die den Kontakt, häufig gestellte Fragen und den Live-Chat enthalten häufig gestellte Fragen und den Live-Chat Und hier haben wir die rechtlichen Richtlinien. Jetzt werden wir alle Dinge auf dem Bildschirm anzeigen . Gleich nach dem Schließen von DV. Wir werden ein D haben und ihm einen Klassennamen auf einem mittleren Gerät geben Klassennamen auf einem mittleren Gerät Wir werden es blockieren lassen, andernfalls werden wir es auf einem kleineren Gerät verstecken lassen. Die Idee ist also, das Accodu zu verwenden , um die Objekte auf kleineren Geräten umzuschalten und zu öffnen Lassen Sie uns jetzt ein P-Tag haben. Ich werde Dienstleistungen erbringen. Lassen wir es auf den neuesten Stand bringen. Das Schriftmedium, das ist die Schrift nass. Text weiß. Schriftgröße. Ordnung. Nach dem abschließenden P-Tag werden wir auf der Liste eine UL haben , innerhalb der UL werden wir die Artikel zuordnen. Hier werde ich Servis Dot Map machen. Also versuchen wir, diese Datenmenge abzubilden, was Service ist Wenn wir dieses Array abbilden, werden wir all diese Elemente auf dem Bildschirm aufteilen, also die Elemente innerhalb des Dienstes. All diese Dinge sind eigentlich die Grundausstattung. Jetzt machen wir ein Element, und dieses Element steht für jedes Element im Array. Also werden wir die Benutzeroberfläche zurückgeben. Innerhalb der Benutzeroberfläche werden wir ein LI-Tag haben. Innerhalb des LI-Tags werden wir einen A-Zug machen und dann müssen wir das Objekt nur noch anzeigen Speichern Sie und sehen Sie, was wir haben. Ordnung. Jetzt haben wir es hier drüben. Geben wir ihm schnell das S. Geben wir dem A-Schlepper einen Klassennamen. Der Text, sieben B, 858b. Die Schrift Dash, Sans, ist die Schriftfamilie Auf Hova wird die Opazität 75 betragen. Lass uns speichern und sehen, speichern. Jetzt haben wir es im Browser. Siehst du auf Hova? Eins noch, lassen Sie uns näher an den Zeiger heranrücken. Sieht schon wunderschön aus, aber ich bin mit der Ausrichtung nicht zufrieden Schauen wir uns also an, ob wir das UL-Tag stilisieren können. Gib ihm einen Klassennamen. Rand oben sechs Leerzeichen y vier. Dann wird die Textgröße SM sein. Speichern Sie das Projekt. So sieht es schöner aus. Nachdem Sie dies getan haben, scrollen Sie nach oben. Wir haben eins, zwei, drei, das heißt, wir werden es dreimal duplizieren. Höhepunkte von diesem Eröffnungstauchgang bis zum Schlusstauchgang. Ich werde es einfach dreimal duplizieren. Sie können es dreimal kopieren und einfügen. Okay, lass mich kopieren und einfügen. Ich habe kopiert, dann komm her, ich füge ein, füge ein. Ich möchte es allen leicht machen, mitzumachen. Sobald Sie gespeichert haben, haben wir jetzt dieselben Artikel an drei Stellen. Lassen Sie uns also schnell die einzelnen Elemente verknüpfen. Wenn du nach oben scrollst, wird das Begleitung sein. Das ist der erste Gegenstand. Dies ist der zweite Punkt. Wir werden das Unternehmen kartografieren und hier das P-Tag, wir machen die Copanin-Politik Ich finde, so klingt es besser . In Ordnung, wenn du es siehst. Gut. Kannst du Beautiful Scroll wieder nach oben sehen, wir haben die Hep C. Das ist die Firma, dann werden wir die Hilfe kartografieren Was machen wir hier? Hilfreiche Links. Ja. Schließlich müssen wir das Lego kartografieren. Und hier ist es. Also werde ich mich mit Rechtspolitik oder Politik befassen. Was denkst du? Jetzt machen wir Ego Dot Map und dann werden die Objekte auf dem Bildschirm angezeigt. Schau es dir an. Wunderschön. Wir sind also mit der Fußzeile auf großen Geräten fertig Wenn Sie das Mobilgerät auschecken, werden Sie feststellen, dass dort nichts angezeigt wird Keine Sorge, ich verstehe, dass das Testimonial aus seinem Behälter herauswächst Wir werden es auf jeden Fall in Zukunft reparieren. Auf einem kleinen Gerät wird nichts auf dem Bildschirm angezeigt. Mal sehen, was wir auf dem iPad A haben. Gut. Auf dem iPad haben wir es so. Und ich liebe jedes Detail des Designs. Perfekt. Das Nest und die Linie besteht darin, die Social-Media-Symbole anzuzeigen. Lass uns das in der nächsten Vorlesung machen. 63. Zeige Social-Media-Icons an: Willkommen zurück im Unterricht. Ordnung, lassen Sie uns mit der Anzeige der Social-Media-Symbole fortfahren . Gleich nach diesem D werden wir ein weiteres D haben. Ein extra großes Gerät, das maximale W wird sechs Excel sein. Außerdem müssen wir das Maximum mit sieben Excel-Werten übertreffen. Px zehn auf einem mittleren Gerät, Px 20. Ein extra großes Gerät, px 44, Mx oder zwei. Bei einem kleineren Gerät wird der Pi eine Überlaufheizung sein Jetzt haben wir noch ein D, gib den Klassennamen Lassen wir es Flex anzeigen. Dann werden wir es flexibel einwickeln lassen. Der Flexwickel wird Wrap sein. Begründen Sie einen Inhalt mit einem Leerzeichen dazwischen. Mittig ausgerichtete Elemente. Noch einer. Die Breite wird ein Paar des Bildschirms sein. Ein kleines Gerät, die Breite wird automatisch eingestellt. Auch hier gilt, dass bei einem kleinen Gerät der Rand links und rechts für den unteren Rand zehn und bei einem kleinen Gerät B Null ist . Hoppla Schau es dir an. Wunderschön. Jetzt werden wir ein A-Tag haben. Innerhalb des A-Tags müssen wir das SVG einfügen. Öffnen Sie die Code-Ressource. Scrollen Sie nach unten. Du wirst die FO-Symbole sehen. Lass uns das SVG für Twitter kopieren. Markieren und kopieren. Komm her, füge es zwischen das A-Tag ein. Formatieren Sie den Code. Speichern Sie und sehen Sie, was wir auf dem Bildschirm haben, und jetzt haben wir es so. Geben wir ihm schnell einen Stil. Geben Sie dem A-Tag einen Klassennamen. Lassen wir es Flex anzeigen. Flex-Richtung ist Spalte. Artikel, Mittig ausrichten. Begründen Sie außerdem, dass der Inhalt zentriert ist. In Ordnung. Wenn du auf das Social-Media-Symbol klickst, wollen wir einen neuen Tab öffnen, also Target equa, leer , dass Sie innerhalb der H REF-Hypothesenreferenz Stellen Sie sicher, dass Sie innerhalb der H REF-Hypothesenreferenz Ihren Thread-Link dort drüben oder sozusagen Ihren Hochtöner einfügen , falls es jetzt so etwas gibt Nachdem Sie dies getan haben, finden Sie es unter dem abschließenden Tag der SVG-Datei. Wir werden einen H-Five haben. Ich werde einen Twitter-Thread machen. Sie können einen Thread erstellen, wenn Sie ein Thread-Konto haben, und Sie können auch das Thread-SVG verwenden. Mm. Geben wir jetzt den Klassennamen an. Es wird Rektor sein. Es wird eins sein. Auf einem großen Gerät ist Ming auf Platz drei. Text S und noch ein Gerät, Text B. Schrift, Die Schriftfamilie, wir werden seine Söhne haben, und dann der Test, die Farbe des Tests wird Grau 200 sein. Der Übergang wird auf die Farben eingestellt. Die Dauer macht 300 draus. Die Gruppe, Hove. Wir werden eine SMS bekommen. Wenn Sie jetzt mit der Maus auf den Test zeigen, werden wir eine blaue Testfarbe haben 48, e von Ed. L Lass uns sparen und sehen, was wir haben. Gut. Guck mal. Siehst du? Nun, was ich tun werde , ist einfach. Wir werden diese Auswahl aus den Zeilen eins, neun, drei, zwei, zwei, eins, zwei hervorheben . Ich würde es viermal duplizieren. Sie können viermal kopieren und einfügen. Ordnung. Wenn du speicherst, und hier ist das Endergebnis. Es ist alles wunderschön. Also lass uns das ganze Zeug ersetzen. Wir werden Instagram, Dribble und so weiter und so fort haben Dribble und so weiter und so fort Also muss ich nur den Köder posten und ihn dann bei mir umsetzen Das ist extrem einfach zu machen. Öffnen Sie zum Beispiel die Code-Ressource Dann ist hier das Git-SVG. Markiere und kopiere hier drüben. Ich werde Twitter machen. Jetzt werde ich dieses SVG ersetzen, und dieses ist für Git. Bitte achten Sie darauf, die URL Ihres Profils oder Ihres Gits-Profils in das Format H. Is Lend to einzufügen Ihres Profils oder Ihres Gits-Profils in das Format H. Is Lend to Hier werde ich Git machen. Okay, lass es mich für dich tun. C schau dir die Vorlesung am Ende an. Dieser ist zum Dribbeln, Markieren , Abwischen und Einfügen Jetzt werde ich Dribble machen. Hier ist Dribble. Der nächste ist Link D. Kopiere den Link, dann geht es auch, wir wir auch, haben ihn auch für Instagram Wenn du speicherst, schau es dir an. Wunderschön. Wenn Sie also klicken, wird eine neue Seite geöffnet. Wenn Sie beispielsweise die URL Ihres Githubs eingefügt haben und darauf klicken, wird Ihr GitHub-Konto in einem neuen Format geöffnet Ihr GitHub-Konto in einem neuen Lassen Sie uns es auch für Gmail implementieren. Wir müssen es auch noch einmal duplizieren. Markieren Sie aus den Zeilen 28223 auf drei duplizierten Zeilen. Das wird G-Mail sein. Lassen Sie uns es durch das G Mail-SVG ersetzen. Ordnung. Wenn Sie den Browser speichern und auschecken, ist hier das Endergebnis. Das ist extrem großartig. Nachdem wir dies getan haben, gehen wir schnell zur nächsten Vorlesung über , damit wir diese Elemente auf einem kleineren Gerät anzeigen können. Wenn Sie es auf einem kleinen Gerät auschecken, werden Sie feststellen, dass bis auf die Artikel alles einwandfrei funktioniert . 64. Fußzeilenmenü auf Mobilgeräten: Er ist da. Willkommen zurück im Unterricht. In dieser Vorlesung werden wir das Futa-Menü implementieren. Wenn der Benutzer auf das Menü klickt, werden die Elemente auf dem Bildschirm angezeigt Lassen Sie uns es schnell implementieren. Öffnen Sie das Filterverzeichnis. Filterpunkt z. Außerdem müssen wir das Codon öffnen Ups, sehen Sie sich das an. Schließt den Explorer Innerhalb des Filters werden wir als Erstes das Codon importieren Gibt das Codon aus dem Codon mit dem Schrägstrich ein. Nachdem Sie dies getan haben, besteht die nächste Endzeile darin, alle diese Elemente als Requisiten an das Codon weiterzuleiten . Wie machen wir das? Lass es mich dir schnell zeigen. Scrollen Sie nach unten. Schreiben Sie, bringen Sie den Abschnitt nach dem s. Wir werden Akkordeon rendern Schließ es mit dem selbstschließenden Etikett. Jetzt müssen wir uns den Titel merken und wir werden Dienstleistungen anbieten. Hier, dann lass uns den Inhalt gleich übergeben, nach oben scrollen und ich zeige es dir. Dieser Typ hier, das ist das Serviceangebot. Markieren und kopieren. Komm her und füge ein. Markieren Sie jetzt, wir müssen es dreimal duplizieren. Halten Sie die Umschalttaste gedrückt und drücken Sie die Taste mit dem Abwärtspfeil, um zu duplizieren. Dupliziere eins, zwei und drei. Jetzt müssen wir den Titel und den Inhalt ändern . Hier werden wir haben. Eigentlich kannst du es von hier aus überprüfen . Lass es mich dir zeigen. Das sind also die Titel. Die Copaning-Richtlinie, hilfreiche Links und auch die rechtlichen Richtlinien Ich glaube, wir haben jetzt die Unternehmenspolitik. Markieren und kopieren, hierher kommen und einfügen. Nach oben schrauben. Wir müssen diese Gruppe von Leuten als Requisiten ins Akodeon Was wir jetzt also tun sollten, ist, es hier als Inhalt zu übergeben , weil der Inhalt bereits ein Attribut ist , das in das Akcodon aufgenommen wird Hier haben wir die hilfreichen Links. Markieren Sie es dann, wischen Sie es ab und fügen Sie es ein. Wir haben Sepsis. Scrollen Sie nach oben Hier werden wir uns mit dem Helfen befassen, dem ganzen Spektrum des Helfens. den Titel angeht, werden wir schließlich die rechtlichen Richtlinien haben. Scrollen Sie nach oben, wo wir eine Reihe von rechtlichen Informationen haben. Markieren und kopieren. Komm her. Wir müssen es auch ersetzen. Nachdem wir das getan haben, sollen das Nest und die Linie diese Requisiten im Acodon aufnehmen Tun Sie, was Sie speichern möchten, und kehren Sie innerhalb des Parameters dieser Funktion zum Akkordeon gs innerhalb des Parameters dieser Wir werden Titel und Inhalt destrukturieren . Lass es mich dir noch einmal zeigen Hier ist der Titel und hier ist der Inhalt. Bitte achten Sie auf die korrekte Schreibweise, damit Sie keine Probleme haben. Jetzt ist alles richtig gemacht. Deklarieren Sie die erforderlichen Zustandsvariablen, die verwendet werden sollen. Hier oben werden wir den U-State-Hook portieren. Der Ute-Hook ist eine Funktion. Deshalb müssen wir ihn aufrufen. Wir im US-Bundesstaat funktionieren. Wir werden als Ausgangsstaat in Kraft treten. Dann werden wir hier eine Reihe von zwei Einträgen haben. Cost ist offen, C-Set ist offen, dann weisen Sie es wie folgt zu. Dies ist die Variable, die den Anfangszustand enthält, und dies ist die seta-Funktion, die verwendet wird, um den Anfangszustand zu aktualisieren. So einfach ist das Ich denke, Sie sollten mir einige Gefolgsleute für diese schönen Jetzt werden wir eine Funktion haben. C, wir werden es Tg, Tg accodu nennen. Stellen Sie es auf eine Funktion ein. Gewinnen Sie die Funktion, wir werden das Set is open to not open machen. Jetzt innerhalb von DUI Wenn Sie auf Ihrer Seite keinen Klassennamen haben, geben Sie bitte den Klassennamen an Geben wir den Rand und die Rahmenfarbe Rand d39, 39, 39. Der untere Rand ist vier, Scheitel oben und der Scheitel Machen wir sechs draus. Wir werden noch ein D haben. Gib ihm einen Klassennamen. Wir werden dafür sorgen, dass es Flex anzeigt inhaltlichen Abstand dazwischen rechtfertigt. T. Richten Sie die Elemente zentriert aus. Der Abstand beträgt zwei, auf einem kleineren Gerät jedoch vier Die Breite wird zu 100% voll sein. Schließlich wird der Hintergrund für Lehrarbeiten rot 500 sein. Ja. Ja, hat D? Nein, so gefällt es mir nicht. Ordnung. Wann wird D, wir werden einen H-Two-Tag haben. H zwei. Gewinnen Sie das H-Two-Tag, wir werden den Titel anzeigen. Dieser Titel hier drüben, denken Sie daran, dass wir ihn hier innerhalb des Funktionsparameters destrukturiert innerhalb des Funktionsparameters und er von hier kommt Wir haben ihn als Requisiten an das Codon weitergegeben, und dann haben wir ihn hier erhalten Da wir es hier erhalten haben, sollten wir es überall in der Komponente verwenden können es überall in der Komponente Mal sehen, was wir auf dem Mobilgerät haben. Wenn Sie neu laden, heißt es „ Modulo of Countries of Codion Mauer. Mal sehen, was wir hier haben. In der Fußzeile haben wir das Codon. Gehen wir zurück zur Fußzeile, scrollen wir nach oben. Wir importieren Codon aus Codon. Wirf einen Blick darauf Wir müssen den Schlitten ausziehen. Jetzt funktioniert es Festschrauben. Ordnung. Wunderschön. Kannst du den Titel sehen? Wir haben den Service, die Copanent-Richtlinie, den hilfreichen Link und die rechtlichen Wenn Sie mit Ihren technischen Augen beobachten, werden Sie feststellen, dass der Abstand zwischen den einzelnen Objekten extrem Lassen Sie uns das schnell beheben. Ordnung. Gehen wir zurück zum Akkordeon Schließt den Explorer. Ich denke, wir müssen das H-Two-Tag stilisieren. Geben wir den Klassennamen. Text d zwei Excel. Machen wir es breit. Die Schrift wird halbfett sein. Ordnung. Lass uns speichern und sehen. Ordnung, ich liebe die Farbe des Tests und wie er aussieht. Lassen Sie uns schnell den Abstand zwischen H-Elementen reduzieren. Was ich jetzt tun werde, ist, die Polsterung oben und die Polsterung unten zu ändern Reduzieren wir es. Lass es uns auch schaffen. Wenn du speicherst. In Ordnung. Ich denke, das ist besser genug. Ja, ich liebe das. Schau es dir auf einem anderen Gerät an. Gut. Guck mal. Sieht nett aus. Was machen wir jetzt? Hier, wir werden ein D haben, geben ihm einen Klassennamen. BG geben wir ihm die Hintergrundfarbe. Wir werden exakt dieselbe Haarfarbe haben, Highlight-Cop. Dann auf die Piste Die Höhe wird acht sein. Die Breite wird acht sein. Wir werden es flexibel anzeigen lassen Inhalt zentriert ausrichten. Richten Sie die Elemente zentriert aus. Dann werden wir die Kanten so gestalten, dass sie abgerundet werden. Also werden wir es vollständig abrunden. Wir wollen, dass es eingekreist wird. Nachdem wir das getan haben, kopieren wir das X VG und fügen es hier ein. Öffnen Sie die Coderessource dot MD. Kopieren Sie das Akkordeon-SVG. Gehen Sie zurück zum Code, fügen Sie ihn dazwischen ein, speichern Sie ihn und achten Sie darauf, ihn zu formatieren Schau es dir im Browser an. Es sieht sehr schön aus. Aber wir müssen die Farbe ändern , damit sie besser sichtbar ist. Geben wir ihm einen Klassennamen. Hier, wir werden W sechs machen. Jetzt stilisieren wir das Symbol selbst. Die Breite des Symbols wird sechs sein, die Höhe wird sechs Textweiß sein Schau es dir an. Kannst du es jetzt sehen? Wunderschön. Mir gefällt, was ich sage. Lass uns weitermachen. Wenn wir auf diesen Artikel klicken, möchten wir das Symbol drehen. Lass es mich dir schnell zeigen. In der Klasse müssen wir jetzt also die String-Interpolation übernehmen weil wir Java-Skript erwarten , damit wir die Bedingung schreiben können Ordnung. Jetzt können wir die Bedingung haben. Wenn open auf true gesetzt ist, passen Sie auf, es wird nichts passieren. Andernfalls müssen wir das Symbol drehen. Minus um 90 Grad drehen. Wenn Sie das Ergebnis sehen, verstehen wir auf jeden Fall, was wir hier getan haben. Jetzt haben wir das Symbol wie dieses. Ja, lassen Sie uns den Klick schnell implementieren. Also, wo implementieren wir den Klick jetzt? Lassen Sie uns das in diesem D implementieren. Klicken Sie, wir nennen das Togol-Akkordeum Sicher. Schau es dir jetzt an. Wenn ich auf dieses Symbol klicke, dreht es sich genau um 90 Grad nach unten Schau es dir an. Sag mir, sieht nicht gut aus. Natürlich tut es das. Wenn Sie erneut klicken, drehen Sie, Sie drehen, Sie drehen. Sie können auch klicken, um es anzupassen. Alles funktioniert, alles ist cool. Ich liebe es. Das ist jetzt oft für diese Vorlesung. In der nächsten Lektion werden wir die Elemente anzeigen, wenn auf den Titel geklickt wird Wenn du auf dieses Menü klickst, sollten wir in der Lage sein, dienstbezogene Daten anzuzeigen Wenn Sie auf die Component-Richtlinie klicken, sollten wir außerdem in der Lage sein, die Daten zur Component-Richtlinie anzuzeigen . So einfach ist das. Ich habe zu viel geredet. Wir sehen uns in der nächsten Vorlesung. 65. Dropdown-Menü Fußzeile auf deinem Mobilgerät: Hallo zusammen. Willkommen zurück im Unterricht. In dieser Vorlesung werden wir das Drop-down-Menü implementieren. Dafür werden wir die Headless-Benutzeroberfläche verwenden. schnell zu headless.com und scrollen Sie ein wenig nach unten Hier sehen Sie den Installationsbefehl. Stellen Sie sicher, dass Sie es markieren und kopieren, Sie zum FS-Code zurück. Öffne das Terminal. Stellen Sie sicher, dass Sie in das Terminal klicken und dann Contra C ausführen, um den aktuell laufenden Server zu stoppen Jetzt werden wir den Befehl zur Installation der Headless-Benutzeroberfläche bereitstellen Drücken Sie die Eingabetaste , um es zu starten. Die Installation war erfolgreich. Lass uns das Terminal herunterfahren. Schraube nach oben. Bitte, wir sind immer noch im Codon. Jetzt gehen wir zu den Töpfen, sehen wir uns das an. Wir sollten das Zeug trennen. A: Wir werden die Transaktion von einer kopflosen Benutzeroberfläche importieren. Nachdem Sie dies getan haben, scrollen Sie nach unten und wo implementieren wir es jetzt Lassen Sie mich Ihnen gleich nach diesem D zeigen, wo wir On-Click implementiert haben. Wir werden die Transaktion rendern . Wir werden einige Einstellungen innerhalb der Transuktion vornehmen einige Einstellungen innerhalb der Transuktion Aber bevor wir das tun, lassen Sie uns die Elemente schnell rendern Öffnen und schließen Sie die Klammern. Klammern innerhalb der Co-Klammern Öffnen und schließen Sie Klammern innerhalb der Co-Klammern, und dann nehmen wir R setzen es auf eine Jetzt haben wir ein D geben dir den Das Muster des D, wir werden es vier haben, das BG für den Unterricht verblasst Das BG wird gelb 500 sein, wenn es um Purpur geht. Schließ es Wir werden nehmen und zuordnen. Innerhalb des D werden wir eine Inhalts-Punktmap erstellen. Wir müssen den Inhalt zuordnen , damit er auf dem Bildschirm angezeigt wird. Natürlich sollten Sie die anderen beteiligten Prozesse kennen. Nehmen wir nun Elemente, die jedes Element innerhalb des Arrays repräsentieren . Ich sage das immer wieder, weil ich bei dir bleiben wollte. Wir werden schnell ein P-Tag haben. Innerhalb des P-Tags werden wir den Artikel anzeigen. Ops speichern, das müssen wir im Terminal erledigen, und PM Run Dev. Mal sehen, was wir haben. Die Anwendung ist auf lokalen Host-Pots geöffnet, 3.000. Und jetzt heißt es, dass Transektion verwendet wird, aber es fehlt die Eigenschaft show handelt es sich um eine boolesche Operation, die entweder true oder false zurückgibt Also, was wir jetzt innerhalb der Transaktion tun müssen, wir werden die Eigenschaft hier einrichten, wir werden zeigen Wir werden es auch einrichten, es ist offen. Ordnung. Lass uns sparen. Scrollen Sie nach unten. Wenn Sie jetzt klicken, können wir das Menü öffnen. Aber ich weiß nicht, warum die Artikel nicht angezeigt werden. Wir müssen zurückgehen und nachschauen, was wir hier gemacht haben. Hier ist das P-Tag. Punktkarte mit Inhalten. Lass uns sehen. Ja, wir haben den Inhalt dort. Was ist nochmal? Ordnung, Leute, ihr wisst, dass wir euch hierher zurückbringen werden . Ich sage dir immer, dass du diesen Fehler nicht machen sollst. Aber jetzt scheinen wir alle Opfer zu sein. Okay. Hier haben wir eine Elternschaft und keinen Mitschüler. Achten Sie darauf, die Parentenss hier zu öffnen und zu schließen. Speichern Sie und lassen Sie uns sehen. Wunderschön. Kannst du sehen? Schau es dir an. Das ist genial. Das liebe ich. Jetzt fühle ich mich erleichtert Kannst du es sehen? Jetzt fühle ich mich gut. Lassen Sie uns einige Eigenschaften innerhalb der Transaktion implementieren , damit sie schöner aussieht Gehe weiter zum Kopf L UI. In der unteren linken Ecke des Bildschirms sehen Sie die Transaktion. Öffnen hier klicken. Ich werde nun alle Eigenschaften hierher kopieren. R klicken Sie auf Kopieren. Komm her. Wir übernehmen die Transaktion, fügen sie ein, speichern sie. Ich bin sicher, den Code zu formatieren. Schauen wir es uns jetzt noch einmal an. Ein besserer. Siehst du die Animation? Schau es dir an. Alles cool. Lassen Sie uns schnell das P-Tag stilisieren. P nach einem. Den Text, machen wir ihn grau. Text grau, 500. Lass uns 400 draus machen , weil das Grau zwei Du. und es ist 500, aber richtig. Jetzt haben wir den tatsächlichen Wert. Die Schrift klingt gut. Sicher. Tackle schon wieder Perfekt. Aber jetzt müssen wir die Grundfarben entfernen, weil ich sie für Unterrichtszwecke verwendet habe , damit Sie gut genug verstehen, was ich Die Hintergrundfarbe sollte bei all dem Zeug hier genau dieselbe sein. Markieren Sie die Kopie. Komm her. Einfügen. Ups, pack es in eine eckige Klammer. Mir gefällt der Menühintergrund nicht Ich denke, wir sollten den Fußzeilenhintergrund für das Menü verwenden , damit es sich vermischen kann Ordnung. Öffne schnell die Fußzeile. Wo wir den Hintergrund für die Fußzeile haben. Hier ist es Wir müssen diesen Hintergrund kopieren Kopie in der Fußzeile in den Zeilen 52 markieren Wenn du herkommst, müssen wir es nur ersetzen. Das Gleiche hier. Wir müssen es auch ersetzen. Okay? Wenn du sparst, lass uns sehen, was wir haben. Jetzt, wunderschön. Kannst du sehen, wie schön das aussieht? Extrem schön. Schau es dir an. Das ist erstklassig. Ich denke, wir sind fertig. Wir sind fertig. In der Tat sind wir fertig. Schauen wir es uns also auf dem iPod an. Perfekt. Alles cool. Also das ist ein Angebot für einen Töpfer und ich hoffe, dir gefällt das Design. Lesen und überprüfen Sie unbedingt die Ergebnisse. Es bedeutet mir sehr viel. Ja? 66. Design der Kontaktseiten-Kopfzeile: Hallo zusammen. Willkommen zurück im Unterricht. In diesem Abschnitt der Ursache. Wir werden mit der Kontaktseite fortfahren. Schnell, innerhalb des Seitenverzeichnisses. Klicken Sie mit der rechten Maustaste auf Neuer Ordner, und dieser wird Kontakt genannt. Gewinnen Sie das Verzeichnis Kontaktieren Sie mich, klicken Sie mit der rechten Maustaste, neu. Wir werden die Seiten haben. Wunderschön. Jetzt haben wir auf der Seite den Kontakt mit mir und das Portfolio-Detaildesign. Es wäre sehr schön, wenn wir uns an die Grundprinzipien der Gestaltung einer professionellen Website halten würden, was bedeutet, dass wir die Seite in zwei Seiten umbenennen sollten. Es sollte ein Pleurawort sein. Mach dir darüber vorerst keine Sorgen. Wir würden es am Ende des Kurses machen. Seiten „Kontaktieren Sie mich“. Schließen Sie den Explorer, RFC, um funktionale React-Komponenten zu generieren Wir werden eine Kontaktseite erstellen. Öffnen Sie die Explorer-Komponente und öffnen Sie dann den Header, Header Dot JS. Scrollen Sie schnell nach unten. Innerhalb dieses LI-Tags werden wir auf die Kontaktseite klicken. Im nächsten Schritt wird jedes Mal, wenn ein Paket auf der Verzeichnisseite erstellt wird, was der Typ ist, dieses Verzeichnis was der Typ ist, dieses Verzeichnis automatisch zu einer Route. Vorerst können wir sagen, dass das Kontakt-Me eine Route ist weil die Seite, die er hat innerhalb des Contact-Me-Verzeichnisses erstellt wird, und das Contact-Me-Verzeichnis wird innerhalb der Seite erstellt. Lassen Sie mich das noch einmal wiederholen. Im nächsten Schritt wird jedes Mal, wenn Sie einen Ordner innerhalb des Seitenverzeichnisses erstellen, dieser Ordner automatisch zu einer Route wenn darin ein Seitenpunkt s erstellt wird. Einfach und kurz. Jetzt werden wir die Seite ins Visier nehmen und mich dann kontaktieren. Lass es mich dir schnell zeigen. Und ich denke, Sie werden es definitiv verstehen, wenn wir es implementieren. Ich werde Slash Page Slash machen, kontaktiere mich so Wenn Sie speichern, schauen wir es uns im Browser an. Stellen Sie sicher, dass Sie neu laden. Versuchen wir es, indem wir auf die Hyam-Schaltfläche klicken Kannst du es sehen? Jetzt konnten wir die Kontaktseite öffnen . Lass mich deinen Hund löschen. Geh zurück zu den Codepages. W in der DP, wir werden einen Hage One Tag haben. W im Kopf ein Tag, lass uns diesen Test kopieren Entschuldigung, wir müssen ausschneiden und dann einfügen. Geben Sie den Klassennamen ein. Wir werden Rückenwind verwenden und ich werde Text sieben Excel machen. Dadurch wird der Text extra groß. Jetzt haben Sie den Text in der oberen linken Ecke des Bildschirms. Ich muss auch deine Neugier stillen. Wir werden einen Display-Flex haben. Richten Sie den Inhalt zentriert aus, richten Sie die Elemente zentriert aus. Dies dient nur zu Unterrichtszwecken, und hier ist die Kontaktseite. Sieht nett aus. Wir brauchen nichts von dem Zeug hier. Markieren, abwischen, Befehl B, um den Explorer zu schließen. Hier werden wir ein bisschen schnell sein , damit wir nachholen können, was wir für diese Vorlesung haben. Schreiben Sie einen schönen Kommentar, wenn Ihnen die Art und Weise gefällt, wie ich unterrichte. Wir werden ein React-Fragment haben. Sie können die leeren Fragmente verwenden, wenn Sie möchten. Sie sind alle gleich, nur dass die Reaktionsfragmente einige Requisiten aufnehmen können. Ich denke, das ist der Unterschied. Hier werden wir tauchen. Gib den Klassennamen an. Wir werden den DV haben, um Flex anzuzeigen. Die Flex-Richtung ist Spalte. Lassen Sie uns die Elemente zentriert ausrichten. Begründen Sie außerdem, dass der Inhalt zentriert ist. W, volle Polsterung oben, 80 px. gepolstert. Machen wir auch 80 Pixel draus Machen wir Margin Top, F, dann haben wir noch ein D. Das Gleiche hier Wir müssen sie nur von hier aus markieren, kopieren, herkommen und einfügen. Wir müssen keine Zeit verschwenden. Wir werden den Hintergrund angeben, BG, offene und schließende eckige Klammern. Gewinnen Sie die eckigen Klammern, wir nehmen die URL auf. Dann öffne und schließe Parentenss. Gewinnen Sie das Double. Wir werden Slash Offices Dot JPG machen. Wir haben ein Image-Büro. Und dieses Bild befindet sich im öffentlichen Verzeichnis. Ich muss dich nicht mehr dorthin mitnehmen , weil du es inzwischen wissen solltest. Hier, wir werden BG-Cover machen. Wir versuchen, das Bild zu stilisieren. Lassen Sie uns übrigens zu D. W Full schließen. Geben wir die Höhe an. Lass uns 400 Pixel draus machen. Im Browser speichern, hier ist es. Perfekt. Kommt vorsichtig raus. Eine weitere Sache, die wir tun müssen, ist das Bild mittig auszurichten, PG-Mitte. Speichern Sie und sehen Sie, was wir haben. In Ordnung. Sieht nett aus. Schreiben Sie O in dieser Definition, wir werden ein Hintergrund-Overlay erstellen Wir werden ein anderes DF haben, geben Sie den Klassennamen Wir werden hier genau das Gleiche haben. Markieren Sie Kopieren, kommen Sie her und fügen Sie es ein. Ja. Also wird die Breite gleich sein. Die Höhe, der volle Hintergrund, wir werden mit dem dunklen Hintergrund, den wir verwenden, konsistent bleiben : 223, 740. Was wir jetzt tun werden, ist einen Schrägstrich zu verwenden , der durch 70 geteilt wird Wir wollen die Dicke des Hintergrunds reduzieren. Wenn du sparst, müssen wir leider die Zähne schließen, sparen und sehen, was wir haben. Jetzt haben wir es. Wenn ich die 70 so entferne, können Sie sehen, es wird so sein , etwa undurchsichtig Aber wenn Sie wollen, dass es transparent ist, müssen wir es einfach durch 70 teilen , oder Sie können es durch einen beliebigen Wert teilen um das transparente Aussehen zu erhalten , das Sie sich wirklich wünschen Meins ist so. Damit bin ich zufrieden. Lassen Sie uns die Helligkeit anwenden. Hintergrundhelligkeit, Helligkeit. Nein, wir werden es 50 haben. Ich glaube, das war, als du siehst. Nett. Geben Sie dieses D ein, wir werden ein anderes D haben. Geben Sie ein UI ein. Testen Sie das Align-Center. BG, wir wollen ihm den Hintergrund geben. Natürlich werden wir uns an den Hintergrund halten . 48, AFD E, PY, ein Pixel, Px, acht Pixel Spur und Weiß. müssen unsere von Fall zu Fall ändern, die Schrift wird halbfett sein. Text 20 Pixel. Text weiß für die Farbe, und wir möchten, dass der Hintergrund abgerundet . Innerhalb des D. Ich kann es jetzt sehen Okay. Ich denke, ich sollte die Vorderseite etwas vergrößern . Magst du es so? Das ist schade und es wird fast alles verbergen. Lass uns so weitermachen. Also was ist nochmal? Lass es uns überprüfen. Es kann sein, dass Sie nichts im Browser sehen bis wir etwas zwischen dem d anzeigen . Also werden wir hier ein A-Tag haben. Mit dem A-Tag machen wir ein Kontaktformular. Wenn du speicherst, hier ist es. Das ist genau die Erwartung. oben und teilweise und unten zusammensetzen, machen wir fünf Pixel daraus. Ich denke, es ist in Ordnung. Dann machen wir diese zehn Pixel. In Ordnung, wunderschön. Wir machen HREF auf Augenhöhe, Kontakt. Wenn wir auf dieses A-Tag klicken, was in diesem Fall hier drüben der Fall ist, wird es glatt genau zum Kontaktformular scrollen Ja. Was wird jetzt passieren? Geben wir den Klassennamen an. Lass es uns pochen lassen. Wunderschön. Was müssen wir jetzt noch tun? Nach diesem Tauchgang werden wir noch einen Tauchgang machen. Der obere Rand des Deve wird zehn Pixel betragen. Win, wir werden einen Hight One-Tag haben. Denken Sie daran, dass wir beim Telefon konsequent bleiben. Hier haben wir die Schriften zum Erinnern. Der Text D fünf ist hervorragend. Auch hier der Texttext, z. B. in derselben Farbe. Ich markiere einfach den Text und ersetze ihn dann. Pan wird zwei Jahre alt. Testen wir die Ausrichtung auf die Mitte. Dies ist für den späteren Abstand. Gewinnen Sie das Head-One-Tag, ich mache es und Sie retten M In Ordnung. Hier ist es. Wir haben es. Gut. Nach diesem DF werden wir noch ein D haben, gib ihm den Klassennamen. Lass uns etwas tun. Jetzt werden wir ein P-Tag haben. Gewinnen Sie das P-Tag, wir müssen nur den Text kopieren und ihn dann dazwischen einfügen. Innerhalb des Codes resource.md müssen wir den Schreibvorgang kopieren Markieren und kopieren, zurück gehen, einfügen. Formatieren Sie den Code. Speichern Sie im Browser und hier. Lassen Sie uns schnell das P-Tag stilisieren. Zuerst werden wir die Tiefe sterilisieren. Wir werden Display Flex, Justify Content to Center verwenden Wir werden eine Testlinie in der Mitte haben. Die zehn besten Margen. Auf mittelgroßen Geräten wollen wir die Breite 700 Pius und s. Fügen Sie das p-Tag ein und geben Sie ihm schnell einen Klassennamen Text weiß. Die Schrift, aus der wir 300 machen werden, das ist die Schrift mit Dann Textzentrumtext Excel. Wenn du das getan hast, siehst du, Wunderschön. Das ist genau das erwartete Ergebnis. Ich liebe es. Es sieht wunderschön aus. Nachdem wir das getan haben, schauen wir es uns schnell auf einem Mobilgerät an. Kannst du sehen? Gut. Perfekt. 67. Kontakt-Seite-Menükarte: In der vorherigen Vorlesung haben wir den Contact-Me-Header entworfen. In dieser Vorlesung werden wir mit den Karten, dem Code von Hao, weitermachen , gleich nach diesem D, dem D über Kopf. Dieser Typ. Wir werden links und rechts noch ein D. Padding machen, 20 Pixel Darin werden wir ein D haben, das den Klassennamen angibt. Auf einem kleineren Gerät werden wir ein flexibles Display haben, das GAP 20 Pixel, obere Rand 50 Pixel. Die maximale Breite entspricht der vollen Breite, also 100%, und auch die Höhe beträgt 100%. Was in Dos de, lass uns den Code schnell formatieren . Wir haben es so. Jetzt haben wir noch einen Def. Wir werden es flexibel machen lassen. Die Flex-Richtung ist Spalte. Dann machen wir Flex. Ein extragroßes Gerät, die Flexrichtung wird in Rollrichtung sein. Geben wir den Tab. 20 Pixel an. Wir versuchen, die Boxen zu erstellen. Wir werden noch eine DVD haben. PY, 35 Picks, P X 45 Picks. D G abgerundet, weil wir möchten, dass die Ecken und Kanten der Boxen etwas kurvig Der Schatten, G, das Cos, machen wir es zum Zeiger. Ich will, dass es abgewickelt wird, alle. Die Transformation der Dauer Bash 300. Wenn Sie auf Hova mit der Maus auf die Karte zeigen, ändern wir den Hintergrund. Ja. Es wird der tatsächliche Hova-Hintergrund sein , den wir verwendet haben Ich habe dir gesagt, dass man beim Aufbau einer professionellen Website konsistent bleiben muss beim Aufbau einer professionellen Website konsistent Wir wollen auch den Hova-Text ändern. Auch auf Hova. Wir wollen Y übersetzen. Wir werden es haben. Die tatsächliche Hintergrundfarbe der Karte wird sein B, weiß. Ich will es dir zeigen , damit du es sehen kannst c. Jetzt haben wir es. Das ist in Ordnung. Lassen Sie uns schnell den Box-Schatten darauf anwenden. Öffnen Sie schnell die Coderessource Punkt MD und kopieren Sie dann diesen Boxschatten. das getan haben, gehen Sie zurück zum Code und fügen ihn in das D ein. Fügen wir ihn hier ein. Also, wenn du den Browser auscheckst, und hier ist er. Und wenn du mit der Maus drüber fährst, erscheint der Hintergrund Die nächste Zeile soll sozusagen den Inhalt innerhalb des D oder innerhalb der Karte anzeigen sozusagen den Inhalt innerhalb des D oder innerhalb der Karte Aber ich möchte, dass du merkst, dass wenn ich schwebe , es sich nach unten überträgt Schau es dir an. Das ist nicht das erwartete Ergebnis. Es sollte nach oben und nicht nach unten übersetzt werden. Kehren Sie zu dem Code zurück, in dem wir den Hover implementiert haben. Ich denke, wir müssen hier einen negativen Wert wie diesen angeben Wir haben es schon einmal gemacht. Schau es dir noch einmal an. In Ordnung. In Ordnung. Was soll's, wir werden noch ein Div haben. Lassen Sie es Flex als Mittelpunkt der ausgerichteten Elemente anzeigen. Die Lücke, lass uns 15 draus machen. Wir können von hier aus wählen. Lass uns 16 draus machen. Nein, lassen Sie uns eine benutzerdefinierte Lücke angeben. 15 Pixel werden dafür gut sein. W im D, wir müssen das Symbol anzeigen, um mit den Symbolen fortzufahren. Zuerst müssen wir das React-Icon installieren. Klicken Sie in das Terminal Cont C , um den aktuell laufenden Server zu beenden Ich werde MPM install React Icons ausführen. Drücken Sie die Eingabetaste , um es abzufeuern. Installiert, erfolgreich. Auch hier muss ich nur den Server starten. Lass es uns ein bisschen runterholen. In Ordnung. Habe das React-Icon nicht installiert. Die Verschachtelungslinie dient dazu, die benötigten Symbole zu importieren Kehren Sie erneut zum Code-Ergebnispunkt MD zurück. Man braucht keine westliche Zeit , um alle Tops zu tippen. Sie müssen nur die Reaktionssymbole für das Feld „ Kontaktieren Sie mich“ markieren . Hier sind die, aus den Zeilen 8472 850. Kopieren Sie, kehren Sie zum Code zurück und scrollen Sie dann nach oben Genau hier müssen wir nur einfügen. Das sind die Icons. Lass mich dir diesen Typen zeigen, den FA-Standort, den FI-Telefonanruf und den Rest. Also hier werden wir den Punkt mit der F-Position rendern. Schließen Sie es mit dem Surf-Abschluss-Tag ab und lassen Sie uns es schnell stilisieren Die Größe, lass uns 40 draus machen. P, das sollte ein Cole-Bracket sein, 40. Je kühler wir auch konstant bleiben müssen 48, AFE. Was ist falsch? Ups, tut mir leid, das muss im Doppel- oder Einzelpreis gemacht werden im Doppel- oder Einzelpreis Wenn Sie den Browser auschecken, hier ist er. Es sieht gut aus. Beeil dich. Lass uns weitermachen. Gleich danach, dieser Typ hier, nehmen wir noch ein D, Flex, und dann ist die Flex-Richtung Spalte. Noch eins, und innerhalb der Entwicklung werden wir ein P-Tag haben und ich werde die Ortung machen, einfach so Wir haben es so. Nett. Was müssen wir jetzt tun? Lassen Sie uns den Tauchgang schnell abschalten. Der Text, dieser Typ, kopiere ihn, füge ihn ein. Wir werden die benutzerdefinierte Steuergröße von 14 Pixeln angeben. Ordnung. Schau es dir an. Kannst du sehen? Bleib in Form und ich mag es. Wir werden ein anderes D haben. Innerhalb des D werden wir ein P-Tag haben und innerhalb des P-Tags werde ich Besucheranzeige machen. Sie müssen Ihre Adresse angeben. Wenn Sie speichern, können Sie sehen, schauen Sie mal rein. Die Dinge nehmen allmählich Gestalt an und ich mag es. In der D , wieder am Vordertag, machen wir es halbwarm. Text, 20 Pixel, weiße Spur, das ist der Zeilenabstand. Wunderschön. Das getan zu haben. Komm her, wir werden ein D haben. Lass mich das vergessen. Gewinnen Sie das D, markieren Sie dieses Symbol. Drücken Sie die Option K mac und tippen Sie dann auf die Par-Taste, um sie innerhalb des D zu verschieben. Nachdem Sie das getan haben. Markiere das schließende D und hier ist es. Dieser Typ hier an der Warteschlange. Markiere das abschließende D in den Zeilen für fünf und schneide es ab. Wir müssen es genau hier einfügen. Was einfach bedeutet, dass diese Entwicklung hier hier endet. Die Linien 40 enden auf den Linien 54. Lassen Sie uns den Code schnell formatieren, um die richtigen Einrückungen zu erhalten. Wenn Sie jetzt den Browser auschecken, sieht er so aus, und genau das ist das erwartete Ergebnis gleich nach diesem PDF die Entwicklung hier zeigen, Lassen Sie mich Ihnen gleich nach diesem PDF die Entwicklung hier zeigen, mit der wir uns vor nicht allzu langer Zeit befasst haben Wir werden noch einen DF haben. Darin werden wir ein P-Tag haben. Gewinnen Sie das P-Tag. Ich werde es einfach tun? Das ist übrigens nur eine Adresse in der Domi-Straße Ja. Gib dem P schnell einen Klassennamen. Text Bindestrich. Einfach so, wer soll es grau machen. Es ist nicht schlecht, hebt es hervor, dupliziert es. Sie können den Straßennamen hier ändern und was auch immer. In Ordnung. Nachdem wir das getan haben, werden wir jetzt Folgendes hervorheben. Lass es mich dir zeigen. Stirbt hier, es endet hier so. Wirf mal einen Blick darauf. Es endet hier auf den Linien 63. Wir werden 38-62 hervorheben. C P, komm her. Daran vorbei. Sparen Sie nett. Wir haben es so. Die nächste Zeile ist Sc Top. Wir müssen dieses De hervorheben. Dieses De hier drüben von sieben endet hier in Zeile drei. Markieren Sie den Text aus 37293, kopieren Sie ihn und fügen Sie ihn ein. CF formatiert den Code schnell. Lass uns zurückgehen. Jetzt sehen wir es so aus. Extrem schön. Schau es dir auf einem Mobilgerät an. Es sieht so aus. Auf dem iPad sieht es genau so aus. Kannst du sehen, auf dem iPad-Gerät ist alles gut ausgerichtet. Ich habe das alles getan. Als Nächstes müssen die Symbole und die rechten Oberteile geändert werden. Okay? Lass es mich dir zeigen. Das ist die erste Kiste hier drüben. Und das ist die zweite Kiste. Was in der zweiten Box, wir werden die Telefonnummer haben. Also werde ich einen F-Telefonanruf tätigen. Ich werde nur hier 27 Service machen. Hier werde ich Farben auftragen. Dann musst du hier nur deine Telefonnummer angeben . Das alles kannst du also an deiner Seite tun. Ja. Also werde ich einfach eine zufällige Telefonnummer haben. Ordnung. Ich spare. Jetzt siehst du es so aus. Wunderschön und sauber. Was ist nochmal, müssen wir tun? Soll ich den ganzen Kram für dich erledigen? In Ordnung. Lass mich den Schmerz nehmen. Das ist der dritte. Hier werden wir die Mail anzeigen. Also werde ich KI-Mail machen. Also, was machen wir hier? Wir werden einfach eine Nachricht hinterlassen. Sie können hier etwas schreiben , das Ihre Website schön aussehen lässt. Wir werden nur die E-Mail-Adresse angeben. All das kannst du tun. Also hier, ich werde nur einen Test bei Gmail machen. Sie können Ihre E-Mail verwenden und bitte nicht meine E-Mail, da diese Website jetzt für Sie ist. Zu guter Letzt werden wir es für die Zeit haben. Also die Wochentage, an denen Ihr Unternehmen öffnet. Sie kennen alle Haltestellen. Also hier werden wir die KI die Feldzeit skizzieren lassen. Natürlich müssen wir hier die Sprechstunde angeben. Ich werde die Sprechstunden machen. Geben Sie an, wann Sie öffnen und wann Sie schließen. Ich übernehme die Öffnungszeiten. Von Montag bis Freitag. Und dann ist es 9:00 Uhr zwei 18:00 Uhr, also die Schließzeiten, normalerweise haben wir sonntags nicht geöffnet. also die Schließzeiten, normalerweise haben wir sonntags nicht geöffnet Sonntags musst du nur in die Kirche gehen oder du kannst dich überall, wo du hinwillst, maskieren gehen Du kannst ausgehen, um zu feiern. Und. Wenn du s bist, hier ist das Ergebnis. Es sieht so aus. So gefällt es mir nicht. Siehst du, dieser Typ hier nimmt fast den ganzen anderen Raum ein. Was wir tun sollten , um das zu lösen. Sie können es auf Ihrer Seite lösen, aber für mich muss ich es nur reduzieren, weil diese E-Mail nicht gültig ist. Es ist nicht nötig, eine lange E-Mail im Postfach zu haben , die das Postfach blockiert Sie können das Problem auch lösen, indem Sie die Telefongröße angeben Es muss eine bestimmte Menge an Speicherplatz nicht überschreiten . Okay. Jetzt sieht es so aus und ich mag es. Ja, das ist in Ordnung. Mm hmm. Das ist cool für mich. Schauen Sie sich übrigens die Hover-Effekte an. Es sieht wunderschön aus Oh, meine Güte. Schauen wir es uns auf dem Mobilgerät an, tut mir leid, auf dem iPad Schau mal. Leute, dieses Design ist erstklassig Seht euch das an. Siehst du? Macht Sinn. In Ordnung. Genug davon. Fahren wir mit der nächsten Vorlesung fort , in der wir das Kontaktformular gestalten würden. Wir sehen uns dann. 68. Layout eines Kontaktformulars: Er ist da. Willkommen zurück im Unterricht. In dieser Vorlesung werden wir mit dem Layout „ Kontaktieren Sie mich“ fortfahren. Gehen Sie schnell zurück zum VS-Code. Gleich nach diesem D. Lass mich dir zeigen, welcher Tauchgang hier drüben ist. Jetzt werden wir einen neuen Abschnitt beginnen. Wir werden einen Entwickler mit dem Klassennamen haben und dann werden wir einen Display-Flex haben. Lassen Sie uns das D für die Zwischenzeit schließen. das nicht, wir müssen die ID dieser D gleich angeben, nach oben schrauben und lassen Sie es mich Ihnen zeigen . Dieser Typ hier. Erinnern Sie sich daran, dass ich Ihnen gesagt habe, wenn Sie auf dieses A-Tag klicken, wollen wir die Schraube zum Abschnitt „Kontaktieren Sie mich“ vereinfachen. Also müssen wir diese ID markieren und kopieren. Kontakt. Und dann füge es hier ein. Gott. Die Flex-Richtung ist Spalte. Bei besonders großen Geräten wollen wir die Rolle biegen. Richten Sie den Inhalt bis zur Mitte aus, der Abstand, 60 Pins, Mging nach oben, zehn Pixeln Geben Sie links und teilweise rechts Pixel ein. Max mit Scrot nach oben und lass es mich dir zeigen. Wir müssen hier die maximale Breite einhalten. Ich denke, wir haben hier die maximale Breite angegeben. Max mit, wo bist du? Hier ist die maximale Breite. Ich muss nur markieren und kopieren. Komm her und füge ein. Mm oder zwei, das ist Marge. Die Polsterung beträgt zehn. Innerhalb des dF werden wir ein df haben, geben Sie ihm den Klassennamen Auf einem kleineren Gerät werden wir es heizen lassen. Mittleres Gerät, wir werden es blockieren lassen. Positionieren Sie dann relativ, W, 50% auf Excel W, 50%. H 550 Pixel. Wir werden es in Excel abrunden lassen. Auf einem mittelgroßen Gerät wird die Breite voll sein. Auf einem großen Gerät wird die Breite ebenfalls 50% betragen. Jetzt sollten wir das Bild spezifizieren. Was ich tun werde, jetzt werden wir den Inline-Stil verwenden. Darin werden wir das Hintergrundbild haben. Geben Sie das Häkchen an. Gewinnen Sie den B-Tick. Ich werde UR Tja machen, eine enge Perinenz öffnen. Ich werde dem Kunden einen Schrägstrich mit sieben Punkten im JPEG-Format geben. Lassen Sie uns beim Speichern sehen, ob das Bild angezeigt wird. Gut. Jetzt haben wir ein Bild wie dieses. Wie Sie sehen können, sind die Ecken alle abgerundet. Gut. Geh zurück. Was wir jetzt tun sollten, ist das Bild zu zentrieren. Wir können die Tail Wind Utility Class verwenden. PG Center und auch PG CV. Kannst du sehen, jetzt sieht es sehr schön aus. Gut. Danach müssen wir auch das Hintergrund-Overlay so erstellen , dass es transparent wird Nun, würde das D es nicht schließen, Code schnell formatieren und das innerhalb des Klassennamens Wir werden es absolut positionieren, so dass es auf dem Steve aufliegt. Jetzt ist dieser Deve relativ positioniert. Wenn wir diesen Kerl absolut positionieren, wird er auf dem Kerl liegen . Ich weiß, dass du das weißt. H f mit großer Steigung nach oben. Dadurch wird der Hintergrund mit Farbverlauf von unten nach oben angezeigt. Dann werden wir es von haben. Jetzt müssen wir die Farbe so angeben, dass sie mit 22, drei, 740 beginnt . Mit derselben Farbe hier. Ich muss diesen Typen nur durch Kopieren und Einfügen hervorheben. Shadow rannte rein. Nun, die Opazität, machen wir 70. Wenn du im Browser siehst. Das hat nicht funktioniert. Warum funktioniert das Zeug nicht? Die Opazität beträgt 70 Jahre , also ist es auch so. Die Sache mit der Schatten-Nova hier ist verrückt. Oh, meine Güte. Schau mal. Absolut. Nein. Was war das? Das ist das Richtige. Hoch voll mit voll, und jetzt wirst du es so haben Wunderschön. In Ordnung, also schau mal. Das ist das letzte D, oder? Wir haben nichts im Tauchgang. Wir haben es nur als Hintergrund-Overlay verwendet. Wir werden also noch einen Tauchgang außerhalb des Tauchgangs machen. Okay? Ich hoffe, du folgst mir. Auch hier werden wir seine absolute Position beibehalten. In Satz Null. Lassen wir es Flex anzeigen. Die Flex-Richtung ist Spalte. Die Lücke, machen wir 20 Pixel draus. Die Elemente sind mittig ausgerichtet. Richten Sie den Inhalt zentriert aus. Der Text wird weiß sein. Der Schatten wird nur aus G bestehen, und das Muster wird sechs sein. W in d, wir werden noch ein d haben. Der Text wird für Excel sein. Ein zusätzliches verzögertes Gerät, der Rand oben. Machen wir 150 Pixel draus. Der obere Rand wird Null sein, voll gerundet. Also wollen wir, dass es hier gesichert ist. Das werden Sie in einem Fernsehgerät sehen. P X 15 Pixel, PY, 15 Pixel. Und der Hintergrund. Bleiben wir bei diesem BG. Lassen Sie uns diesen Hintergrund hier nutzen. Wenn es keinen Sinn macht, werden wir es ersetzen. Okay. Text drinnen, Text wird weiß sein. Lassen Sie uns also das Symbol anzeigen , damit wir sehen, was wir haben. Denken Sie daran, dass wir es in der vorherigen Lektion importiert haben. Ja, wir haben den Import aus der Code-Ressource kopiert und ihn dann hier eingefügt. Ich möchte, dass jeder mitmacht, und deshalb nehme ich mir Zeit, alles zu erklären. Und ich hoffe, du belohnst meine Handarbeit indem du einen wunderbaren Kommentar schreibst Das wird sehr geschätzt werden. Ordnung. Ich habe zu viel geredet. F Ein Kopfhörer. Nahaufnahme mit dem Etikett mit Absenkautomatik. Schauen wir uns jetzt an, was wir haben. Bum. Kannst du sehen, dass es hier erscheint? Keine Sorge, bis wir anfangen, die Dinge unter diesem Typen zu implementieren, wird es ihn schon nach oben treiben. Also gleich nach dieser Entwicklung werden wir eine weitere DVD haben Schriften, halb fett. Texttag, 24 Bilder. Und ich werde Kunst mit dem Leben anfangen. Du kannst etwas anderes tun. Hier ist es. Chatte mit dem Leben. Außerhalb des D werden wir noch ein D haben. Gib dir den Klassennamen. Win, wir werden ein P-Tag haben. Innerhalb des P-Tags müssen wir nur Mist bauen. Lassen Sie uns die Textkopie hervorheben. Fügen Sie es ein. Formatieren Sie den Code schnell. Wenn du speicherst, und hier ist es. Gut. Die Schrift sieht nicht gut aus, mach dir keine Sorgen, das werden wir auf jeden Fall reparieren. Worauf ich Sie aufmerksam machen möchte, ist dieser Typ hier drüben. Manchmal, wenn Sie Ihren Code mit PD formatieren, wird das angezeigt. Ich möchte also nicht, dass du neugierig bist. Lassen Sie uns das P-Tag schnell stilisieren. Nicht viel, außer den Text und den Rest zu spezifizieren. Textzentrum. Rand oben fünf. Schrift. Machen wir 200 apa Schriftstärke draus. Text Excel. Ich glaube nicht, dass das Zeug einen Klassennamen braucht das Zeug einen Klassennamen Jetzt sieht es so aus, und es sieht noch schöner aus Alles rockt perfekt und alles ist cool. Nachdem wir dies getan haben, implementieren wir den folgenden Button. Gleich nach der Abschlussfeier. Wir brauchen hier auch keinen Klassennamen. Hier werden wir Boot fahren und während des Bootfahrens und während des Bootfahrens werde ich weniger Chats führen Und hier ist es. In Ordnung. Lass uns schnell den Anfang machen. Den Hintergrund, wir sollten den BG verwenden, Text markieren, herkommen und abwerfen. Der Text. Rand unten 30 Pixel. Links und rechts zu setzen ist vier. Oben legen und unten tätscheln sind zwei. Hovers mit dem Mauszeiger darüber fahren, sollten wir auch die tatsächliche Farbe des Ich weiß nicht, ob wir es hier oben, innerhalb des C, hinbekommen können . Schauen Sie sich das an. Hier ist es. C P, ersetze es hier. Übergangsfarbe, und wir möchten, dass die Schaltfläche etwas abgerundet ist. Mal sehen, was wir haben. Wenn du sparst. Oh, wunderschön. Schau mal. Sieh dir das an. Sieht gut aus und gefällt mir. Ordnung. Nachdem wir das gemacht haben, werden wir ein rechtes Oberteil auf der rechten Seite dieser Karte haben. Nach diesem D werden wir ein weiteres D haben . Lassen Sie uns ein Display Flex verwenden. Die Flex-Richtung ist Spalte. Lücke. Wir gehen zur Polizei. Es sollten Gap und Group sein. 20 Bilder. Noch einer In der Entwicklung werde ich Kontaktlinsen machen. Außerhalb des D werden wir ein P-Tag haben. Außerdem müssen wir das P-Tag in das D einpacken. Markieren Sie das P-Tag und drücken Sie es dann hinein. Du weißt schon, wie das geht. W im P-Tag, ich werde das rechte Bild hier einfügen, den Kern zurückfordern, zögern Sie nicht, uns zu erreichen und zu kontaktieren. Das müssen wir nicht eintippen. Okay. Jetzt ist es hier rechts von der Ecke. Mir gefällt nicht, wie es aussieht, also müssen wir ihm ein bisschen Stern geben. Lass es uns schnell stilisieren. Ausgehend vom Kontakt. Das D hier, wir werden eine Textzentrale haben, W. 100 Pixel, was der Breite des PG entspricht. Also genau hier für den Hintergrund werde ich PG Red 500 verwenden. Das ist also eigentlich meine Spezifikation, weil ich möchte, dass es auffällt. Lass es mich dir zeigen. Kannst du sehen? Ja. Also, wenn dir die Farbe nicht gefällt, kannst du sie auch an deiner Seite ändern. P Y, der Zeilenabstand. Wir werden es von Fall zu Fall transformieren lassen. Die Schrift d 300, Schrift Sans, der Text 14 Pixel. Der Text ist weiß, und dann ist es rund LG. Speichern Kannst du das sehen? Sieht so gut aus. Danach müssen wir auch das P-Tag stilisieren Für das P-Tag müssen wir das nicht tun. Also geben wir dir den Klassennamen. Text 30 Pixel. Text, diese Farbe hier drüben, Text markieren. Und ein Stück. Und wenn du sparst und boomst. Perfekt. Das ist genau die Erwartung. Ordnung, unser Layout ist fertig und in der nächsten Zeile geht es darum, das Kontaktformular hier drüben zu platzieren. Gleich nach dem Speedtag. Wir werden das Kontaktformular hier haben. Und alles sieht gut aus. Natürlich sieht es gut aus. Das ist wunderschön. Ich bewundere dieses Design immer wieder. Ehrlich gesagt ist das Design erstklassig. Schau es dir an. In Ordnung, genug davon. Wir sehen uns in der nächsten Vorlesung. 69. Kontaktformular: Das Design sieht schon so wunderschön aus. Lassen Sie uns das in dieser Vorlesung also schnell finalisieren. In dieser Vorlesung werden wir im Grunde das Kontaktformular einrichten Wir werden das Namensfeld, die E-Mail-Adresse, die Telefonnummer, den Betreff und das Nachrichtenfeld haben. Lass uns damit weitermachen. Gleich nach diesem DF. Wir werden ein Formular haben. Geben Sie dem Formular einen Klassennamen. Lassen wir es Flex anzeigen, Flex-Richtung ist Spalte. Die Lücke 20 Pixel. Wenn Sie genau hinschauen, werden Sie feststellen , dass wir genau die gleiche Lücke beibehalten haben genau die gleiche Lücke beibehalten Wir vermitteln Ihnen das Konzept und die Prinzipien einer professionellen Website. Sie müssen immer mit Ihrer Schriftart, Ihrer Schriftgröße und all dem, einschließlich Ihrer , konsistent bleiben . Jetzt haben wir ein Div mit dem Klassennamen. Lassen Sie uns die String-Interpolation verwenden. Lass uns einen Display-Flex haben. Auf einem kleineren Gerät ist die Biegerichtung die Spalte, Biegerichtung die Rolle. Auch hier die Lücke, 20 Pixel. Gewinnt die CD, wir werden einen Klassennamen finden. Denken Sie daran, dass wir den Google Hind importiert haben. Ups Wir haben es nicht importiert. Wirklich? Lass uns das schnell machen. Innerhalb der Coderessource können Sie den Import schnell kopieren. Fügen Sie es so ein. In Ordnung. Scrollen Sie nach unten. Wir haben es hier. Wir schließen das Dee. Wo im Deve werden wir ein Imput-Feld haben. Der Typ wird Texte sein. Lass es uns so machen. Lassen Sie uns es zunächst mit dem Soft-Closing-Tag schließen. Ordnung. Name Name. Geben Sie Ihren Namen in die Warteschleife ein, und er wird benötigt. Auf diese Weise kann das Formular sehr schnell validiert werden Wir müssen nicht alle Dinge erledigen. Gib der Klasse den Namen Px, 12 Pixel , die Gliederung Abgerundet, MD, P, Y. Nochmals, 12 Pixel Flex Dash One, Bg Grau 200. Mach das nicht mit. nächste Zeile ist, das Imp-Feld zu markieren und es zu duplizieren. Lassen Sie uns beim Speichern sehen, was wir im Browser haben. Ordnung. Jetzt haben wir es so. Dein Name, dein Name. Es gibt kein Leerzeichen dazwischen. Gehen wir zurück zum Code. Zuerst müssen wir einige der Eigenschaften ändern. Hier werden wir E-Mails schreiben. Und natürlich wird der Put-Typ E-Mail sein. Nochmals, was in dem Platzhalter steht, wir werden Ihre E-Mail bearbeiten Okay, dein Name und deine E-Mail. Aber schauen Sie, wir haben dieses Problem. Es gibt kein Leerzeichen zwischen den Feldern. Lass uns schnell den Code durchgehen. Hier haben wir die Spalte Flex und Flex-Richtung angezeigt. Auf einem kleineren Gerät ist die Flex-Richtung Zeile. Und sieh es dir an. Die Lücke und hier. Ordnung. Gut. Alles cool. Die nächste Endzeile ist hervorzuheben. Lass mich dir von 1932 bis 208 zeigen. Dupliziere es einmal. Also im Browser, hier haben wir es. Lassen Sie uns schnell die Eigenschaften ändern. Der Imputetyp wird Test sein, aber der Name wird Telefonnummer sein Ihre Nummer, und das wird für das Subjekt sein. Ändern Sie den Namen in Betreff. Ordnung. Sieht gut aus. Es gefällt mir. Als Nächstes sollten wir den Textbereich implementieren. Gleich nach diesem D werden wir ein weiteres DF haben, und im Grunde sollten wir hier nur Spaß machen. Ich werde Textbereich machen . Schließe es mit dem selbstschließenden Tag. Wir werden dafür sorgen, dass es erforderlich ist. Die Namensnachricht. Bitte warten Sie. Wir werden deine Nachricht bearbeiten. Geben Sie schnell den Klassennamen an und es wird genau dasselbe sein. High Light, ruf P an, komm her. Paste ist das Gleiche, aber etwas hat sich geändert , nämlich die Höhe. Machen wir 180 Pixel für den Textbereich. Gut. Die Höhe sieht gut aus und ich mag sie. Wir müssen auch die Breite angeben, also machen wir es uns mit voller Länge ansehen. In Ordnung. Alles ergibt Sinn. Lassen Sie uns das Bootfahren schnell umsetzen. Für das Booten, gleich nach diesem DF, werden wir ein weiteres DF haben Wir werden ein Boting machen. Und ich werde uns eine Nachricht schicken. Oder du kannst innerlich etwas Besseres tun. Wenn Sie besseres Englisch sprechen können, können Sie es hier nachlesen. Es ist kein Verbrechen. Jetzt erscheint es hier. Lassen Sie uns den Stil hier für das D entfernen. Stattdessen müssen wir es auf dem Boting machen Beim Hintergrund werden wir genau den Hintergrund beibehalten , den wir verwendet haben Kopieren Sie hier in die Zeilen 176. Geh zurück und füge es hier ein. Die Breite d fällt. Auf kleineren Geräten ist die Breite automatisch. Px 30 Pixel. Py, 12 Pixel. Auf Hover, also denke ich, wir sollten den Hov-Effekt von hier kopieren Hier ist er. Es wird genau dasselbe sein. Kopieren Sie aus den Zeilen 17, sechs, kommen Sie her. Dann einfügen. Die Transaktion wird farbig sein. Die Dauer 300 F, halbwegs. Wir sollten die Textfarbe auf Weiß ändern und dann die Ecken des Botins abrunden lassen des Botins abrunden Lass uns das schnell machen. Ich mache gerundetes G , Text und das ist alles. Gut. Wunderschön. Das ist klassisch. Ordnung. Etwas, das ich dir auch zeigen möchte. Scrolle nach oben. Denken Sie daran, dass wir den Smooth-Scroll in diesem A-Tag implementiert haben. Also, wenn ich klicke und bumme, kannst du es sehen? Perfekt. Schauen wir es uns auf dem Mobilgerät an. Scrollen Sie nach unten. Schau es dir an. Freunde, das ist klassisch. Extrem reaktionsschnell auf unseren Plattformen. Das kann ich Ihnen im Großen und Ganzen sagen. Wenn Sie mit Ihren technischen Augen genau hinschauen, werden Sie feststellen, dass der Raum zwischen dem Kontaktformular und der Fußzeile verschmelzen ist Der Raum hier. Mm hmm. Sogar auf einem großen Gerät. Kannst du sehen, dass es irgendwie leer aussieht. Gehen wir also schnell zum Code zurück. Scrollen Sie jetzt. Hoch. Dies ist der Inhalt einer ID des Kontaktbereichs. Was ich jetzt tun werde, ist und den unteren Rand B anzugeben. Lassen Sie uns den Wert auf minus 150 Pixel reduzieren Wenn du siehst, gut. Machen wir 160 draus. Hoffe, es wird nicht zu nah sein. Ich finde es cool. Mir geht es gut so. Jetzt sind wir mit dem Design fertig. Die nächste letzte Zeile besteht darin, es in eine kontrollierte Impute umzuwandeln , sodass wir alles abrufen können , was der Benutzer in das Eingabefeld Ich weiß, dass du verstehst, wovon ich spreche. Lass uns das in der nächsten Vorlesung machen. 70. Kontrollierte Eingabe (Kontaktformular): Jetzt haben wir ein sehr schön aussehendes Design, aber das Kontaktformular funktioniert nicht. Es wird nicht aktualisiert, wenn Sie etwas in die Eingabefelder eingeben. Damit das Kontaktformular funktioniert, müssen wir es in eine kontrollierte Impute umwandeln Er kennt den VS-Code und scrollt nach oben. Das erste, was wir hier tun werden, ist den veralteten Hook zu importieren Lass es uns auch online machen. Das hat er nicht getan. Wir müssen auch vom serverseitigen Rendern zum clientseitigen Rendern wechseln , da wir jetzt den U-State-Hook verwenden und auf jeden Fall den Klick verwenden werden Also hier werden wir einen E-Client machen. Und jetzt lass uns weitermachen. Lassen Sie uns schnell die notwendige Zustandsvariable für das Imputierte deklarieren für das Imputierte Geben Sie diesen Staat an. Dann machen wir Equa States. Der Anfangszustand wird ein Objekt mit Eigenschaften sein ein Objekt mit Eigenschaften Sie müssen nur eine Co-Klammer innerhalb der State-Funktion öffnen und schließen . Für das erste Feld haben wir Name, E-Mail, Nummer, Betreff und Nachricht. Schnell werden wir den Namen auf eine leere Zeichenfolge setzen. C und dann markieren, viermal duplizieren. Jetzt werden wir das durch E-Mail ersetzen, und das wird die Telefonnummer sein. Diese Fächer. Endlich haben wir die Botschaft. Ordnung. Wunderschön. Bevor wir weitermachen, lassen Sie uns schnell etwas unternehmen. Wir werden eine weitere Zustandsvariable haben. Auf jeden Fall werden wir sie in Zukunft verwenden , also machen wir es hier. Wir nennen es Laden, Set Loading Two. Wir werden es auf Force setzen. So einfach ist das. Lassen Sie mich die Logik erklären. Wenn der Benutzer beginnt, in das Eingabefeld etwas einzugeben, löst diese Aktion ein Datum löst diese Aktion ein Wenn das Datum erreicht ist, müssen wir uns den Test schnappen, der gute Unterricht bietet Wunderschön. Wir werden die Funktion haben, uns um den Wandel kümmern. Behalte Veränderungen bei, gleiche, setze sie auf eine Pfeilfunktion den Parameter dieser Funktion tragen, nehmen wir das Ereignis auf Und hier mache ich const key equ event dot, target Wir müssen es nur hervorheben, duplizieren. Hier werden wir einen Mehrwert haben. Wir werden Ereignisse durchführen, die auf den Punktwert abzielen. Im Grunde versuchen wir, den Test innerhalb des Eingabefeldes zu erfassen , wenn der Benutzer tippt Hier. Nachdem wir dies getan haben, müssen wir den eingestellten Status innerhalb des Parameters aktualisieren . Wir werden ein Objekt haben und darin werden wir den Zustand verteilen, wir werden den Schlüssel aufnehmen. Spaltenwert. So einfach ist das. So, die nächsten zehn Zeilen. Es ist offensichtlich, dass wir keinen Brief im Telefonfeld annehmen wollen . Das einzige, was wir wollen, ist die Nummer. Lassen Sie uns es schnell validieren. Nach dieser Funktion werden wir eine weitere Funktion haben. Cs und Telefon ändern sich. E qua Auf jeden Fall müssen wir die Veranstaltung annehmen und mich dann sofort mein Tempo erhöhen lassen Also werden wir den Kostenwert gleich dem Zielwert haben Kostenwert gleich dem Zielwert haben Jetzt sind wir fertig damit, den Wert zu ermitteln. Die Neton-Zeile soll die regulären Ausdrücke verwenden, um den FD zu validieren Also werde ich hier die Kosten übernehmen. Numerischer Wert, gleicher Wert, Punkt, ersetzen. Innerhalb der Ersetzungsfunktion müssen wir die Operationen hier ausführen Wir werden zwei Schrägstriche haben und innerhalb werden wir die eckige Klammer haben Wir wollen, dass 0-9 einfacher ist als das. Du solltest das alles wissen. Das ist nur ein grundlegendes Zeug aus Java-Skript Stellen Sie Zustände innerhalb der festgelegten Staaten ein, verteilen Sie die staatliche Telefonnummer, weisen Sie ihr einen numerischen Eigenschaftswert zu. So einfach ist das. Gut. Schließlich wollen wir die Fehde aktualisieren, wenn der Nutzer auf das Telefon klickt, um es einzureichen wollen wir die Fehde aktualisieren, wenn der Nutzer auf das Telefon klickt, um es zum Beispiel innerhalb der Fehde getippt Wenn Sie zum Beispiel innerhalb der Fehde getippt haben und auf die Schaltfläche „Senden“ geklickt alles in Ordnung ist, möchten wir die Nachricht löschen . Ich weiß, dass Sie verstehen, wovon ich spreche Lass uns das schnell machen. Cost clastic equa, also innerhalb dieses Objekts werden wir die seta-Funktion aufrufen, um den Status innerhalb der seta-Funktion zu aktualisieren Status innerhalb der Was ich jetzt machen werde, scrolle nach oben. Wir müssen alles von hier aus hervorheben , von den Zeilen 19 bis 23. Kopieren, weil wir es in den Standardzustand zurückversetzen wollen . Dies ist der Standardstatus, nichts dazwischen. Das sind alles leere Zeichenketten. Formatieren Sie den Code für korrekte Einrückungen. Jetzt sind wir mit der Einrichtung der Funktionen und allem, was erforderlich ist, fertig der Funktionen und allem Als Nächstes müssen diese Funktionen angewendet werden. Gehen wir also zur Fehde über. Okay? Das ist das Formular. Was wir jetzt tun sollten, ist die Änderung umzusetzen. Lass es uns gleich hier machen. Im Wandel. Alles was wir tun müssen, ist das Handle Change zu nennen. Die Verantwortung für die Änderung besteht darin, die Fehde zu aktualisieren, wenn der Benutzer beginnt, innerhalb der Impute zu tippen Jetzt müssen wir den Wert auch so einstellen, dass er den Punktnamen angibt. Denken Sie daran, dass dies das Eingabefeld für den Namen ist. Wunderschön. Lassen Sie uns nun diese beiden Codezeilen kopieren, markieren und kopieren, im Eingabefeld für die E-Mail, und fügen sie hier ein Wir müssen den Namen in E-Mail ändern , da dies das E-Mail-Feld ist Für das Telefonfeld müssen wir es also hier einfügen. Natürlich haben wir vorhin kopiert. Hier wird die Telefonnummer des Bundesstaates und so weiter und so fort. Betreff des Bundesstaats. Schließlich ist das für die Nachricht. Lass es uns hier machen. Eine Punktnachricht setzen. ist ganz einfach. Schau es dir im Browser an. Lass uns jetzt sehen. Alles funktioniert. Um sicherzugehen, was wir getan haben, müssen wir den Status in der Konsole protokollieren. Scrollen Sie nach oben. Gleich nach der Handle-Change-Funktion wechseln wir in den Konsolenmodus. Vergessen wir mal, dass die Änderung des Benutzernamens innerhalb des Telefonfeldes aufgerufen werden sollte und nicht die Änderung des Benutzernamens. Gehen wir zurück zum Telefonfeld. Das ist die E-Mail. T. Das ist das Telefonfeld. Wir müssen das Handle Change nicht aufrufen, weil das Handle Change für den Rest des Eingabefeldes gilt und nicht für das Telefonfeld. Ich werde mich um den Telefonwechsel kümmern. Nachdem Sie dies getan haben, schauen wir uns beim Speichern im Browser schnell die Konsole an. Wenn wir nun anfangen, etwas in das Eingabefeld einzugeben, werden Sie die Aktualisierungen und Änderungen auf jeden Fall erleben . Hier geht's zum Namen. Ich werde John machen. Schau dir die Konsole an. Kannst du sehen, wie es aktualisiert wird? Für das E-Mail-Feld werde ich Folgendes tun: Können Sie sich vorstellen, wie das Update durchgeführt wird? Die FM-Fehde funktioniert einwandfrei. Für die Telefonnummer muss ich einfach irgendwas unterstellen , und für den Betreff werde ich Text in der Form Fehde schreiben. Es läuft Schau es dir an. Es funktioniert in der Tat. Ordnung. Lass mich sehen. Alles cool, alles in Ordnung. Was für eine Sekunde müssen wir umsetzen? Das Farmfeld funktioniert und es funktioniert einwandfrei. Das ist vorerst aus und ich hoffe, Ihnen hat dieser Vortrag gefallen. Wir sehen uns in der nächsten Vorlesung. Bleiben Sie konzentriert und listen Sie die Pflege auf. 71. Node Amiler API mit Nextjs13: Hallo zusammen. Willkommen zurück im Unterricht. In diesem Abschnitt des Kurses werden wir mit der Erstellung der API fortfahren . Schnell, was habe ich getan? Lass uns anfangen. Öffnen Sie den VS-Code und tun Sie bitte alles, um den Explorer zu öffnen. Öffnen Sie das SRC, das ist das Quellverzeichnis Jetzt werden wir in der App einen Ordner namens EPI erstellen Für manche Leute haben Sie die EPI möglicherweise bereits erstellt, als wir die nächste GS-Kesselplatte von Grund auf neu generierten die nächste GS-Kesselplatte von Ich habe meins einfach gelöscht , weil ich von vorne anfangen werde Wenn Sie das EPI-Verzeichnis bereits im App-Ordner haben , ist das gut für Sie Wenn Sie es jedoch nicht haben, müssen Sie nur auf den neuen Ordner der App, EPI, klicken neuen Ordner der App, EPI, Innerhalb des API-Verzeichnisses werden wir ein weiteres Verzeichnis erstellen Klicken Sie mit der rechten Maustaste auf Neuer Ordner, und ich nenne ihn Kontakt. Klicken Sie innerhalb des Kontakts mit der rechten Maustaste auf Neue Datei. Auch hier innerhalb des Kontakts. Rechtsklick, Neue Datei. Ich nenne diese Routenpunkte einfach GS. Bevor wir mit der Erstellung der API fortfahren , müssen wir die erforderlichen Pakete installieren Ich werde den Explorer schließen. Common B, um ihn zu schließen. Klicken Sie in das Terminal. Dann gegen C, um den aktuell laufenden Server zu stoppen. Ich werde eine MPM-Installation durchführen. Node, kleiner Raum. Wir brauchen auch den Punkt EMV, also mache ich.env, Es ist die Enter-Taste , um es zu starten. Fertig Die Installation war erfolgreich. Schauen wir es uns an. Öffnen Sie das Paket.jf. Hier ist es. Scrollen wir nach unten. Hier haben wir das EMV Und hier haben wir den Knoten Mailer. Schließ ihn. Schließen wir das Terminal. Oben werden wir die nächste Antwort vom nächsten Schrägstrichspeicher importieren . Nachdem wir das getan haben, müssen wir diese Datei exportieren Exportiert einen Beitrag mit der Sing-Funktion. Es wird eine Post-Anfrage sein, also werden wir die Anfrage innerhalb aufnehmen , und genau hier beginnt das Telefonieren. Lassen Sie uns schnell das EM V importieren. Wir benötigen die Konfiguration do en V dot. Hier werden wir eine Konstante haben. Daten haben das gleiche Gewicht. Fordern Sie Punkt JS an. Wir werden Node Mail Equ machen. Wir müssen auch den Node Mailer benötigen. Node Mel ist erforderlich. Ich habe das nicht gemacht, wir werden einen Tri-Block haben. Innerhalb des Tri-Blocks müssen wir den Transporter erstellen. Ich werde Node Ma Dot machen. Im Node Mela gibt es eine Methode namens Creect Transport, und hier ist die Im Rahmen dieser Methode werden wir einige Eigenschaften berücksichtigen Eigenschaften wie der Pot , der die Topfnummer ist, wird 465 sein. C Dieses Zeug. Ich weiß nicht, störe weiter. Der Host wird in diesem Fall SMTP gmail.com sein, Der Service wird das sein, was ich vermute. Gmail. All das Zeug, wir müssen es einer Variablen zuweisen. Hier mache ich Cs transporter equ, richtig. Also weisen wir einfach alles Himmel zu, hier Code-Transporter Und innerhalb des Node-Mailers akzeptieren wir eine Funktion, erstellen einen Transport Innerhalb der Funktion haben wir dieses Objekt aufgenommen. Und dieses Objekt hier hat die Eigenschaft von Ports und wir weisen ihm den Wert f65 Der Host ist sp und der Dienst ist Gmail. Einfach und kurz. Klar, wann immer wir einen Dreiblock haben, müssen wir auf jeden Fall fangen. Wir werden hier schneiden. Was fangen wir? Wir werden einige Fehler ausschneiden, aber nicht jetzt. Richten wir es einfach für das Gewünschte ein. Genau hier werden wir das Eigentum von übernehmen . Ups, sehen Sie sich das an Man muss es trennen, um ins Koma zu kommen. Wir in der, Wir werden den Nutzer haben, und das wird mein Gmail sein. Bitte tun Sie gut daran, Ihre G-Mail an Ihrer Seite hinzuzufügen. Ja. Ich werde aztec@gmail.com machen. Sie können mir diese Gmail-Adresse mitteilen und sicherstellen, dass Sie sie an Ihrer Seite durch Ihre ersetzen. C, wir haben auch die Pass-Eigenschaft , also das Passwort, Single. Für den Pass müssen wir das Google-App-Passwort generieren. Lass es mich dir schnell zeigen. Öffnen Sie Ihr GML-Konto in der oberen rechten Ecke des Bildschirms, wenn Sie das Profil sehen möchten Klicken Sie hier, um Ihr Google-Konto zu öffnen und anschließend zu verwalten. In der oberen linken Ecke des Bildschirms sehen Sie das Menü. R W klicken Sie im Menü auf Sicherheit. Mist bauen. Vergewissern Sie sich, dass Ihre Bestätigung in zwei Schritten aktiviert ist. Wie Sie sehen können, habe ich meine Alternative. Das bedeutet, dass meine Bestätigung in zwei Schritten aktiviert ist. Zum Öffnen hier klicken. Hier ist es der Akzent für das Passwort. Ich muss mein Passwort angeben und dann hier als Nächstes. Scrollen Sie nach unten. Ganz unten werden Sie die AP-Passwörter sehen. In letzter Zeit habe ich bereits drei A-Passwörter generiert. Zu Unterrichtszwecken muss ich es noch einmal von Grund auf neu machen. Klicken Sie jetzt auf diesen Rechtspfeil. In diesem Feld geben Sie den Namen der App an. In diesem Fall werde ich ein Baba-Portfolio für Unterrichtsarbeiten erstellen. Klicken wir nun auf Erstellen. Hier ist das generierte Passwort. Markieren, Kopieren fertig. Beachten Sie, dass Sie mein App-Passwort nicht kopieren. Einfach, weil ich ihn nach diesem Vortrag definitiv löschen würde. Es wird nichts nützen. Generiert auf Ihrer Seite und kehrt dann zum Code zurück. Fügen Sie ihn innerhalb des Passes hier ein. Achte darauf, die Leerzeichen dazwischen so, so und so zu entfernen . Wunderschön. Nachdem Sie dies getan haben, rufen Sie in der nächsten Zeile die Funktion zum Senden von E-Mails auf. Dafür mache ich Transporter Dot, Send Mail. Wir rufen also einfach die Methode send may auf, die sich im Node-Mailer befindet In dieser Funktion nehmen wir also ein Objekt und innerhalb des Objekts werden wir eine Eigenschaft haben, werden wir eine Eigenschaft haben das heißt, woher die E-Mail kommt In diesem Fall wird es aus dem Impute-Feld kommen. Ja. Also mache ich einen Datenpunktnamen trenne ihn durch ein Komma Das geht auf mein Gmail-Konto. In Ordnung. Ich sende es an mein Gmail-Konto. Und bitte an Ihrer Seite, Sie müssen jedes Vorkommen von My GMIL durch Ihr eigenes Gmail und jedes Vorkommen meines App-Passworts durch Ihr eigenes Passwort ersetzen Ihr eigenes Gmail und jedes Vorkommen meines App-Passworts durch Ihr eigenes Passwort ersetzen Als nächstes haben wir die Themen. Ich werde eine Anfrage aus dem Duba-Portfolio stellen. Durch das Komma getrennt. Ich weiß nicht, warum das immer wieder die Sicht behindert. Der Text hier, verwenden wir einen Tipp wie diesen Hier werden wir eine leere Zeichenfolge verwenden, weil ich nichts darin haben möchte. HTML. Lass uns den Backtick benutzen. Im hinteren Häkchen werden wir die Vorlage entwerfen Die Vorlage für den E-Mail-Posteingang. Ich habe das Design bereits, also müssen wir es nur kopieren und einfügen. Es ist nur ein HTML-CSS , das jeder leicht verstehen kann. Innerhalb der Code-Ressource Punkt MD müssen wir aus dem öffnenden HTM-Tag kopieren , der aus den Zeilen 8722, Zeilen 928 stammt Nochmals, ich kann es mir ansehen. Kopieren. Jetzt müssen wir es in das Ba Ti einfügen. Hier haben wir den Hauptteil, wir haben die Schriftfamilie spezifiziert. Wir haben den Emo-Container. Die maximale Breite beträgt 600 Pixel, wir haben den Rand, die Polsterung, die Hintergrundfarbe ist weiß, und dann ist der Schatten der Box das konsistente Blau, das wir verwendet haben Der Randradius beträgt zehn Pixus, wodurch die Ecken etwas kurvig werden Hier haben wir das P-Tag, die Schriftgröße, die Zeilenhöhe und all die Dinge, die Sie kennen Wir haben das UL- und das LI-Tag. Die Unterschrift und der Rest von ihnen. Jetzt haben wir ein UR-Tag, und das ist übrigens ein P-Tag mit der Aufschrift Duba by digital, das oben im Theme als Header erscheinen wird Hier mit im UR-Tag. Wir haben das LI-Tag und wir haben auch das Strong-Tag, wodurch dieses Etikett dicker und sichtbarer erscheint. Jetzt haben wir den Datenpunktnamen, Datenpunkt-E-Mail, die Telefonnummer, den Betreff und die Nachricht. Dies wird entsprechend Ihren Feldern angezeigt. Also bitte verwechseln Sie hier nichts. Sogar die Schreibweisen, überprüfen Sie es sorgfältig und stellen Sie sicher, dass es gut gemacht ist Wenn Sie dies getan haben, scrollen Sie nach oben. Jetzt weisen wir es einer Konstante zu. Kosteninformationen und Gewicht. Es bedeutet, dass es ein Versprechen zurückgeben wird . Deshalb müssen wir es abwarten. Im Moment ist alles cool. Scrollen Sie nach unten. Hier werden wir prüfen, ob die Nachricht erfolgreich ist oder nicht. Wenn die Nachricht erfolgreich ist, wenn die Info die Nachrichten-ID anzeigt, kehren wir zurück. Als Nächstes antworte Punkt Jason. Jetzt pass auf. Wenn die Fehlereigenschaft auf force gesetzt ist, was bedeutet, dass die Nachricht erfolgreich ist, erhalten wir eine Toast-Nachricht Die Nachricht wurde erfolgreich gesendet. Vielen Dank, dass Sie eine Duba-Bar kontaktiert haben. So einfach ist das. Wie L lassen Sie uns das schnell schriftlich abschreiben. Markieren und kopieren. Komm her und füge ein. Wenn die Fehlereigenschaft auf true gesetzt ist, wird die Toast-Meldung angezeigt, dass etwas schief gelaufen ist Ups, es wurde ein Fehler im E angezeigt . Leute, wir müssen ihn entfernen Im Catch Plug müssen wir auch den Fehler finden Protokoll der Nachteile. Wir müssen den Fehler protokollieren. Markieren Sie dann diese Fehlermeldung und fügen Sie sie hier ein. So einfach ist das. Formatieren Sie jetzt schnell den Code und alles sieht sauber aus. Jetzt sind wir mit der Erstellung der API fertig. In der nächsten Vorlesung werden wir es konsumieren. Wir sehen uns in der nächsten Vorlesung. 72. Fortschrittsleiste: Oder komm zurück zum Unterricht. In der vorherigen Vorlesung haben wir die API erstellt. In dieser Vorlesung werden wir die API nutzen die Kontaktseite schreiben. Öffnen Sie schnell die Kontaktseite. Schreiben Sie innerhalb der Seiten, Kontaktseite, um zu jubeln. Drücken Sie B, um den Explorer zu schließen. Scrollen Sie nach oben. Zuerst müssen wir importieren Wir müssen den Toastcontainer aus React Tfy importieren Wir müssen auch den Toast importieren. Das ist für die Toast-Nachricht. Schließlich werden wir React, Tf Slash, Dist Slash, React Tii CSS importieren Tf Slash, Dist Slash, React Nachdem wir das getan haben, wollen wir die API schnell konsumieren. Jetzt werden wir eine Funktion haben. Lösche das Konsolenprotokoll. Wir werden die Handle-Submit-Funktion haben. Kosten, Bearbeitung, Absenden. F, setze es auf die Pfeilfunktion, innerhalb des Parameters dieser Funktion nehmen wir ein Ereignis, und dann mache ich Event Dot, Prevent de Fd. Schnell werden wir Sliding auf true setzen. Denken Sie daran, dass wir in der vorherigen Vorlesung die Statusvariable „Sliding “ verwendet Wir lassen die Daten einander gleichen, setzen sie auf ein leeres Objekt und innerhalb verteilen wir den Zustand Natürlich wissen Sie, was das alles bedeutet. Hier ist es. Es enthält den Namen und die Telefonnummer, den Betreff der Nachricht. Genau hier werden wir auf die API treffen. Wenn ich nun das doppelte Anführungszeichen nehme , mache ich Slash-API Lassen Sie mich Ihnen zeigen, dass wir versuchen, dieses Verzeichnis EPI und den Verzeichniskontakt zu erreichen dieses Verzeichnis EPI und den Verzeichniskontakt Das ist die Route, die wir versuchen zu erreichen. Slash-Kontakt. Wir werden hier ein Komma haben und dann Klammern öffnen und schließen Darin werden wir eine Eigenschaftsmethode verwenden. Die Methode wird natürlich Beiträge, eine weitere Eigenschaft, Header sein , und hier werden wir den Inhaltstyp implementieren Schrägstrich der Anwendung, Schrägstrich im J-Text. Wir versuchen, die Art von Test zu konfigurieren , die wir erhalten möchten Für den Inhaltstyp Inhaltstyp. Es wird Anwendung, Schrägstrich, Sünde sein. Wir versuchen, das Zeug im Jin-Format zu bekommen. Am einfachsten ist das. Direkt im Körper. Körper. Wir werden JS Dot String machen. Wir wollen die Daten im Jin-Format in eine Zeichenfolge konvertieren. Schau dir den Körper an, der einen Pfeil zeigt, einfach weil wir ihn hier durch ein Komma trennen müssen Wir nehmen die Zehn. Das wird auf einmal sein. Also die Antwort Drinnen werden wir die Ladung in Kraft setzen. Kosten-Nutzen-Verhältnis, Gewicht. Dann mache ich Pausen. Wenn die Antwort keinen Fehler zurückgibt, werden wir die Felder löschen und dann eine SX-Nachricht senden. Andernfalls müssen wir auch das F und dann eine Fehlermeldung eingeben. Verstanden. Lass es uns jetzt in die Praxis Wenn es sich nicht um einen Antwortfehler handelt, müssen wir den Status natürlich löschen, indem wir die Cleste-Funktion aufrufen Danach erhalten wir eine Toast-Nachricht. Das wird eine Antwortnachricht sein. Wenn es einen Fehler gibt, lohnt sich der Vorgang. Wir müssen auch den Status löschen und dann müssen wir auf die Fehlermeldung hinweisen Etwas ist schief gelaufen. Hier werden wir den Fehler richtig abfangen. Wir sind der Fangblock. Wir werden einen Fehler machen. Das Gerät wird geladen. Wir werden den Ladevorgang auf Herbst einstellen. Wir müssen auch den Staat löschen. Kopiere genau diese Toast-Nachricht, markiere Kopieren, komm her und füge Nachdem Sie dies getan haben, ist es jetzt an der Zeit, es auszuprobieren. Genau hier werden wir den Toastcontainer rendern. Es wird also oben rechts erscheinen. Ordnung. Nachdem wir das getan haben, die nächste letzte Zeile darin, den Submit zu implementieren. Scrollen Sie im Formular nach unten. Hier werde ich einreichen, wir nennen das Handle Submit. So einfach ist das. Ich möchte Sie darauf aufmerksam machen, dass ich es Ihnen zeigen möchte. Sie können sehen, dass dies das E-Mail-Feld und das ist das Telefonfeld. Jetzt müssen wir innerhalb des Betreffs fd den Typ durch Text ersetzen. Nachdem wir das getan haben, wird alles gut funktionieren. Im Terminal werde ich PM Run Dev machen. Starten Sie die Anwendung auf Ihrer Seite. Gehen wir zurück zum Browser. Scrollen Sie nach unten. Hier, ich mache Peter. Lass uns Peter bei G machen. Lass uns eine Zufallszahl verkaufen. Lassen Sie mich die Stander-API sagen. Ich werde also alles an diesem Ort hervorheben, indem ich es kopiere und einfüge Klicken Sie auf die Schaltfläche „Gesendet“. Schau es dir an. In der oberen rechten Ecke des Bildschirms wird die Meldung „Nachricht erfolgreich gesendet“ angezeigt. Vielen Dank, dass Sie eine Duba-Bar kontaktiert haben. Ich freue mich so darüber. Gehen wir zurück zu Gmail. Und hier ist es. Zum Öffnen hier klicken. Kannst du das sehen? Perfekt. Leute. Der Name ist Peter. Peter auf gm.com, das ist die E-Mail, die Telefonnummer, der Betreff, und hier ist die Nachricht Rufen Sie das P-Tag in der API ab. Hier ist es. Lass es mich dir zeigen. Geh zurück zur Route und dann ist das das P-Tag. Hier versuchen wir, die Daten anzuzeigen. So einfach ist das Wir haben den Namen, den Namen. Das ist das Namensschild. Und wir haben es Peter, das ist dieser Typ, den wir zwischen dem LI-Tag gerendert haben. Wir haben die E-Mail, das ist dieses E-Mail-Etikett, und dann haben wir den Datenpunkt E-Mail , den wir innerhalb des inneren HTML-Codes des LI-Tags gerendert haben, und hier ist die E-Mail. Und so weiter und so fort. Freunde, alles funktioniert wie erwartet. 73. Call-to-Action-Button-Implementierung und Logik: Ordnung, wir sind also mit dem Design fertig und alles funktioniert wie erwartet einwandfrei. Super fein, super fantastisch. Ich liebe jedes Detail des Designs. Im Grunde werden wir in dieser Vorlesung den Kern von Action Boarding umsetzen. Die Idee ist einfach. Wenn der Benutzer in der Anwendung nach unten scrollt, wird der Y-Offset der Seite größer als Null sein. Wenn der Seitenversatz dann größer als Null ist, müssen wir die Schaltfläche „Auto to Action“ auf der rechten Seite des Bildschirms anzeigen . Wenn der Benutzer auf die Schaltfläche C zur Aktion klickt, scrollt die Anwendung problemlos zur Home-Komponente. Am einfachsten ist es, auf VS-Code umzusteigen, sofern es nicht schnell implementiert wird. VS-Code. Öffnen Sie schnell die Komponente. Hier ist das Verzeichnis „Car to Action“. Wir haben es in den ersten Vorlesungen erstellt. Wenn Sie dieses Verzeichnis nicht haben, müssen Sie nur mit der rechten Maustaste auf Komponenten und neuen Ordner klicken und es dann „Aktion“ nennen, genau so. Wunderschön. Im Auto zur Aktion, Rechtsklick, neue Datei. Call to Action S. Generieren Sie schnell die funktionale Komponente. Wir werden den U-State-Hook-Use-Effekt importieren. Nachdem wir das getan haben, kehren wir schnell zur Header-Komponente zurück und kopieren dann die Handle-Scroll-Funktion. Header-Header gs. Wir müssen auch die State-Variable für das Scroll-Ereignis kopieren . Wir müssen die Zeilen 11 bis 24 hervorheben . Kopieren Sie, kehren Sie zur Aktion C und fügen Sie es dann hier ein. Genau hier überprüfen wir, ob Fensterpunktseite Y des Satzes größer als Null ist. Wenn die Fensterpunktseite I des Satzes größer als Null ist, dann werden wir diesen Typen auf wahr aktualisieren, und wenn dieser Typ wahr ist, müssen wir etwas tun. Jetzt machen wir, wenn s crow auf true gesetzt ist, dann geben wir eine Benutzeroberfläche zurück W in der Klammer, wir werden ein D haben und dir den Klassennamen geben Die Hintergrundfarbe wird Rot 500 sein. Das ist nur meine Spezifikation. Du kannst an deiner Seite etwas anderes tun. Wir wollen, dass es repariert wird. Der Tiefpunkt wird acht sein. Von rechts wollen wir es auch acht haben. Lass uns schnell den Explorer schließen. Lassen Sie uns das klarstellen. Der Z-Index, damit er oben in unserem Inhalt erscheinen kann . Lass es uns passen. Schließe das D. Was wir jetzt tun müssen, ist das SVG zu kopieren und in das D einzufügen jetzt tun müssen, ist das SVG zu kopieren und in das . Gehe zurück zur Code-Ressource Punkt MD. Scrollen Sie nach unten. Ich glaube, wir haben es hier. Hier ist es. Kopiere das SVG. Markieren Sie „Kopie“. Gewinnen Sie den D Paste. S. Wir werden nichts haben. Schnell auf den Code formatieren. Lassen Sie uns beim Speichern sehen, was wir im Browser haben . In Ordnung. Wir müssen es mit der Seite rendern, das ist die Bezahlseite und hier ist sie. Scrollen Sie nach unten. Ich denke, wir sollten es gleich nach dem Testimonial machen Hier werde ich zum Handeln aufrufen. Stellen Sie sicher, dass Sie es oben importieren, und hier ist es. Speichern Sie im Browser. Wenn ich jetzt durch die Anwendung scrolle, hier ist sie. Können Sie in der oberen rechten Ecke des Bildschirms sehen, dass Sie die Call-to-Action-Portierung sehen werden. Aber wenn du darauf klickst, passiert nichts. Lassen Sie uns den Klick schnell implementieren. Aufruf zum Handeln. Drücken Sie nach oben, genau dort, wo D ist. Wir werden den Klick haben, und wenn ein Benutzer auf diesen Botin klickt, wollen wir glatt zur Home-Komponente scrollen Also mache ich Window Dot, Scroll 200. Das weißt du, lass es mich dir hier zeigen. Wenn dieser Wert größer als Null ist, wird der ursprüngliche Status auf „Wahr“ aktualisiert. Wenn der Anfangsstatus wahr ist, erscheint dieser Code hier auf der rechten Seite des Bildschirms mit dem Booten Die Idee ist nun folgende. Lass es mich dir zeigen. Wenn ich durch die Anwendung scrolle, erscheint dieser Typ hier. Auf der Y-Achse ist die Anwendung jetzt größer als Null. Aber wenn wir auf dieses Botin klicken, wollen wir die Anwendung auf der Y-Achse gleich Null machen Wir wollen es auf Null zurücksetzen. Genau das tun wir hier. Anfänglich haben wir das so gemacht, wenn dieser Typ größer als Null ist, dieser Typ auf wahr gesetzt wird, und dann wird das angezeigt. Wenn das jetzt erscheint, bedeutet das, dass es größer als Null ist. Wenn wir auf dieses DF klicken, möchten wir es auch wieder an die normale Position bringen. Ich glaube, so weit kann ich das erklären. Also ja, wenn Sie die Anwendung speichern, schauen Sie sich jetzt den Browser an, klicken Sie auf das Botin und die Bombe Kannst du das sehen? Egal, wo Sie sich in der Anwendung befinden, wenn Sie auf diese Schaltfläche klicken, wird die Anwendung immer auf der Y-Achse auf Null zurückgesetzt Was bedeutet, dass Sie immer nach Hause zurückkehren werden. Ich denke, diese Erklärung ist klar genug, ehrlich. Ich lasse mich die Animation für Sie implementieren. Fahr gleich wieder zurück auf der Steve. Ich werde Animate machen. Wir werden Bound machen. So einfach ist das. Schauen Sie sich das jetzt an. Die Call-to-Action-Schaltfläche springt fröhlich am rechten Ende des Bildschirms, wenn Sie durch die Anwendung scrollen Ich mag es. Eine andere Sache, die ich tun möchte, ist, das Symbol zu einem kleinen Aufkleber zu machen. Also können wir es hier machen. Statt 1,5 können wir auch fünf machen. Jetzt erscheint es breit und sieht gut aus. Das ist also genau die Absicht. 74. 49 Ladeleiste: Er, also wir haben das Formular implementiert. Außerdem haben wir die API getestet. Alles funktioniert wie erwartet einwandfrei. In diesem kurzen Vortrag werden wir das Formular interaktiver gestalten, werden wir das Formular interaktiver gestalten sodass, wenn der Benutzer auf das Senboart klickt, die Ladeleiste erscheint, die einen Einblick gibt, dass hinter einer Szene etwas passiert Der Benutzer muss warten, um das Ergebnis zu sehen . Klingt gut, oder? Musste auf Vs-Code zurückgreifen, sofern er nicht schnell implementiert wurde. Scrollen Sie nach unten, wo wir das Formular haben. Und hier ist es. Wir müssen auch nach unten scrollen. Lassen Sie uns es gleich hier zusätzlich zu diesem Botin implementieren. Wir werden den Fortschrittsbalken auf der Grundlage einer Bedingung implementieren , und die Bedingung ist einseitig der Benutzer nach dem Ausfüllen des Formulars Wenn der Benutzer nach dem Ausfüllen des Formulars auf die Schaltfläche Senden klickt, erscheint die Ladeleiste Es wird auf der Basis von Truc erstellt, und das ist ziemlich einfach zu implementieren Jetzt werden wir es tun. I wird geladen , und n, dann zeigen wir die Ladeleiste. Wir werden kein L haben also werden wir ein D haben, geben ihm einen Klassennamen. Wir im D, der untere Rand ist drei. Den Text, richten wir ihn zentriert aus. ML, ich spreche nicht von ML in Bezug auf Mercedes, sondern von Margin Left. W6h6. Geben wir ihm die Grenze Und die Randfarbe Grenze, blau 500. Machen wir 600 draus. Die Grenze wird solide sein. Und dann machen wir Animate, Dash, Spain. Schließt den Entwickler. Okay, schau es dir im Browser an. Laden Sie, füllen Sie schnell das Formular aus. Klicken wir jetzt auf Sand. Ups. Schau es dir an Kannst du sehen, und die Nachricht ist erfolgreich. Mir gefällt die Form der Ladestange nicht. Was wir jetzt tun werden, ist abgerundet. Lass es uns haben. Füllen Sie erneut das FD aus. Hier auf gesendet, und schauen Sie mal. Kannst du sehen, und hier haben wir die Post-Nachricht. Alles funktioniert wie erwartet einwandfrei. Lass uns nach Hause zurückkehren. Wirf einen Blick darauf. Tommy. Sieht es nicht gut aus? Natürlich tut es das. In Ordnung. Eine letzte Sache, die wir umsetzen müssen, ist der Call to Action Butting Lassen Sie mich Ihnen zeigen, wenn ich in der Anwendung so nach unten scrolle, erscheint am rechten Bildschirmrand die Schaltfläche mit dem Aufruf zum Handeln erscheint am rechten Bildschirmrand die Schaltfläche mit dem Und wenn ich auf die Schaltfläche mit dem Aufruf zum Handeln klicke, wird das Scrollen problemlos zur Home-Komponente Wie auch immer Sie sich befinden, wenn Sie zum Beispiel hier unten sind, es wird am rechten Bildschirmrand erscheinen Wenn Sie klicken, können Sie problemlos zur Home-Komponente scrollen. Okay, lassen Sie uns das abrunden, indem das Core-to-Action-Boarding implementieren. 75. Header Fixes (Zuweisung): Hallo zusammen. Willkommen zurück im Unterricht. In dieser kurzen Vorlesung werden wir das Verhalten von Headern auf Mobilgeräten und auch beim Öffnen einer anderen Seite korrigieren Headern auf Mobilgeräten . Lass es mich dir schnell zeigen. Wenn wir auf Mobilgeräten auf diese Weise nach oben scrollen, wird die Kopfzeile immer noch oben angezeigt. Das gefällt uns nicht, weil wir die Navigation bereits hier haben, sodass dieser Bereich hier nicht angezeigt werden muss. Das Menü ist bereits da, es wird also nicht all dieser Platz benötigt . Wir müssen es ausziehen. Das ist Verhalten Nummer eins, das korrigiert werden muss. Wenn Sie beispielsweise die Anwendung verteilt haben, gehen wir zum Abschnitt Higher ME über. Zum Öffnen hier klicken. Wenn Sie jetzt auf das Menü klicken, ist die Höhe der Diagonalzeichnung nicht mehr voll Außerdem werden Sie feststellen, dass das Menü tatsächlich ein wenig heruntergefallen Das wollen wir nicht. Okay? Das erste, was wir hier tun werden, ist das Verhalten auf dem Mobilgerät zu korrigieren. Lass es mich dir zeigen. Kannst du sehen? Schau es dir an. Sieht überhaupt nicht nett aus. Sie kehren also zum VS-Code zurück und öffnen die Komponente. Header-Header-Punkt s. Scrollen Sie nach unten und lassen Sie mich es Ihnen zeigen. Genau hier haben wir eine E-Bedingung. Wir sagten, ich habe gescrollt ist auf true gesetzt, was bedeutet, dass die Anwendung auf Y-Achse größer als Null ist Wenn Sie in der Anwendung blättern, weisen wir ihr einen Klassennamen head zu, andernfalls wird kein Klassenname zugewiesen Genau hier, und wir stilisieren es auch auf eine andere Art Wir sagten, wenn die Scrode auf true gesetzt ist, wird die Hintergrundfarbe weiß sein, und andernfalls wird sie hier transparent sein Wenn es wahr ist, geben wir ihm außerdem diesen Boxschatten Ich denke nicht, dass das hier notwendig ist. Hinterlassen Sie einen Kommentar dazu. Speichern Sie das Projekt. Schau es dir im Browser an. Kannst du sehen? Auf dem Mobilgerät funktioniert alles einwandfrei. Und jetzt wirft es ein weiteres Problem auf. Wenn Sie die Anwendung auf einem großen Gerät maximieren, scrollen Sie nach oben. Können Sie das sehen? Jetzt haben wir diesen durchsichtigen Rudelplatz nicht mehr. Und das ist nicht nett , weil es diese Menüs irgendwie seltsam erscheinen lässt diese Menüs irgendwie . Kannst du das sehen? Es macht keinen Sinn, also müssen wir es Packung packen, wenn man die Anwendung auf einem großen Gerät scrollt? Gehen Sie schnell zurück zum VS-Code. Unter dieser Bedingung werden wir, wenn scroll auf true gesetzt ist, den Kopf an Land stilisieren Hier, also schnell zurück zum globalen CSS. Hier ist es. Zum Öffnen anklicken. Scrollen Sie nach unten. Jetzt müssen wir einen bestimmten Breakpoint anvisieren. Klammern öffnen und schließen, Mittelwert des Strichs w an einem Bruchpunkt von 12 80 Wir werden die Header-Show stilisieren, Headshow. Beachten Sie, dass die Show auf Vergaser läuft, und übrigens, wir müssen hier den Punkt verwenden Hier wird die Hintergrundfarbe weiß sein. Der Schatten der Box. Lass uns aus dem Header kopieren. Es wird genau den gleichen Box-Schatten hier haben. Fügen Sie es also ein, wenn Sie das Projekt im Browser speichern. Es gibt diese. Kannst du sehen, dass es funktioniert? Ich mag es. Das ist wunderschön. Schau es dir an. Jetzt wirst du auf Mobilgeräten ein sehr schönes Verhalten haben. Kannst du es sehen? Schau es dir an. In Ordnung. Ich muss den Kerl auf 75 reduzieren. Ein wunderschöner. Okay, gut. Die nächste letzte Zeile besteht darin, dieses Verhalten hier zu korrigieren. Die Diagnozeichnung auf einer anderen Seite. Kannst du sehen? Diese Dinge sind nicht nett, also gehen wir schnell zurück zum Diagno-Draw-Punkt Schließen Sie das globale CSS, schließen Sie den Header und dann müssen wir die diagonale Zeichnung öffnen Es ist eigentlich sehr einfach. Lass es mich dir hier zeigen. Ich weiß nicht, wo wir diese Krankheit haben. Oh, Junge. W in der Kopfzeile. Wir haben hier eine Bedingung. Wir sagten, wenn der Pfadname ein Quo ist, ist das hier drüben, was bedeutet, wenn der Benutzer auf diesen Pfadnamen klickt, haben wir ihn von oben auf Null zugewiesen. Also, wir haben ihm von oben eine Größe von -98 Pixeln zugewiesen, und deshalb siehst du dieses Verhalten. Schau es dir an Dieser leere Bereich hier unten ist -98 Pixel groß. Das ist der Grund, warum das Menü den Bildschirm nicht verdeckt Wenn wir diesen Wert entfernen, diesen negativen Wert, machen wir ihn einfach zu Null. Wenn Sie das Projekt speichern, verdeckt es jetzt den Bildschirm, aber wir haben oben ein weiteres Leerzeichen. Keine Sorge, wir müssen es auf jeden Fall sofort reparieren. Gehen Sie jetzt zurück zum VS-Code. Öffne die diagonale Zeichnung Cs. Bei der diagonalen Ziehung werden wir das Beste machen. Machen wir es auf Null, einfach so. Wenn Sie das Projekt speichern. Nun zum diagonalen Zeichnen Alles funktioniert wie erwartet einwandfrei. Aber für das Menü ist es auch genau das gleiche Problem, das wir gerade behoben haben. Gehen Sie zurück zum VS-Code, innerhalb des diagonalen Zeichenpunkts S. Wir müssen nach der Stelle suchen, an der wir die Bedingung haben. Ich denke, es sollte hier oben sein. Ja. Ja, es ist ganz oben. Kannst du sehen, ob der Pfadname gleich ist, dieser Typ. Jetzt oben hier, wir setzen es auf Null und sonst setzen wir es auf 100 Pixel. Es wäre super toll, wenn wir es auf Null setzen würden. Wenn der Benutzer also auf das Menü klickt, wird es von oben bei Null angezeigt. Und sonst wird es auch von oben Null erscheinen. Kannst du sehen? Es läuft. Perfekt. Gehen wir also zurück nach Hause. Wir müssen es testen. Okay. Lass uns auf diesen Typen klicken. Schau mal, es funktioniert. Dann funktioniert es gut, Pavel. Auf einem mobilen Gerät funktioniert es auch auf dem iPad Mini Es funktioniert. Das ist super sauber, super toll. In Ordnung, wir sind fertig mit dem Kopf. Und jetzt haben wir das erwartete Verhalten. Gut. In der nächsten Vorlesung werden wir die Karte auf dem Mobilgerät korrigieren. Lass es mich dir auf einem Mobilgerät zeigen. Kannst du sehen? Der Text unten auf der Karte ist verschwunden. Genau das werden wir in der nächsten Vorlesung beheben. Es ist eigentlich eine sehr schnelle Lösung. Wir sehen uns dann. 76. Slider Fix auf Mobilgeräten: Willkommen zurück im Unterricht. In dieser Vorlesung werden wir das Verhalten der Karte auf Mobilgeräten korrigieren . Danach werden wir die Telefone korrigieren. Da wir ein mobiles Gerät sind, werden Sie das P-Tag nicht mehr sehen. Siehst du? Also wollen wir es nicht so haben. Gehen Sie zurück zum VS-Code, öffnen Sie die Komponenten innerhalb der Komponenten, öffnen Sie die Slider-Karte und dann die Slider-Karte zu S. Scrollen Sie hier zum oberen R, wo wir dieses D haben. Stellen wir die Höhe auf 280 Pixel ein. Wenn Sie im Browser speichern, sind dies die. Alles funktioniert einwandfrei. Jetzt haben wir das Verhalten auf dem Mobilgerät korrigiert. Okay. Gehen wir schnell zurück zu dem Punkt, wo wir das P-Tag haben, das ist der Titel hier drüben. Was wir tun sollten. Lassen Sie mich Ihnen zeigen, dass wir Schrift machen sollen, aber pypografisch gesehen haben wir einen Fehler gemacht und wir haben es vorne gemacht. Das ist also die Schrift Wenn Sie den Browser jetzt speichern , sieht er so aus. Kannst du sehen, dass es nicht zu bot ist. Das ist der Standard. Das gefällt mir. Nochmals, nimm es aus dem Mobilgerät. Alles ist gut aufeinander abgestimmt. Schau es dir an. Ordnung. Also, was das Testimonial auf dem Mobilgerät angeht, möchte ich nicht, dass sie erscheinen Das ist übrigens meine Meinung, also kannst du es auf deiner Seite machen , wie du willst Also was mich betrifft, werde ich das Testimonial einfach auf dem Mobilgerät entfernen Die Art und Weise, wie wir das tun können, ist eigentlich sehr einfach. Okay, Testimonials. In diesem Fenster werde ich heizen, aber auf Wir werden einen Displayblock haben. Wenn Sie speichern, schauen Sie es sich an. Jetzt haben wir es auf einem größeren Gerät. Aber je mehr Gerät, es wird verschwinden. Alles cool hier. Alles klar. Sieht nett aus. Schauen wir es uns auf dem iPad an. Wir haben es auf dem iPad. Auf dem iPad A. Die Hälfte der Sache sieht gut aus. Ups. Ich denke, wir sollten okay sein. Ordnung. Schau mal. Dies ist professionell und fachmännisch so konzipiert, dass es auf allen Geräten funktioniert Unglaublich. Das ist jetzt aus. Lesen und überprüfen Sie unbedingt die Ergebnisse. Auf Wiedersehen und ganzheitliche Pflege.