Monet nykyaikaiset verkkosuunnittelut vaativat responsiivisen alatunnisteen, joka näyttää hyvältä ja toimii oikein kaikilla laitteilla. Responsiivinen alatunniste säätää asettelua ja sisältöä automaattisesti sen laitteen näytön koon mukaan, jolla sitä katsotaan.
Opi luomaan reagoiva alatunniste React.js: ssä käyttämällä simple-react-footer-moduulia.
Simple-react-footer-moduuli on kevyt ja helppokäyttöinen kirjasto, jonka avulla voit luoda reagoivan alatunnisteen React.js: ssa. Se tarjoaa joukon tarvikkeita, joiden avulla voit mukauttaa alatunnisteen ulkoasua ja toimintoja.
Ennen kuin sukeltaa alatunnisteen luomiseen käyttämällä simple-react-footer -moduulia, katsotaanpa nopeasti joitakin sen tärkeimpiä ominaisuuksia:
- Mukautettava asettelu: Simple-react-footer-moduulin avulla voit määrittää alatunnisteen sarakkeiden lukumäärän sekä kunkin sarakkeen sisällön.
- Responsiivinen muotoilu: Alatunniste säätää asettelua automaattisesti sen laitteen näytön koon mukaan, jolla sitä katsotaan.
- Muokattava ulkonäkö: Simple-react-footer-moduuli tarjoaa joukon rekvisiitta, joita voit käyttää alatunnisteen ulkoasun mukauttamiseen, kuten taustavärin, fontin värin ja kuvakkeen värin.
Nyt kun sinulla on perusymmärrys simple-react-footer-moduulista, katsotaanpa, kuinka voit käyttää sitä alatunnisteen luomiseen React.js: ssä.
Aloita yksinkertaisen React-sovelluksen luominen. Voit sitten käyttää simple-react-footer-moduulia luodaksesi alatunnisteen, kuten tässä esimerkissä:
tuonti Reagoi alkaen'reagoi';
tuonti SimpleReactFooter alkaen"simple-react-footer";konst Alatunniste = () => {
// Määritä alatunnisteen tiedot
konst kuvaus = "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 otsikko = "Lorem Ipsum";konst sarakkeet = [{
otsikko: "Sarake 1",
resurssit: [{
nimi: "kohde 1",
linkki: "/item1"
},{
nimi: "kohde 2",
linkki: "/item2"
},{
nimi: "kohde 3",
linkki: "/item3"
},{
nimi: "kohde 4",
linkki: "/item4"
}]
},{
otsikko: "Sarake 2",
resurssit: [{
nimi: "kohde 5",
linkki: "/item5"
},{
nimi: "kohde 6",
linkki: "/item6"
}]
},{
otsikko: "Sarake 3",
resurssit: [{
nimi: "kohde 7",
linkki: "/item7"
},{
nimi: "kohde 8",
linkki: "/item8"
}]
}];palata<SimpleReactFooter
kuvaus={kuvaus}
otsikko={title}
sarakkeet={sarakkeet}
/>;
}
viedäoletuksena Alatunniste;
Tämä koodi luo alatunnisteen, joka näyttää tältä:
Tämä esimerkki tuo SimpleReactFooter-komponentin ja määrittelee toiminnallisen komponentin nimeltä Footer. Footer-komponentin sisällä se käyttää SimpleReactFooter-komponenttia välittäen sille kolme rekvisiittaa: otsikko, kuvaus ja sarakkeet.
Moduuli näyttää otsikon ehdotuksen alatunnisteen yläosassa. Sen alapuolella se näyttää otsikon rekvisiitin. Lopuksi sarakkeiden tuki on joukko objekteja, jotka määrittelevät alatunnisteen sarakkeiden sisällön.
Komponenttien räätälöinti erilaisilla varusteilla
Otsikon ja kuvauksen lisäksi yksinkertainen reagointi-alatunnistemoduuli tarjoaa useita rekvisiitta, jonka voit siirtää komponenttiin. Voit käyttää niitä mukauttaaksesi alatunnisteen ulkoasua ja toimintoja.
Tässä on luettelo kaikista simple-react-footer-moduulissa saatavilla olevista rekvisiittauksista:
- otsikko: Alatunnisteen otsikko.
- kuvaus: Alatunnisteen lyhyt kuvaus.
- sarakkeet: Objektien joukko, joka määrittää alatunnisteen sarakkeiden sisällön. Jokaisella objektilla tulee olla otsikkoominaisuus, joka määrittää sarakkeen otsikon, ja resurssiominaisuus, joka on joukko objekteja, joista jokainen edustaa sarakkeen resurssia. Jokaisella resurssiobjektilla tulee olla nimiominaisuus, joka määrittää resurssin nimen, ja linkkiominaisuus, joka määrittää linkin resurssiin.
- linkedin: Yrityksen tai organisaation LinkedIn-kahva.
- Facebook: Yrityksen tai organisaation Facebook-kahva.
- viserrys: Yrityksen tai organisaation Twitter-kahva.
- instagram: Yrityksen tai organisaation Instagram-kahva.
- youtube: Yrityksen tai organisaation YouTube-kahva.
- pinterest: Yrityksen tai organisaation Pinterest-kahva.
- tekijänoikeus: Alatunnisteen tekijänoikeusteksti.
- kuvakkeen väri: Alatunnisteen sosiaalisen median kuvakkeiden väri.
- taustaväri: Alatunnisteen taustaväri.
- fontin väri: Alatunnisteen fontin väri.
- copyrightColor: Alatunnisteen tekijänoikeustekstin kirjasinväri.
Tässä on esimerkki siitä, kuinka voit luoda mukautetun alatunnisteen React.js: ssä:
tuonti Reagoi alkaen'reagoi';
tuonti SimpleReactFooter alkaen"simple-react-footer";konst Alatunniste = () => {
// Määritä alatunnisteen tiedot
konst kuvaus = "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 otsikko = "Lorem Ipsum";konst sarakkeet = [{
otsikko: "Sarake 1",
resurssit: [{
nimi: "kohde 1",
linkki: "/item1"
},{
nimi: "kohde 2",
linkki: "/item2"
},{
nimi: "kohde 3",
linkki: "/item3"
},{
nimi: "kohde 4",
linkki: "/item4"
}]
},{
otsikko: "Sarake 2",
resurssit: [{
nimi: "kohde 5",
linkki: "/item5"
},{
nimi: "kohde 6",
linkki: "/item6"
}]
},{
otsikko: "Sarake 3",
resurssit: [{
nimi: "kohde 7",
linkki: "/item7"
},{
nimi: "kohde 8",
linkki: "/item8"
}]
}];palata<SimpleReactFooter
kuvaus={kuvaus}
otsikko={title}
sarakkeet={sarakkeet}
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"
tekijänoikeus ="musta"
iconColor="musta"
taustaväri="vaalean harmaa"
fontColor="musta"
copyrightColor="tummanharmaa"
/>;
}
viedäoletuksena Alatunniste;
Tässä esimerkissä käytetään kaikkia simple-react-footer -moduulissa saatavilla olevia rekvisiitta mukautetun alatunnisteen luomiseen. Koodi luo alatunnisteen, jossa on eri värejä ja erilaisia sosiaalisen median kuvakkeita:
Linkedin-, facebook-, twitter-, instagram-, youtube- ja pinterest-rekvisiitta määrittävät yrityksen tai organisaation sosiaalisen median kahvat. Jos toimitat nämä rekvisiitta, moduuli näyttää vastaavat sosiaalisen median kuvakkeet alatunnisteessa.
Tekijänoikeusehdotus määrittää alatunnisteen tekijänoikeustekstin. Moduuli näyttää tämän tekstin alatunnisteen alaosassa.
iconColor-, backgroundColor-, fontColor- ja copyrightColor-rekvisiitta muokkaa alatunnisteen ulkoasua.
Sen lisäksi, että responsiivinen alatunniste saa verkkosivustosi näyttämään hyvältä, se voi parantaa verkkosivustosi käyttökokemusta. Responsiivinen alatunniste varmistaa, että kaikki käyttäjät, riippumatta heidän käyttämänsä laitteesta, voivat käyttää alatunnistetta helposti.
