Daugeliui šiuolaikinių interneto dizaino reikia jautrios poraštės, kuri gerai atrodytų ir tinkamai veiktų visuose įrenginiuose. Interaktyvi poraštė automatiškai pakoreguoja savo išdėstymą ir turinį, kad atitiktų įrenginio, kuriame ji peržiūrima, ekrano dydį.
Sužinokite, kaip sukurti interaktyvią poraštę React.js naudojant paprastos reakcijos poraštės modulį.
Paprastos poraštės modulis yra lengva ir lengvai naudojama biblioteka, leidžianti sukurti reaguojančią poraštę React.js. Jame pateikiamas rekvizitų rinkinys, kurį galite naudoti norėdami tinkinti poraštės išvaizdą ir funkcionalumą.
Prieš pradėdami kurti poraštę naudojant paprastos reakcijos poraštės modulį, trumpai pažvelkime į kai kurias pagrindines jo funkcijas:
- Pritaikomas išdėstymas: Paprastos reakcijos poraštės modulis leidžia nustatyti poraštės stulpelių skaičių ir kiekvieno stulpelio turinį.
- Reaktyvus dizainas: Poraštė automatiškai pakoreguoja savo išdėstymą, kad atitiktų įrenginio, kuriame ji peržiūrima, ekrano dydį.
- Pritaikoma išvaizda: Paprastos reakcijos poraštės modulis suteikia daugybę rekvizitų, kuriuos galite naudoti norėdami tinkinti poraštės išvaizdą, pvz., fono spalvą, šrifto spalvą ir piktogramos spalvą.
Dabar, kai jau turite pagrindinį supratimą apie paprastos reakcijos poraštės modulį, pažiūrėkime, kaip galite jį naudoti kurdami poraštę React.js.
Pradėkite nuo sukurti paprastą React programėlę. Tada galite naudoti paprastos reakcijos poraštės modulį, kad sukurtumėte poraštę, kaip parodyta šiame pavyzdyje:
importuoti Reaguoti iš'reaguoti';
importuoti SimpleReactFooter iš„paprasta-reaguoti-footer“;konst Poraštė = () => {
// Apibrėžkite poraštės duomenis
konst aprašymas = „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 pavadinimas = "Lorem Ipsum";konst stulpeliai = [{
pavadinimas: "1 stulpelis",
ištekliai: [{
vardas: "1 elementas",
nuoroda: "/item1"
},{
vardas: "2 elementas",
nuoroda: "/item2"
},{
vardas: "3 punktas",
nuoroda: "/item3"
},{
vardas: "4 punktas",
nuoroda: "/item4"
}]
},{
pavadinimas: "2 stulpelis",
ištekliai: [{
vardas: "5 punktas",
nuoroda: "/item5"
},{
vardas: "6 punktas",
nuoroda: "/item6"
}]
},{
pavadinimas: "3 stulpelis",
ištekliai: [{
vardas: "7 punktas",
nuoroda: "/item7"
},{
vardas: "8 punktas",
nuoroda: "/item8"
}]
}];grąžinti<SimpleReactFooter
aprašymas={aprašymas}
title={title}
stulpeliai={stulpeliai}
/>;
}
eksportuotinumatytas Poraštė;
Šis kodas sukurs poraštę, kuri atrodys taip:
Šiame pavyzdyje importuojamas SimpleReactFooter komponentas ir apibrėžiamas funkcinis komponentas, vadinamas Footer. Komponento Footer viduje jis naudoja SimpleReactFooter komponentą, perduodamas jam tris rekvizitus: pavadinimą, aprašymą ir stulpelius.
Modulis rodo pavadinimo rekvizitus poraštės viršuje. Po juo rodomas pavadinimo rekvizitas. Galiausiai, stulpelių pasiūlymas yra objektų masyvas, apibrėžiantis poraštės stulpelių turinį.
Komponentų pritaikymas naudojant skirtingus rekvizitus
Be pavadinimo ir aprašymo rekvizitai, paprastos reakcijos poraštės modulis pateikia keletą rekvizitai, kuriuos galite perduoti komponentui. Juos galite naudoti norėdami tinkinti poraštės išvaizdą ir funkcionalumą.
Čia pateikiamas visų elementų, esančių paprastos reakcijos poraštės modulyje, sąrašas:
- pavadinimas: Poraštės pavadinimas.
- apibūdinimas: Trumpas poraštės aprašymas.
- stulpeliai: Objektų masyvas, apibrėžiantis poraštės stulpelių turinį. Kiekvienas objektas turi turėti pavadinimo ypatybę, nurodančią stulpelio pavadinimą, ir išteklių ypatybę, kuri yra objektų masyvas, kurių kiekvienas reiškia stulpelio išteklius. Kiekvienas išteklių objektas turi turėti pavadinimo ypatybę, nurodančią ištekliaus pavadinimą, ir nuorodos ypatybę, nurodančią nuorodą į šaltinį.
- linkedin: Įmonės ar organizacijos „LinkedIn“ rankena.
- Facebook: Įmonės ar organizacijos Facebook rankena.
- Twitter: Įmonės ar organizacijos Twitter rankena.
- instagramas: Įmonės ar organizacijos Instagram rankena.
- youtube: Įmonės ar organizacijos „YouTube“ rankena.
- pinterest: Įmonės ar organizacijos Pinterest rankena.
- autorių teisės: Poraštės autorių teisių tekstas.
- piktogramos spalva: Socialinės medijos piktogramų spalva poraštėje.
- fono spalva: Poraštės fono spalva.
- šrifto spalva: Poraštės šrifto spalva.
- autorių teisių spalva: Autorių teisių teksto poraštėje šrifto spalva.
Pateikiame pavyzdį, kaip galite naudoti visus modulyje „react-footer“ esančius rekvizitus, kad sukurtumėte tinkintą poraštę React.js:
importuoti Reaguoti iš'reaguoti';
importuoti SimpleReactFooter iš„paprasta-reaguoti-footer“;konst Poraštė = () => {
// Apibrėžkite poraštės duomenis
konst aprašymas = „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 pavadinimas = "Lorem Ipsum";konst stulpeliai = [{
pavadinimas: "1 stulpelis",
ištekliai: [{
vardas: "1 elementas",
nuoroda: "/item1"
},{
vardas: "2 elementas",
nuoroda: "/item2"
},{
vardas: "3 punktas",
nuoroda: "/item3"
},{
vardas: "4 punktas",
nuoroda: "/item4"
}]
},{
pavadinimas: "2 stulpelis",
ištekliai: [{
vardas: "5 punktas",
nuoroda: "/item5"
},{
vardas: "6 punktas",
nuoroda: "/item6"
}]
},{
pavadinimas: "3 stulpelis",
ištekliai: [{
vardas: "7 punktas",
nuoroda: "/item7"
},{
vardas: "8 punktas",
nuoroda: "/item8"
}]
}];grąžinti<SimpleReactFooter
aprašymas={aprašymas}
title={title}
stulpeliai={stulpeliai}
linkedin="lorem_ipsum_on_linkedin"
facebook ="lorem_ipsum_on_fb"
twitter=„lorem_ipsum_on_twitter“
instagramas =„lorem_ipsum_live“
youtube ="UCFt6TSF464J8K82xeA?"
pinterest=„lorem_ipsum_collections“
autorių teisės ="juodas"
piktogramos spalva="juodas"
backgroundColor="šviesiai pilka"
fontColor="juodas"
copyrightColor="tamsiai pilka"
/>;
}
eksportuotinumatytas Poraštė;
Šiame pavyzdyje naudojami visi rekvizitai, esantys paprastos reakcijos poraštės modulyje, kad būtų sukurta tinkinta poraštė. Kodas sukurs poraštę su skirtingomis spalvomis ir įvairiomis socialinės žiniasklaidos piktogramomis:
Linkedin, facebook, twitter, instagram, youtube ir pinterest rekvizitai nurodo įmonės ar organizacijos socialinių tinklų rankenas. Jei pateiksite šiuos rekvizitus, modulio poraštėje bus rodomos atitinkamos socialinės žiniasklaidos piktogramos.
Autorių teisių pasiūlyme nurodomas poraštės autorių teisių tekstas. Modulis rodo šį tekstą poraštės apačioje.
Piktogramos spalva, fono spalva, šrifto spalva ir copyrightColor rekvizitai tinkina poraštės išvaizdą.
Be to, kad jūsų svetainė atrodytų gerai, interaktyvi poraštė gali pagerinti jūsų svetainės naudotojo patirtį. Interaktyvi poraštė užtikrina, kad visi vartotojai, neatsižvelgiant į naudojamą įrenginį, galėtų lengvai pasiekti ir naudoti poraštę.
