Многи модерни веб дизајни захтевају прилагодљиво подножје које изгледа добро и исправно функционише на свим уређајима. Реактивно подножје аутоматски прилагођава свој изглед и садржај тако да одговара величини екрана уређаја на којем се гледа.
Научите како да направите прилагодљиво подножје у Реацт.јс користећи модул симпле-реацт-фоотер.
Модул симпле-реацт-фоотер је лагана библиотека лака за коришћење која вам омогућава да креирате респонзивно подножје у Реацт.јс. Пружа скуп реквизита које можете користити да прилагодите изглед и функционалност вашег подножја.
Пре него што кренемо у креирање подножја помоћу модула симпле-реацт-фоотер, хајде да на кратко погледамо неке од његових кључних карактеристика:
- Прилагодљиви изглед: Модул симпле-реацт-фоотер вам омогућава да дефинишете број колона у вашем подножју, као и садржај сваке колоне.
- Нацрт са одзивом: Подножје аутоматски прилагођава свој изглед тако да одговара величини екрана уређаја на коме се гледа.
- Прилагодљиви изглед: Модул подножја једноставног реаговања пружа низ реквизита које можете да користите за прилагођавање изгледа вашег подножја, као што су боја позадине, боја фонта и боја иконе.
Сада када имате основно разумевање модула симпле-реацт-фоотер, хајде да видимо како га можете користити за креирање подножја у Реацт.јс.
Старт би креирање једноставне Реацт апликације. Затим можете користити модул симпле-реацт-фоотер да креирате подножје, као у овом примеру:
увоз Реаговати из'реаговати';
увоз СимплеРеацтФоотер из'симпле-реацт-фоотер';конст Подножје = () => {
// Дефинишите податке за подножје
конст опис = „Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит, сед до еиусмод темпор инцидидунт ут лаборе ет долоре магна аликуа. Ут еним ад миним вениам, куис ноструд екерцитатион улламцо лаборис ниси ут аликуип ек еа цоммодо цонсекуат.";
конст наслов = "Лорем Ипсум";конст колоне = [{
наслов: "Колона 1",
ресурси: [{
име: "Ставка 1",
линк: "/итем1"
},{
име: "Ставка 2",
линк: "/итем2"
},{
име: "Ставка 3",
линк: "/итем3"
},{
име: "Ставка 4",
линк: "/итем4"
}]
},{
наслов: "колона 2",
ресурси: [{
име: "Ставка 5",
линк: "/итем5"
},{
име: "Ставка 6",
линк: "/итем6"
}]
},{
наслов: "колона 3",
ресурси: [{
име: "Ставка 7",
линк: "/итем7"
},{
име: "Ставка 8",
линк: "/итем8"
}]
}];повратак<СимплеРеацтФоотер
десцриптион={опис}
титле={титле}
цолумнс={цолумнс}
/>;
}
извозУобичајено Фоотер;
Тај код ће креирати подножје које изгледа овако:
Овај пример увози компоненту СимплеРеацтФоотер и дефинише функционалну компоненту под називом Фоотер. Унутар компоненте подножја, користи компоненту СимплеРеацтФоотер, преносећи јој три реквизита: наслов, опис и колоне.
Модул приказује насловни реквизит на врху подножја. Испод тога је приказан насловни реквизит. Коначно, колоне проп је низ објеката који дефинишу садржај колона у подножју.
Прилагођавање компоненти различитим реквизитима
Поред реквизита за наслов и опис, модул једноставног реаговања у подножју нуди неколико реквизите које можете проследити компоненти. Можете их користити за прилагођавање изгледа и функционалности вашег подножја.
Ево листе свих реквизита доступних у модулу симпле-реацт-фоотер:
- наслов: Наслов подножја.
- Опис: Кратак опис подножја.
- колоне: Низ објеката који дефинише садржај колона у подножју. Сваки објекат треба да има својство наслова које специфицира наслов колоне и својство ресурса које је низ објеката, од којих сваки представља ресурс у колони. Сваки објекат ресурса треба да има својство наме које наводи име ресурса и својство везе које специфицира везу до ресурса.
- линкедин: ЛинкедИн ознака компаније или организације.
- Фејсбук: Фацебоок ознака компаније или организације.
- твиттер: Твитер руковалац компаније или организације.
- инстаграм: Инстаграм рукохват компаније или организације.
- ЈуТјуб: ИоуТубе ознака компаније или организације.
- пинтерест: Пинтерест руковалац компаније или организације.
- Ауторско право: Текст ауторских права за подножје.
- боја иконе: Боја икона друштвених медија у подножју.
- боја позадине: Боја позадине подножја.
- фонтБоја: Боја фонта подножја.
- цопиригхтБоја: Боја фонта текста заштићеног ауторским правима у подножју.
Ево примера како можете да користите све реквизите доступне у модулу симпле-реацт-фоотер да бисте креирали прилагођено подножје у Реацт.јс:
увоз Реаговати из'реаговати';
увоз СимплеРеацтФоотер из'симпле-реацт-фоотер';конст Подножје = () => {
// Дефинишите податке за подножје
конст опис = „Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит, сед до еиусмод темпор инцидидунт ут лаборе ет долоре магна аликуа. Ут еним ад миним вениам, куис ноструд екерцитатион улламцо лаборис ниси ут аликуип ек еа цоммодо цонсекуат.";
конст наслов = "Лорем Ипсум";конст колоне = [{
наслов: "Колона 1",
ресурси: [{
име: "Ставка 1",
линк: "/итем1"
},{
име: "Ставка 2",
линк: "/итем2"
},{
име: "Ставка 3",
линк: "/итем3"
},{
име: "Ставка 4",
линк: "/итем4"
}]
},{
наслов: "колона 2",
ресурси: [{
име: "Ставка 5",
линк: "/итем5"
},{
име: "Ставка 6",
линк: "/итем6"
}]
},{
наслов: "колона 3",
ресурси: [{
име: "Ставка 7",
линк: "/итем7"
},{
име: "Ставка 8",
линк: "/итем8"
}]
}];повратак<СимплеРеацтФоотер
десцриптион={опис}
титле={титле}
цолумнс={цолумнс}
линкедин="лорем_ипсум_он_линкедин"
фацебоок="лорем_ипсум_он_фб"
твиттер="лорем_ипсум_он_твиттер"
инстаграм="лорем_ипсум_ливе"
иоутубе="УЦФт6ТСФ464Ј8К82кеА?"
пинтерест="лорем_ипсум_цоллецтионс"
цопиригхт="црн"
ицонЦолор="црн"
бацкгроундЦолор="светло сива"
фонтЦолор="црн"
цопиригхтЦолор="тамно сива"
/>;
}
извозУобичајено Фоотер;
Овај пример користи све реквизите доступне у модулу симпле-реацт-фоотер за креирање прилагођеног подножја. Код ће креирати подножје са различитим бојама и разним иконама друштвених медија:
Линкедин, фацебоок, твиттер, инстаграм, јутјуб и пинтерест реквизити одређују управљање друштвеним медијима компаније или организације. Ако обезбедите ове реквизите, модул приказује одговарајуће иконе друштвених медија у подножју.
Опција о ауторским правима специфицира текст о ауторским правима за подножје. Модул приказује овај текст на дну подножја.
ИцонЦолор, бацкгроундЦолор, фонтЦолор и цопиригхтЦолор реквизити прилагођавају изглед подножја.
Осим што ће ваша веб локација изгледати добро, прилагодљиво подножје може побољшати корисничко искуство ваше веб странице. Прилагодљиво подножје обезбеђује да сви корисници, без обзира на уређај који користе, могу лако да приступе и користе подножје.
