Mnoho moderných webových návrhov vyžaduje responzívnu pätu, ktorá vyzerá dobre a funguje správne na všetkých zariadeniach. Responzívna päta automaticky upraví svoje rozloženie a obsah tak, aby sa prispôsobila veľkosti obrazovky zariadenia, na ktorom sa pozerá.
Zistite, ako vytvoriť responzívnu pätu v React.js pomocou modulu simple-react-footer.
Modul simple-react-footer je ľahká a ľahko použiteľná knižnica, ktorá vám umožňuje vytvoriť responzívnu pätu v React.js. Poskytuje sadu rekvizít, ktoré môžete použiť na prispôsobenie vzhľadu a funkčnosti päty.
Predtým, ako sa pustíme do vytvárania päty pomocou modulu simple-react-footer, pozrime sa rýchlo na niektoré z jeho kľúčových funkcií:
- Prispôsobiteľné rozloženie: Modul simple-react-footer vám umožňuje definovať počet stĺpcov v päte, ako aj obsah každého stĺpca.
- Responzívny dizajn: Päta automaticky prispôsobí svoje rozloženie tak, aby zodpovedala veľkosti obrazovky zariadenia, na ktorom sa zobrazuje.
- Prispôsobiteľný vzhľad: Modul päty jednoduchých reakcií poskytuje celý rad rekvizít, ktoré môžete použiť na prispôsobenie vzhľadu päty, ako je farba pozadia, farba písma a farba ikony.
Teraz, keď už máte základné znalosti o module simple-react-footer, pozrime sa, ako ho môžete použiť na vytvorenie päty v React.js.
Začnite tým vytvorenie jednoduchej aplikácie React. Potom môžete použiť modul simple-react-footer na vytvorenie päty, ako v tomto príklade:
importovať Reagovať od'reagovať';
importovať SimpleReactFooter od„simple-react-footer“;konšt Päta = () => {
// Definujte údaje pre pätu
konšt popis = „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.";
konšt titul = "Lorem Ipsum";konšt stĺpce = [{
názov: "Stĺpec 1",
zdroje: [{
názov: "Položka 1",
odkaz: "/item1"
},{
názov: "položka 2",
odkaz: "/položka2"
},{
názov: "položka 3",
odkaz: "/položka3"
},{
názov: "Položka 4",
odkaz: "/položka4"
}]
},{
názov: "Stĺpec 2",
zdroje: [{
názov: "Položka 5",
odkaz: "/položka5"
},{
názov: "Položka 6",
odkaz: "/item6"
}]
},{
názov: "Stĺpec 3",
zdroje: [{
názov: "položka 7",
odkaz: "/položka7"
},{
názov: "Položka 8",
odkaz: "/položka8"
}]
}];vrátiť<SimpleReactFooter
description={description}
title={title}
columns={columns}
/>;
}
exportpredvolená Päta;
Tento kód vytvorí pätu, ktorá vyzerá takto:
Tento príklad importuje komponent SimpleReactFooter a definuje funkčný komponent s názvom Footer. V rámci komponentu Footer používa komponent SimpleReactFooter a odovzdáva mu tri rekvizity: názov, popis a stĺpce.
Modul zobrazuje titulnú rekvizitu v hornej časti päty. Pod tým sa zobrazuje titulná rekvizita. A nakoniec, podložka stĺpcov je pole objektov, ktoré definujú obsah stĺpcov v päte.
Prispôsobenie komponentov pomocou rôznych rekvizít
Okrem rekvizít s názvom a popisom ich modul simple-react-footer poskytuje hneď niekoľko rekvizity, ktoré môžete odovzdať komponentu. Môžete ich použiť na prispôsobenie vzhľadu a funkčnosti päty.
Tu je zoznam všetkých rekvizít dostupných v module simple-react-footer:
- názov: Názov päty.
- popis: Stručný popis päty.
- stĺpce: Pole objektov, ktoré definuje obsah stĺpcov v päte. Každý objekt by mal mať vlastnosť title, ktorá špecifikuje názov stĺpca, a vlastnosť resources, čo je pole objektov, z ktorých každý predstavuje zdroj v stĺpci. Každý objekt prostriedku by mal mať vlastnosť name, ktorá špecifikuje názov zdroja a vlastnosť odkazu, ktorá špecifikuje prepojenie na zdroj.
- linkedin: Rukoväť LinkedIn spoločnosti alebo organizácie.
- Facebook: Rukoväť spoločnosti alebo organizácie na Facebooku.
- twitter: Správca Twitter spoločnosti alebo organizácie.
- instagram: Úchytka Instagramu spoločnosti alebo organizácie.
- YouTube: Rukoväť YouTube spoločnosti alebo organizácie.
- pinterest: Rukoväť Pinterest spoločnosti alebo organizácie.
- autorské práva: Text o autorských právach pre pätu.
- iconColor: Farba ikon sociálnych médií v päte.
- farba pozadia: Farba pozadia päty.
- farba písma: Farba písma päty.
- copyrightFarba: Farba písma textu chráneného autorskými právami v päte.
Tu je príklad toho, ako môžete použiť všetky rekvizity dostupné v module simple-react-footer na vytvorenie prispôsobenej päty v React.js:
importovať Reagovať od'reagovať';
importovať SimpleReactFooter od„simple-react-footer“;konšt Päta = () => {
// Definujte údaje pre pätu
konšt popis = „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.";
konšt titul = "Lorem Ipsum";konšt stĺpce = [{
názov: "Stĺpec 1",
zdroje: [{
názov: "Položka 1",
odkaz: "/item1"
},{
názov: "položka 2",
odkaz: "/položka2"
},{
názov: "položka 3",
odkaz: "/položka3"
},{
názov: "Položka 4",
odkaz: "/položka4"
}]
},{
názov: "Stĺpec 2",
zdroje: [{
názov: "Položka 5",
odkaz: "/položka5"
},{
názov: "Položka 6",
odkaz: "/item6"
}]
},{
názov: "Stĺpec 3",
zdroje: [{
názov: "položka 7",
odkaz: "/položka7"
},{
názov: "Položka 8",
odkaz: "/položka8"
}]
}];vrátiť<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"
autorské práva ="čierna"
iconColor="čierna"
backgroundColor="svetlo šedá"
fontColor="čierna"
copyrightColor="tmavošedý"
/>;
}
exportpredvolená Päta;
Tento príklad používa všetky rekvizity dostupné v module simple-react-footer na vytvorenie prispôsobenej päty. Kód vytvorí pätu s rôznymi farbami a rôznymi ikonami sociálnych médií:
Rekvizity linkedin, facebook, twitter, instagram, youtube a pinterest špecifikujú rukoväte sociálnych médií spoločnosti alebo organizácie. Ak poskytnete tieto rekvizity, modul zobrazí príslušné ikony sociálnych médií v päte.
Autorské práva špecifikujú autorský text pre pätu. Modul zobrazuje tento text v spodnej časti päty.
Rekvizity iconColor, backgroundColor, fontColor a copyrightColor prispôsobujú vzhľad päty.
Okrem toho, že váš web vyzerá dobre, môže responzívna päta zlepšiť používateľský zážitok z vášho webu. Responzívna päta zaisťuje, že všetci používatelia, bez ohľadu na zariadenie, ktoré používajú, môžu ľahko pristupovať a používať pätu.