Många moderna webbdesigner kräver en responsiv sidfot som ser bra ut och fungerar korrekt på alla enheter. En responsiv sidfot justerar automatiskt dess layout och innehåll för att passa skärmstorleken på enheten den visas på.
Lär dig hur du skapar en responsiv sidfot i React.js med hjälp av modulen enkel-reagera-sidfot.
Modulen simple-react-footer är ett lätt och lättanvänt bibliotek som låter dig skapa en responsiv sidfot i React.js. Den tillhandahåller en uppsättning rekvisita som du kan använda för att anpassa utseendet och funktionen hos din sidfot.
Innan vi börjar skapa en sidfot med modulen enkel-reagera-sidfot, låt oss ta en snabb titt på några av dess nyckelfunktioner:
- Anpassningsbar layout: Modulen enkel-reagera-sidfot låter dig definiera antalet kolumner i sidfoten, såväl som innehållet i varje kolumn.
- Responsiv design: Sidfoten justerar automatiskt sin layout för att passa skärmstorleken på enheten den visas på.
- Anpassningsbart utseende: Modulen enkel-reagera-sidfot tillhandahåller en rad rekvisita som du kan använda för att anpassa utseendet på din sidfot, såsom bakgrundsfärg, teckensnittsfärg och ikonfärg.
Nu när du har en grundläggande förståelse för modulen simple-react-footer, låt oss se hur du kan använda den för att skapa en sidfot i React.js.
Börja med skapa en enkel React-app. Du kan sedan använda modulen simple-react-footer för att skapa en sidfot, som i det här exemplet:
importera Reagera från'reagera';
importera SimpleReactFooter från"enkel-reagera-sidfot";konst Sidfot = () => {
// Definiera data för sidfoten
konst beskrivning = "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 kolumner = [{
titel: "Kolumn 1",
Resurser: [{
namn: "Artikel 1",
länk: "/artikel1"
},{
namn: "Artikel 2",
länk: "/artikel2"
},{
namn: "Artikel 3",
länk: "/artikel3"
},{
namn: "Artikel 4",
länk: "/artikel4"
}]
},{
titel: "Kolumn 2",
Resurser: [{
namn: "Artikel 5",
länk: "/artikel5"
},{
namn: "Artikel 6",
länk: "/artikel6"
}]
},{
titel: "Kolumn 3",
Resurser: [{
namn: "Artikel 7",
länk: "/artikel7"
},{
namn: "Artikel 8",
länk: "/artikel8"
}]
}];lämna tillbaka<SimpleReactFooter
description={description}
title={title}
columns={columns}
/>;
}
exporterastandard Sidfot;
Den koden kommer att skapa en sidfot som ser ut så här:
Det här exemplet importerar SimpleReactFooter-komponenten och definierar en funktionell komponent som kallas Footer. Inuti Footer-komponenten använder den SimpleReactFooter-komponenten och skickar den tre rekvisita: titel, beskrivning och kolumner.
Modulen visar titelrekvisiten överst i sidfoten. Under det visar den titelrekvisiten. Slutligen är kolumnpropen en uppsättning objekt som definierar innehållet i kolumnerna i sidfoten.
Anpassa komponenter med olika rekvisita
Förutom titel- och beskrivningsrekvisita, ger modulen enkel-reagera-sidfot flera rekvisita som du kan skicka till komponenten. Du kan använda dessa för att anpassa utseendet och funktionaliteten på din sidfot.
Här är en lista över alla rekvisita som är tillgängliga i modulen enkel-reagera-sidfot:
- titel: Rubriken på sidfoten.
- beskrivning: En kort beskrivning av sidfoten.
- kolumner: En array av objekt som definierar innehållet i kolumnerna i sidfoten. Varje objekt bör ha en titelegenskap som anger kolumnens titel och en resursegenskap som är en array av objekt som vart och ett representerar en resurs i kolumnen. Varje resursobjekt ska ha en namnegenskap som anger namnet på resursen och en länkegenskap som anger länken till resursen.
- linkedin: LinkedIns handtag för företaget eller organisationen.
- Facebook: Företagets eller organisationens Facebook-handtag.
- Twitter: Företagets eller organisationens Twitter-handtag.
- Instagram: Instagram-handtaget för företaget eller organisationen.
- Youtube: Företagets eller organisationens YouTube-handtag.
- Pinterest: Företagets eller organisationens Pinterest-handtag.
- upphovsrätt: Upphovsrättstexten för sidfoten.
- ikon Färg: Färgen på ikonerna för sociala medier i sidfoten.
- bakgrundsfärg: Bakgrundsfärgen på sidfoten.
- fontfärg: Teckensnittsfärgen på sidfoten.
- copyright Färg: Teckensnittsfärgen på copyrighttexten i sidfoten.
Här är ett exempel på hur du kan använda alla rekvisita som finns i modulen simple-react-footer för att skapa en anpassad sidfot i React.js:
importera Reagera från'reagera';
importera SimpleReactFooter från"enkel-reagera-sidfot";konst Sidfot = () => {
// Definiera data för sidfoten
konst beskrivning = "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 kolumner = [{
titel: "Kolumn 1",
Resurser: [{
namn: "Artikel 1",
länk: "/artikel1"
},{
namn: "Artikel 2",
länk: "/artikel2"
},{
namn: "Artikel 3",
länk: "/artikel3"
},{
namn: "Artikel 4",
länk: "/artikel4"
}]
},{
titel: "Kolumn 2",
Resurser: [{
namn: "Artikel 5",
länk: "/artikel5"
},{
namn: "Artikel 6",
länk: "/artikel6"
}]
},{
titel: "Kolumn 3",
Resurser: [{
namn: "Artikel 7",
länk: "/artikel7"
},{
namn: "Artikel 8",
länk: "/artikel8"
}]
}];lämna tillbaka<SimpleReactFooter
description={description}
title={title}
columns={columns}
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"
upphovsrätt="svart"
iconColor="svart"
bakgrundsfärg="ljusgrå"
fontColor="svart"
copyrightColor="mörkgrå"
/>;
}
exporterastandard Sidfot;
Det här exemplet använder alla rekvisita som finns i modulen enkel-reagera-sidfot för att skapa en anpassad sidfot. Koden kommer att skapa en sidfot med olika färger och olika sociala medier-ikoner:
Linkedin-, facebook-, twitter-, instagram-, youtube- och pinterest-rekvisita anger företagets eller organisationens sociala mediers handtag. Om du tillhandahåller dessa rekvisita visar modulen motsvarande ikoner för sociala medier i sidfoten.
Upphovsrättstexten anger upphovsrättstexten för sidfoten. Modulen visar denna text längst ner i sidfoten.
Ikonen Färg, bakgrundsfärg, teckensnittsfärg och copyrightColor rekvisita anpassar utseendet på sidfoten.
Förutom att din webbplats ser bra ut kan en responsiv sidfot förbättra användarupplevelsen av din webbplats. En responsiv sidfot ser till att alla användare, oavsett vilken enhet de använder, enkelt kan komma åt och använda sidfoten.
