Veel moderne webontwerpen vereisen een responsieve voettekst die er goed uitziet en goed functioneert op alle apparaten. Een responsieve voettekst past de lay-out en inhoud automatisch aan de schermgrootte van het apparaat waarop het wordt bekeken aan.
Leer hoe u een responsieve voettekst maakt in React.js met behulp van de module simple-react-footer.
De simple-react-footer-module is een lichtgewicht en gebruiksvriendelijke bibliotheek waarmee u een responsive footer kunt maken in React.js. Het biedt een set rekwisieten die u kunt gebruiken om het uiterlijk en de functionaliteit van uw voettekst aan te passen.
Voordat we ingaan op het maken van een voettekst met behulp van de module simple-react-footer, gaan we eerst even kijken naar enkele van de belangrijkste functies:
- Aanpasbare lay-out: Met de simple-react-footer-module kunt u het aantal kolommen in uw footer definiëren, evenals de inhoud van elke kolom.
- Reagerend ontwerp: De voettekst past de lay-out automatisch aan de schermgrootte van het apparaat waarop het wordt bekeken aan.
- Aanpasbare uitstraling: De simple-react-footer-module biedt een reeks rekwisieten die u kunt gebruiken om het uiterlijk van uw footer aan te passen, zoals de achtergrondkleur, letterkleur en pictogramkleur.
Nu je een basiskennis hebt van de simple-react-footer module, laten we eens kijken hoe je deze kunt gebruiken om een footer te maken in React.js.
Start op een eenvoudige React-app maken. U kunt dan de module simple-react-footer gebruiken om een voettekst te maken, zoals in dit voorbeeld:
importeren Reageer van'Reageer';
importeren SimpleReactFooter van'simpele-reageer-voettekst';const Voettekst = () => {
// Definieer de gegevens voor de voettekst
const beschrijving = "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.";
const titel = "Lorem Ipsum";const kolommen = [{
titel: "Kolom 1",
bronnen: [{
naam: "Item 1",
koppeling: "/item 1"
},{
naam: "Artikel 2",
koppeling: "/item2"
},{
naam: "Artikel 3",
koppeling: "/item3"
},{
naam: "Artikel 4",
koppeling: "/item4"
}]
},{
titel: "Kolom 2",
bronnen: [{
naam: "Artikel 5",
koppeling: "/item5"
},{
naam: "Artikel 6",
koppeling: "/item6"
}]
},{
titel: "Kolom 3",
bronnen: [{
naam: "Artikel 7",
koppeling: "/item7"
},{
naam: "Artikel 8",
koppeling: "/item8"
}]
}];opbrengst<SimpleReactFooter
beschrijving={beschrijving}
titel={titel}
kolommen={kolommen}
/>;
}
exporterenstandaard Voettekst;
Die code maakt een voettekst die er als volgt uitziet:
In dit voorbeeld wordt de component SimpleReactFooter geïmporteerd en wordt een functionele component met de naam Footer gedefinieerd. Binnen de Footer-component gebruikt het de SimpleReactFooter-component en geeft het drie rekwisieten door: titel, beschrijving en kolommen.
De module geeft de titelprop bovenaan de voettekst weer. Daaronder wordt de titelprop weergegeven. Ten slotte is de kolommenprop een reeks objecten die de inhoud van de kolommen in de voettekst definiëren.
Componenten aanpassen met verschillende rekwisieten
Naast de titel- en beschrijvingsprops, biedt de simple-react-footer-module er verschillende rekwisieten die u aan het onderdeel kunt doorgeven. U kunt deze gebruiken om het uiterlijk en de functionaliteit van uw voettekst aan te passen.
Hier is een lijst met alle rekwisieten die beschikbaar zijn in de simple-react-footer-module:
- titel: De titel van de voettekst.
- beschrijving: Een korte beschrijving van de voettekst.
- kolommen: Een reeks objecten die de inhoud van de kolommen in de voettekst definieert. Elk object moet een eigenschap title hebben die de titel van de kolom specificeert en een eigenschap resources die een reeks objecten is, die elk een resource in de kolom vertegenwoordigen. Elk bronobject moet een naameigenschap hebben die de naam van de bron specificeert en een koppelingseigenschap die de koppeling naar de bron specificeert.
- gelinkt: De LinkedIn-naam van het bedrijf of de organisatie.
- facebook: De Facebook-handle van het bedrijf of de organisatie.
- twitteren: Het Twitter-handvat van het bedrijf of de organisatie.
- Instagram: Het Instagram-handvat van het bedrijf of de organisatie.
- YouTube: Het YouTube-handvat van het bedrijf of de organisatie.
- pinterest: Het Pinterest-handvat van het bedrijf of de organisatie.
- auteursrechten: De copyrighttekst voor de voettekst.
- iconKleur: De kleur van de social media iconen in de footer.
- Achtergrond kleur: De achtergrondkleur van de footer.
- lettertypeKleur: De letterkleur van de voettekst.
- copyrightKleur: De letterkleur van de copyrighttekst in de voettekst.
Hier is een voorbeeld van hoe je alle rekwisieten die beschikbaar zijn in de module simple-react-footer kunt gebruiken om een aangepaste voettekst te maken in React.js:
importeren Reageer van'Reageer';
importeren SimpleReactFooter van'simpele-reageer-voettekst';const Voettekst = () => {
// Definieer de gegevens voor de voettekst
const beschrijving = "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.";
const titel = "Lorem Ipsum";const kolommen = [{
titel: "Kolom 1",
bronnen: [{
naam: "Item 1",
koppeling: "/item 1"
},{
naam: "Artikel 2",
koppeling: "/item2"
},{
naam: "Artikel 3",
koppeling: "/item3"
},{
naam: "Artikel 4",
koppeling: "/item4"
}]
},{
titel: "Kolom 2",
bronnen: [{
naam: "Artikel 5",
koppeling: "/item5"
},{
naam: "Artikel 6",
koppeling: "/item6"
}]
},{
titel: "Kolom 3",
bronnen: [{
naam: "Artikel 7",
koppeling: "/item7"
},{
naam: "Artikel 8",
koppeling: "/item8"
}]
}];opbrengst<SimpleReactFooter
beschrijving={beschrijving}
titel={titel}
kolommen={kolommen}
linkedin="lorem_ipsum_op_linkedin"
facebook="lorem_ipsum_on_fb"
twitter="lorem_ipsum_op_twitter"
Instagram="lorem_ipsum_live"
youtube="UCFt6TSF464J8K82xeA?"
pinterest="lorem_ipsum_collections"
auteursrecht="zwart"
icoonKleur="zwart"
achtergrondkleur="lichtgrijs"
lettertypeKleur="zwart"
copyrightKleur="donker grijs"
/>;
}
exporterenstandaard Voettekst;
Dit voorbeeld gebruikt alle rekwisieten die beschikbaar zijn in de simple-react-footer-module om een aangepaste footer te maken. De code maakt een voettekst met verschillende kleuren en verschillende pictogrammen voor sociale media:
De rekwisieten van linkedin, facebook, twitter, instagram, youtube en pinterest specificeren de social media-handvatten van het bedrijf of de organisatie. Als u deze rekwisieten levert, geeft de module de bijbehorende social media-iconen weer in de voettekst.
De copyright-prop specificeert de copyright-tekst voor de voettekst. De module toont deze tekst onderaan de footer.
De iconColor-, backgroundColor-, fontColor- en copyrightColor-props passen het uiterlijk van de voettekst aan.
Naast dat je website er goed uitziet, kan een responsive footer de gebruikerservaring van je website verbeteren. Een responsieve voettekst zorgt ervoor dat alle gebruikers, ongeacht het apparaat dat ze gebruiken, de voettekst gemakkelijk kunnen openen en gebruiken.
