Paljud kaasaegsed veebikujundused nõuavad tundlikku jalust, mis näeb hea välja ja töötab korralikult kõigis seadmetes. Tundlik jalus kohandab automaatselt oma paigutust ja sisu vastavalt selle seadme ekraanisuurusele, millel seda vaadatakse.
Siit saate teada, kuidas luua React.js-s tundlik jalus, kasutades moodulit simple-react-footer.
Lihtsa reageerimise jaluse moodul on kerge ja hõlpsasti kasutatav teek, mis võimaldab teil luua rakenduses React.js tundliku jaluse. See pakub komplekti rekvisiite, mida saate kasutada jaluse välimuse ja funktsionaalsuse kohandamiseks.
Enne lihtsa reageerimise jaluse mooduli abil jaluse loomisesse sukeldumist vaatame lühidalt selle mõningaid põhifunktsioone.
- Kohandatav paigutus: Lihtsa reageerimise jaluse moodul võimaldab teil määrata jaluses olevate veergude arvu ja iga veeru sisu.
- Tundlik disain: Jalus kohandab oma paigutust automaatselt nii, et see sobiks selle seadme ekraani suurusega, millel seda vaadatakse.
- Kohandatav välimus: Lihtsa reageerimise jaluse moodul pakub mitmesuguseid rekvisiite, mida saate kasutada jaluse välimuse kohandamiseks, näiteks taustavärvi, fondi värvi ja ikooni värvi.
Nüüd, kui teil on lihtsa reageerimise jaluse moodulist põhiteadmised, vaatame, kuidas saate seda rakenduses React.js jaluse loomiseks kasutada.
Alusta sellest lihtsa Reacti rakenduse loomine. Seejärel saate jaluse loomiseks kasutada lihtsa reageerimise jaluse moodulit, nagu selles näites:
importida Reageerige alates'reageeri';
importida SimpleReactFooter alates"lihtne reageeriv jalus";konst Jalus = () => {
// Määratlege jaluse andmed
konst kirjeldus = "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 pealkiri = "Lorem Ipsum";konst veerud = [{
pealkiri: "Veerg 1",
ressursid: [{
nimi: "Üksus 1",
link: "/item1"
},{
nimi: "Punkt 2",
link: "/ item2"
},{
nimi: "Punkt 3",
link: "/item3"
},{
nimi: "punkt 4",
link: "/item4"
}]
},{
pealkiri: "Veerg 2",
ressursid: [{
nimi: "punkt 5",
link: "/item5"
},{
nimi: "punkt 6",
link: "/item6"
}]
},{
pealkiri: "Veerg 3",
ressursid: [{
nimi: "punkt 7",
link: "/item7"
},{
nimi: "punkt 8",
link: "/item8"
}]
}];tagasi<SimpleReactFooter
kirjeldus={kirjeldus}
title={title}
veerud={veerud}
/>;
}
eksportidavaikimisi jalus;
See kood loob jaluse, mis näeb välja järgmine:
See näide impordib SimpleReactFooteri komponendi ja määratleb funktsionaalse komponendi nimega Footer. Jaluse komponendis kasutab see komponenti SimpleReactFooter, edastades sellele kolm rekvisiidi: pealkiri, kirjeldus ja veerud.
Moodul kuvab pealkirja rekvisiidi jaluse ülaosas. Selle all on pealkirja rekvisiit. Lõpuks on veergude tugi objektide massiiv, mis määratleb jaluses olevate veergude sisu.
Komponentide kohandamine erinevate rekvisiitide abil
Lisaks pealkirjale ja kirjeldusele pakub lihtsa reageerimise jaluse moodul mitmeid rekvisiidid, mille saate komponendile edasi anda. Saate neid kasutada jaluse välimuse ja funktsionaalsuse kohandamiseks.
Siin on nimekiri kõigist lihtsa reageerimise jaluse moodulis saadaolevatest rekvisiitidest:
- pealkiri: Jaluse pealkiri.
- kirjeldus: Jaluse lühikirjeldus.
- veerud: Objektide massiiv, mis määrab jaluses olevate veergude sisu. Igal objektil peaks olema pealkirja atribuut, mis määrab veeru pealkirja, ja ressursside atribuut, mis on objektide massiiv, millest igaüks esindab veerus olevat ressurssi. Igal ressursiobjektil peaks olema atribuut nimi, mis määrab ressursi nime, ja lingi atribuut, mis määrab ressursi lingi.
- linkedin: Ettevõtte või organisatsiooni LinkedIni käepide.
- facebook: Ettevõtte või organisatsiooni Facebooki käepide.
- twitter: Ettevõtte või organisatsiooni Twitteri käepide.
- instagram: Ettevõtte või organisatsiooni Instagrami käepide.
- Youtube: Ettevõtte või organisatsiooni YouTube'i käepide.
- pinterest: Ettevõtte või organisatsiooni Pinteresti käepide.
- autoriõigus: Jaluse autoriõiguse tekst.
- ikooni värv: Sotsiaalmeedia ikoonide värv jaluses.
- taustavärv: Jaluse taustavärv.
- fondi värv: Jaluse fondi värv.
- autoriõiguse värv: Autoriõigusega kaitstud teksti fondivärv jaluses.
Siin on näide selle kohta, kuidas saate React.js-s kohandatud jaluse loomiseks kasutada kõiki lihtsa reageerimise jaluse moodulis saadaolevaid rekvisiite:
importida Reageerige alates'reageeri';
importida SimpleReactFooter alates"lihtne reageeriv jalus";konst Jalus = () => {
// Määratlege jaluse andmed
konst kirjeldus = "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 pealkiri = "Lorem Ipsum";konst veerud = [{
pealkiri: "Veerg 1",
ressursid: [{
nimi: "Üksus 1",
link: "/item1"
},{
nimi: "Punkt 2",
link: "/ item2"
},{
nimi: "Punkt 3",
link: "/item3"
},{
nimi: "punkt 4",
link: "/item4"
}]
},{
pealkiri: "Veerg 2",
ressursid: [{
nimi: "punkt 5",
link: "/item5"
},{
nimi: "punkt 6",
link: "/item6"
}]
},{
pealkiri: "Veerg 3",
ressursid: [{
nimi: "punkt 7",
link: "/item7"
},{
nimi: "punkt 8",
link: "/item8"
}]
}];tagasi<SimpleReactFooter
kirjeldus={kirjeldus}
title={title}
veerud={veerud}
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"
autoriõigus="must"
iconColor="must"
taustavärv="helehall"
fontColor="must"
copyrightColor="tumehall"
/>;
}
eksportidavaikimisi jalus;
See näide kasutab kohandatud jaluse loomiseks kõiki lihtsa reageerimise jaluse moodulis saadaolevaid rekvisiite. Kood loob erinevate värvide ja erinevate sotsiaalmeedia ikoonidega jaluse:
Linkedini, facebooki, twitteri, instagrami, youtube ja pinteresti rekvisiidid täpsustavad ettevõtte või organisatsiooni sotsiaalmeedia käepidemeid. Kui pakute need rekvisiidid, kuvab moodul jaluses vastavad sotsiaalmeedia ikoonid.
Autoriõiguse rekvisiit määrab jaluse autoriõiguse teksti. Moodul kuvab selle teksti jaluse allosas.
Rekvisiidid iconColor, backgroundColor, fontColor ja copyrightColor kohandavad jaluse välimust.
Lisaks sellele, et teie veebisait näeb hea välja, võib tundlik jalus teie veebisaidi kasutuskogemust parandada. Tundlik jalus tagab, et kõik kasutajad, olenemata kasutatavast seadmest, pääsevad jalusele hõlpsalt juurde ja saavad seda kasutada.