Daudziem mūsdienu tīmekļa dizainiem ir nepieciešama atsaucīga kājene, kas izskatās labi un darbojas pareizi visās ierīcēs. Adaptīvā kājene automātiski pielāgo savu izkārtojumu un saturu, lai atbilstu tās ierīces ekrāna izmēram, kurā tā tiek skatīta.
Uzziniet, kā izveidot adaptīvu kājeni programmā React.js, izmantojot vienkāršu-react-footer moduli.
Vienkāršās reaģēšanas kājenes modulis ir viegla un ērti lietojama bibliotēka, kas ļauj izveidot atsaucīgu kājeni pakalpojumā React.js. Tas nodrošina rekvizītu komplektu, ko varat izmantot, lai pielāgotu kājenes izskatu un funkcionalitāti.
Pirms ķeraties pie kājenes izveides, izmantojot vienkāršās reaģēšanas kājenes moduli, īsi apskatīsim dažas no tā galvenajām funkcijām.
- Pielāgojams izkārtojums: Vienkāršās reaģēšanas kājenes modulis ļauj definēt kolonnu skaitu kājenē, kā arī katras kolonnas saturu.
- Atsaucīgs dizains: Kājene automātiski pielāgo savu izkārtojumu, lai atbilstu tās ierīces ekrāna izmēram, kurā tā tiek skatīta.
- Pielāgojams izskats: Vienkāršās reaģēšanas kājenes modulis nodrošina virkni rekvizītu, ko varat izmantot, lai pielāgotu kājenes izskatu, piemēram, fona krāsu, fonta krāsu un ikonas krāsu.
Tagad, kad jums ir pamatzināšanas par vienkāršu reaģēšanas kājenes moduli, apskatīsim, kā varat to izmantot, lai izveidotu kājeni pakalpojumā React.js.
Sāciet ar izveidojot vienkāršu React lietotni. Pēc tam varat izmantot vienkāršās reaģēšanas kājenes moduli, lai izveidotu kājeni, kā parādīts šajā piemērā:
imports Reaģēt no'reaģēt';
imports SimpleReactFooter no"vienkārši reaģēt-footer";konst Kājene = () => {
// Definējiet kājenes datus
konst apraksts = "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 virsraksts = "Lorem Ipsum";konst kolonnas = [{
virsraksts: "1. kolonna",
resursi: [{
nosaukums: "1. vienums",
saite: "/item1"
},{
nosaukums: "2. vienums",
saite: "/item2"
},{
nosaukums: "3. vienums",
saite: "/item3"
},{
nosaukums: "4. vienums",
saite: "/item4"
}]
},{
virsraksts: "2. kolonna",
resursi: [{
nosaukums: "5. vienums",
saite: "/item5"
},{
nosaukums: "6. vienums",
saite: "/item6"
}]
},{
virsraksts: "3. kolonna",
resursi: [{
nosaukums: "7. vienums",
saite: "/item7"
},{
nosaukums: "8. punkts",
saite: "/item8"
}]
}];atgriezties<SimpleReactFooter
apraksts={apraksts}
title={title}
kolonnas={columns}
/>;
}
eksportētnoklusējuma Kājene;
Šis kods izveidos kājeni, kas izskatās šādi:
Šajā piemērā tiek importēts SimpleReactFooter komponents un definēts funkcionāls komponents ar nosaukumu Footer. Kājenes komponentā tas izmanto SimpleReactFooter komponentu, nododot tam trīs rekvizītus: virsrakstu, aprakstu un kolonnas.
Modulis parāda virsraksta rekvizītu kājenes augšdaļā. Zem tā redzams virsraksta rekvizīts. Visbeidzot, kolonnu atbalsts ir objektu masīvs, kas nosaka kājenes kolonnu saturu.
Komponentu pielāgošana ar dažādiem rekvizītiem
Vienkāršās reaģēšanas kājenes modulis piedāvā vairākus nosaukumus un aprakstus rekvizīti, kurus varat nodot komponentam. Varat tos izmantot, lai pielāgotu kājenes izskatu un funkcionalitāti.
Šeit ir saraksts ar visiem elementiem, kas pieejami vienkāršās reaģēšanas kājenes modulī:
- virsraksts: Kājenes nosaukums.
- apraksts: Īss kājenes apraksts.
- kolonnas: Objektu masīvs, kas nosaka kājenes kolonnu saturu. Katram objektam ir jābūt nosaukuma rekvizītam, kas norāda kolonnas nosaukumu, un resursu rekvizītam, kas ir objektu masīvs, un katrs no tiem attēlo kolonnas resursu. Katram resursa objektam ir jābūt nosaukuma rekvizītam, kas norāda resursa nosaukumu, un saites rekvizītam, kas norāda saiti uz resursu.
- linkedin: Uzņēmuma vai organizācijas LinkedIn rokturis.
- facebook: Uzņēmuma vai organizācijas Facebook rokturis.
- twitter: Uzņēmuma vai organizācijas Twitter rokturis.
- instagram: Uzņēmuma vai organizācijas Instagram rokturis.
- youtube: Uzņēmuma vai organizācijas YouTube rokturis.
- pinterest: Uzņēmuma vai organizācijas Pinterest rokturis.
- autortiesības: Autortiesību teksts kājenei.
- ikonas krāsa: Sociālo saziņas līdzekļu ikonu krāsa kājenē.
- fona krāsa: Kājenes fona krāsa.
- fonta krāsa: Kājenes fonta krāsa.
- autortiesību krāsa: Autortiesību teksta fonta krāsa kājenē.
Šeit ir piemērs tam, kā varat izmantot visus vienkāršos reaģēšanas kājenes modulī pieejamos rekvizītus, lai izveidotu pielāgotu kājeni pakalpojumā React.js:
imports Reaģēt no'reaģēt';
imports SimpleReactFooter no"vienkārši reaģēt-footer";konst Kājene = () => {
// Definējiet kājenes datus
konst apraksts = "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 virsraksts = "Lorem Ipsum";konst kolonnas = [{
virsraksts: "1. kolonna",
resursi: [{
nosaukums: "1. vienums",
saite: "/item1"
},{
nosaukums: "2. vienums",
saite: "/item2"
},{
nosaukums: "3. vienums",
saite: "/item3"
},{
nosaukums: "4. vienums",
saite: "/item4"
}]
},{
virsraksts: "2. kolonna",
resursi: [{
nosaukums: "5. vienums",
saite: "/item5"
},{
nosaukums: "6. vienums",
saite: "/item6"
}]
},{
virsraksts: "3. kolonna",
resursi: [{
nosaukums: "7. vienums",
saite: "/item7"
},{
nosaukums: "8. punkts",
saite: "/item8"
}]
}];atgriezties<SimpleReactFooter
apraksts={apraksts}
title={title}
kolonnas={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"
autortiesības="melns"
iconColor="melns"
backgroundColor="gaiši pelēks"
fontColor="melns"
copyrightColor="tumši pelēks"
/>;
}
eksportētnoklusējuma Kājene;
Šajā piemērā tiek izmantoti visi elementi, kas pieejami vienkāršās reaģēšanas kājenes modulī, lai izveidotu pielāgotu kājeni. Kods izveidos kājeni ar dažādām krāsām un dažādām sociālo mediju ikonām:
Linkedin, facebook, twitter, instagram, youtube un pinterest rekvizīti norāda uzņēmuma vai organizācijas sociālo mediju rokturus. Ja nodrošināsiet šos rekvizītus, modulis kājenē parāda atbilstošās sociālo mediju ikonas.
Autortiesību piedāvājums norāda kājenes autortiesību tekstu. Modulis parāda šo tekstu kājenes apakšā.
Ikonas Color, backgroundColor, fontColor un copyrightColor rekvizīti pielāgo kājenes izskatu.
Papildus tam, ka jūsu vietne izskatās labi, adaptīva kājene var uzlabot jūsu vietnes lietotāja pieredzi. Adaptīva kājene nodrošina, ka visi lietotāji neatkarīgi no izmantotās ierīces var viegli piekļūt kājenei un to izmantot.
