Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Viele moderne Webdesigns erfordern eine responsive Fußzeile, die auf allen Geräten gut aussieht und einwandfrei funktioniert. Eine responsive Fußzeile passt ihr Layout und ihren Inhalt automatisch an die Bildschirmgröße des Geräts an, auf dem sie angezeigt wird.

Erfahren Sie, wie Sie mit dem Modul simple-react-footer eine responsive Fußzeile in React.js erstellen.

Das simple-react-footer-Modul ist eine leichtgewichtige und benutzerfreundliche Bibliothek, mit der Sie eine responsive Fußzeile in React.js erstellen können. Es bietet eine Reihe von Requisiten, mit denen Sie das Erscheinungsbild und die Funktionalität Ihrer Fußzeile anpassen können.

Bevor wir uns mit dem Erstellen einer Fußzeile mit dem simple-react-footer-Modul befassen, werfen wir einen kurzen Blick auf einige der wichtigsten Funktionen:

  • Anpassbares Layout: Mit dem Simple-React-Footer-Modul können Sie die Anzahl der Spalten in Ihrer Fußzeile sowie den Inhalt jeder Spalte definieren.
    instagram viewer
  • Sich anpassendes Design: Die Fußzeile passt ihr Layout automatisch an die Bildschirmgröße des Geräts an, auf dem sie angezeigt wird.
  • Anpassbares Aussehen: Das Simple-React-Footer-Modul bietet eine Reihe von Requisiten, mit denen Sie das Erscheinungsbild Ihrer Fußzeile anpassen können, z. B. Hintergrundfarbe, Schriftfarbe und Symbolfarbe.

Nachdem Sie nun ein grundlegendes Verständnis des simple-react-footer-Moduls haben, sehen wir uns an, wie Sie es verwenden können, um eine Fußzeile in React.js zu erstellen.

Beginnen Sie mit Erstellen einer einfachen React-App. Sie können dann das Modul simple-react-footer verwenden, um eine Fußzeile zu erstellen, wie in diesem Beispiel:

importieren Reagieren aus'reagieren';
importieren SimpleReactFooter aus'simple-react-footer';
konst Fußzeile = () => {
// Definieren Sie die Daten für die Fußzeile
konst Beschreibung = „Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
konst Titel = „Lorem Ipsum“;


konst Spalten = [{
 Titel: "Spalte 1",
 Ressourcen: [{
 Name: "Gegenstand 1",
 Verknüpfung: "/Gegenstand 1"
 },{
 Name: "Artikel 2",
 Verknüpfung: "/item2"
 },{
 Name: "Artikel 3",
 Verknüpfung: "/item3"
 },{
 Name: "Artikel 4",
 Verknüpfung: "/item4"
 }]
 },{
 Titel: "Spalte 2",
 Ressourcen: [{
 Name: "Artikel 5",
 Verknüpfung: "/item5"
 },{
 Name: "Artikel 6",
 Verknüpfung: "/item6"
 }]
 },{
 Titel: "Spalte 3",
 Ressourcen: [{
 Name: "Punkt 7",
 Verknüpfung: "/item7"
 },{
 Name: "Artikel 8",
 Verknüpfung: "/item8"
 }]
 }];


zurückkehren<SimpleReactFooter
 Beschreibung={Beschreibung}
 Titel={Titel}
 Spalten={Spalten}
 />;
}
ExportStandard Fusszeile;

Dieser Code erstellt eine Fußzeile, die so aussieht:

Dieses Beispiel importiert die SimpleReactFooter-Komponente und definiert eine funktionale Komponente namens Footer. Innerhalb der Footer-Komponente verwendet es die SimpleReactFooter-Komponente und übergibt ihr drei Requisiten: Titel, Beschreibung und Spalten.

Das Modul zeigt die Titelstütze oben in der Fußzeile an. Darunter zeigt es die Titelstütze. Schließlich ist die Stütze Columns ein Array von Objekten, die den Inhalt der Spalten in der Fußzeile definieren.

Anpassen von Komponenten mit verschiedenen Requisiten

Neben Titel- und Beschreibungs-Props bietet das Simple-React-Footer-Modul mehrere Requisiten, die Sie an die Komponente übergeben können. Sie können diese verwenden, um das Aussehen und die Funktionalität Ihrer Fußzeile anzupassen.

Hier ist eine Liste aller Requisiten, die im simple-react-footer-Modul verfügbar sind:

  • Titel: Der Titel der Fußzeile.
  • Beschreibung: Eine kurze Beschreibung der Fußzeile.
  • Säulen: Ein Array von Objekten, das den Inhalt der Spalten in der Fußzeile definiert. Jedes Objekt sollte eine Titeleigenschaft haben, die den Titel der Spalte angibt, und eine Ressourceneigenschaft, die ein Array von Objekten ist, die jeweils eine Ressource in der Spalte darstellen. Jedes Ressourcenobjekt sollte eine Namenseigenschaft haben, die den Namen der Ressource angibt, und eine Linkeigenschaft, die den Link zu der Ressource angibt.
  • verlinkt: Das LinkedIn-Handle des Unternehmens oder der Organisation.
  • Facebook: Das Facebook-Handle des Unternehmens oder der Organisation.
  • zwitschern: Das Twitter-Handle des Unternehmens oder der Organisation.
  • instagram: Das Instagram-Handle des Unternehmens oder der Organisation.
  • Youtube: Das YouTube-Handle des Unternehmens oder der Organisation.
  • Pinterest: Das Pinterest-Handle des Unternehmens oder der Organisation.
  • Urheberrechte ©: Der Copyright-Text für die Fußzeile.
  • Symbolfarbe: Die Farbe der Social-Media-Symbole in der Fußzeile.
  • Hintergrundfarbe: Die Hintergrundfarbe der Fußzeile.
  • Schriftfarbe: Die Schriftfarbe der Fußzeile.
  • UrheberrechtFarbe: Die Schriftfarbe des Copyright-Textes in der Fußzeile.

Hier ist ein Beispiel dafür, wie Sie alle im simple-react-footer-Modul verfügbaren Requisiten verwenden können, um eine benutzerdefinierte Fußzeile in React.js zu erstellen:

importieren Reagieren aus'reagieren';
importieren SimpleReactFooter aus'simple-react-footer';
konst Fußzeile = () => {
// Definieren Sie die Daten für die Fußzeile
konst Beschreibung = „Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
konst Titel = „Lorem Ipsum“;


konst Spalten = [{
 Titel: "Spalte 1",
 Ressourcen: [{
 Name: "Gegenstand 1",
 Verknüpfung: "/Gegenstand 1"
 },{
 Name: "Artikel 2",
 Verknüpfung: "/item2"
 },{
 Name: "Artikel 3",
 Verknüpfung: "/item3"
 },{
 Name: "Artikel 4",
 Verknüpfung: "/item4"
 }]
 },{
 Titel: "Spalte 2",
 Ressourcen: [{
 Name: "Artikel 5",
 Verknüpfung: "/item5"
 },{
 Name: "Artikel 6",
 Verknüpfung: "/item6"
 }]
 },{
 Titel: "Spalte 3",
 Ressourcen: [{
 Name: "Punkt 7",
 Verknüpfung: "/item7"
 },{
 Name: "Artikel 8",
 Verknüpfung: "/item8"
 }]
 }];


zurückkehren<SimpleReactFooter
 Beschreibung={Beschreibung}
 Titel={Titel}
 Spalten={Spalten}
 linkedin="lorem_ipsum_on_linkedin"
 facebook="lorem_ipsum_on_fb"
 twitter="lorem_ipsum_on_twitter"
 instagram="lorem_ipsum_live"
 youtube="UCFt6TSF464J8K82xeA?"
 pinterest="lorem_ipsum_collections"
 Urheberrecht ="Schwarz"
 Symbolfarbe="Schwarz"
 Hintergrundfarbe="hellgrau"
 Schriftfarbe="Schwarz"
 copyrightColor="dunkelgrau"
 />;
}
ExportStandard Fusszeile;

Dieses Beispiel verwendet alle Requisiten, die im simple-react-footer-Modul verfügbar sind, um eine angepasste Fußzeile zu erstellen. Der Code erstellt eine Fußzeile mit verschiedenen Farben und verschiedenen Social-Media-Symbolen:

Die Props linkedin, facebook, twitter, instagram, youtube und pinterest geben die Social-Media-Namen des Unternehmens oder der Organisation an. Wenn Sie diese Requisiten bereitstellen, zeigt das Modul die entsprechenden Social-Media-Symbole in der Fußzeile an.

Das Copyright-Prop gibt den Copyright-Text für die Fußzeile an. Das Modul zeigt diesen Text unten in der Fußzeile an.

Die Props iconColor, backgroundColor, fontColor und copyrightColor passen das Erscheinungsbild der Fußzeile an.

Neben dem guten Aussehen Ihrer Website kann eine responsive Fußzeile die Benutzererfahrung Ihrer Website verbessern. Eine responsive Fußzeile stellt sicher, dass alle Benutzer, unabhängig vom verwendeten Gerät, problemlos auf die Fußzeile zugreifen und diese verwenden können.