Sok modern webdizájnhoz olyan reszponzív lábléc szükséges, amely jól néz ki és minden eszközön megfelelően működik. A reszponzív lábléc automatikusan beállítja elrendezését és tartalmát, hogy illeszkedjen a megtekintett eszköz képernyőméretéhez.
Ismerje meg, hogyan hozhat létre reszponzív láblécet a React.js programban az egyszerű reagálás lábléc modul segítségével.
A simple-react-footer modul egy könnyű és könnyen használható könyvtár, amely lehetővé teszi, hogy érzékeny láblécet hozzon létre a React.js-ben. Olyan kellékeket biztosít, amelyek segítségével testreszabhatja a lábléc megjelenését és funkcióit.
Mielőtt belevágnánk a lábléc létrehozásába az egyszerű reagálás lábléc modul használatával, vessünk egy pillantást annak néhány fő funkciójára:
- Testreszabható elrendezés: Az egyszerű reagálás-lábléc modul lehetővé teszi, hogy meghatározza a láblécben lévő oszlopok számát, valamint az egyes oszlopok tartalmát.
- Reszponzív dizájn: A lábléc automatikusan beállítja az elrendezést, hogy illeszkedjen a megtekintés alatt álló eszköz képernyőméretéhez.
- Testreszabható megjelenés: Az egyszerűen reagáló lábléc modul számos kelléket kínál, amelyek segítségével személyre szabhatja a lábléc megjelenését, például a háttérszínt, a betűszínt és az ikonszínt.
Most, hogy már rendelkezik alapvető ismeretekkel az egyszerű reagálás lábléc moduljáról, nézzük meg, hogyan hozhat létre láblécet a React.js-ben.
Kezdje ezzel egy egyszerű React alkalmazás létrehozása. Ezután használhatja a simple-react-footer modult lábléc létrehozására, mint ebben a példában:
import Reagál tól től'reagál';
import SimpleReactFooter tól től"egyszerű reagáló lábléc";const Lábléc = () => {
// Adja meg a lábléc adatait
const leírás = "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.";
const cím = "Lorem Ipsum";const oszlopok = [{
cím: "1. oszlop",
erőforrások: [{
név: "1. elem",
link: "/elem1"
},{
név: "2. elem",
link: "/elem2"
},{
név: "3. tétel",
link: "/elem3"
},{
név: "4. tétel",
link: "/item4"
}]
},{
cím: "2. oszlop",
erőforrások: [{
név: "5. tétel",
link: "/item5"
},{
név: "6. tétel",
link: "/item6"
}]
},{
cím: "3. oszlop",
erőforrások: [{
név: "7. tétel",
link: "/item7"
},{
név: "8. tétel",
link: "/elem8"
}]
}];Visszatérés<SimpleReactFooter
leírás={leírás}
title={title}
oszlopok={oszlopok}
/>;
}
exportalapértelmezett lábléc;
Ez a kód létrehoz egy láblécet, amely így néz ki:
Ez a példa importálja a SimpleReactFooter összetevőt, és meghatározza a Footer nevű funkcionális összetevőt. A Footer komponensen belül a SimpleReactFooter komponenst használja, három kelléket adva át neki: címet, leírást és oszlopokat.
A modul a lábléc tetején jeleníti meg a címet. Ez alatt a cím kelléke látható. Végül, az oszlopok prop egy olyan objektumok tömbje, amelyek meghatározzák a láblécben lévő oszlopok tartalmát.
Alkatrészek testreszabása különböző kellékekkel
A cím és a leírás kellékei mellett az egyszerű reagálás-lábléc modul számos lehetőséget kínál kellékek, amelyeket átadhat az összetevőnek. Ezekkel testreszabhatja a lábléc megjelenését és funkcióit.
Itt található az egyszerű reagálás lábléc modulban elérhető kellékek listája:
- cím: A lábléc címe.
- leírás: A lábléc rövid leírása.
- oszlopok: Objektumok tömbje, amely meghatározza a láblécben lévő oszlopok tartalmát. Minden objektumnak rendelkeznie kell egy title tulajdonsággal, amely megadja az oszlop címét, és egy erőforrás tulajdonsággal, amely objektumok tömbje, amelyek mindegyike egy erőforrást képvisel az oszlopban. Minden erőforrásobjektumnak rendelkeznie kell egy név tulajdonsággal, amely megadja az erőforrás nevét, és egy hivatkozás tulajdonsággal, amely megadja az erőforrásra mutató hivatkozást.
- linkedin: A vállalat vagy szervezet LinkedIn-fogója.
- Facebook: A cég vagy szervezet Facebook-kezelője.
- twitter: A cég vagy szervezet Twitter-fogója.
- instagram: A vállalat vagy szervezet Instagram-fogója.
- Youtube: A vállalat vagy szervezet YouTube-fogója.
- pinterest: A vállalat vagy szervezet Pinterest-fogója.
- szerzői jog: A lábléc szerzői jogi szövege.
- ikonszín: A közösségi média ikonjainak színe a láblécben.
- háttérszín: A lábléc háttérszíne.
- betű szín: A lábléc betűszíne.
- copyrightColor: A láblécben található szerzői jogi szöveg betűszíne.
Íme egy példa arra, hogyan használhatja a simple-react-footer modulban elérhető összes kelléket testreszabott lábléc létrehozásához a React.js-ben:
import Reagál tól től'reagál';
import SimpleReactFooter tól től"egyszerű reagáló lábléc";const Lábléc = () => {
// Adja meg a lábléc adatait
const leírás = "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.";
const cím = "Lorem Ipsum";const oszlopok = [{
cím: "1. oszlop",
erőforrások: [{
név: "1. elem",
link: "/elem1"
},{
név: "2. elem",
link: "/elem2"
},{
név: "3. tétel",
link: "/elem3"
},{
név: "4. tétel",
link: "/item4"
}]
},{
cím: "2. oszlop",
erőforrások: [{
név: "5. tétel",
link: "/item5"
},{
név: "6. tétel",
link: "/item6"
}]
},{
cím: "3. oszlop",
erőforrások: [{
név: "7. tétel",
link: "/item7"
},{
név: "8. tétel",
link: "/elem8"
}]
}];Visszatérés<SimpleReactFooter
leírás={leírás}
title={title}
oszlopok={oszlopok}
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"
szerzői jog="fekete"
ikonSzín="fekete"
backgroundColor="világos szürke"
fontColor="fekete"
copyrightColor="sötétszürke"
/>;
}
exportalapértelmezett lábléc;
Ez a példa az egyszerű reagálás-lábléc modulban elérhető összes kelléket felhasználja testreszabott lábléc létrehozásához. A kód létrehoz egy láblécet különböző színekkel és különféle közösségi média ikonokkal:
A linkedin, a facebook, a twitter, az instagram, a youtube és a pinterest kellékei meghatározzák a cég vagy szervezet közösségimédia-kezelőit. Ha megadja ezeket a kellékeket, a modul megjeleníti a megfelelő közösségi média ikonokat a láblécben.
A szerzői jogi javaslat meghatározza a lábléc szerzői jogi szövegét. A modul ezt a szöveget a lábléc alján jeleníti meg.
Az iconColor, backgroundColor, fontColor és copyrightColor kellékek testreszabják a lábléc megjelenését.
Amellett, hogy webhelye jól néz ki, egy reszponzív lábléc javíthatja webhelye felhasználói élményét. A reszponzív lábléc biztosítja, hogy minden felhasználó, függetlenül attól, hogy milyen eszközt használ, könnyen elérheti és használhatja a láblécet.
