Навигациони мени бочне траке обично се састоји од вертикалне листе веза. Можете креирати скуп веза у Реацт-у користећи реацт-роутер-дом.
Пратите ове кораке да бисте креирали Реацт бочни навигациони мени са везама које садрже иконе корисничког интерфејса материјала. Везе ће приказати различите странице када кликнете на њих.
Креирање Реацт апликације
Ако већ имате а Реацт пројекат, слободно пређите на следећи корак.
Можете користити команду цреате-реацт-апп да бисте брзо покренули и покренули Реацт. Инсталира све зависности и конфигурације за вас.
Покрените следећу команду да бисте креирали Реацт пројекат под називом реацт-сиденав.
нпк Креирај-реаговати-апликација реаговати-сиденав
Ово ће створити фасциклу реацт-сиденав са неким датотекама да бисте започели. Да бисте мало очистили ову фасциклу, идите до фасцикле срц и замените садржај Апп.јс овим:
увоз './Апп.цсс';функцијаАпликација() {
повратак (
<див цлассНаме="Апликација"></div>
);
}
извозУобичајено Апликација;
Креирање компоненте за навигацију
Компонента за навигацију коју ћете креирати ће изгледати овако:
Прилично је једноставно, али када завршите, требало би да будете у могућности да га модификујете тако да одговара вашим потребама. Можете да скупите компоненту за навигацију помоћу иконе двоструке стрелице на врху:
Започните креирањем несажетог приказа. Осим иконе стрелице, бочна трака садржи листу ставки. Свака од ових ставки има икону и неки текст. Уместо да понављате креирање елемента за сваки, можете да ускладиштите податке за сваку ставку у низу, а затим да итерирате преко њега користећи функцију мапе.
Да бисте демонстрирали, направите нову фасциклу под називом либ и додајте нову датотеку под називом навДата.јс.
увоз ХомеИцон из '@муи/ицонс-материал/Хоме';
увоз ТравелЕкплореИцон из '@муи/ицонс-материал/ТравелЕкплоре';
увоз БарЦхартИцон из '@муи/ицонс-материал/БарЦхарт';
увоз СеттингсИцон из '@муи/ицонс-материал/Сеттингс';
извозконст навДата = [
{
ид: 0,
икона: <ХомеИцон/>,
текст: "Кућа",
линк: "/"
},
{
ид: 1,
икона: <ТравелЕкплореИцон/>,
текст: "Истражите",
линк: "истражити"
},
{
ид: 2,
икона: <БарЦхартИцон/>,
текст: "Статистика",
линк: "статистика"
},
{
ид: 3,
икона: <Икона подешавања/>,
текст: "Подешавања",
линк: "подешавања"
}
]
Горе коришћене иконе су из библиотеке Материал УИ, па је прво инсталирајте помоћу ове команде:
нпм инсталл @муи/material @емотион/react @емотион/styled
нпм инсталл @муи/icons-material
Затим креирајте фасциклу под називом Компоненте и додајте нову компоненту под називом Сиденав.јс.
У овој датотеци увезите навДата из ../либ и креирајте скелет за Сиденав функција:
// У Сиденав.јс
увоз {навДата} из "../либ/навДата";
извозУобичајенофункцијаСиденав() {
повратак (
<див>
</div>
)
}
Да бисте креирали везе, модификујте див елемент у овој компоненти на ово:
<див>
<дугме цлассНаме={стилес.менуБтн}>
<ТастатураДоублеАрровЛефтИцон />
</button>
{навДата.мап (ставка =>{
повратак <див кључ={итем.ид} цлассНаме={стилес.сидеитем}>
{итем.ицон}
<спан цлассНаме={стилес.линкТект}>{итем.тект}</span>
</div>
})}
</div>Ова компонента креира везу за навигацију која садржи икону и текст везе за сваку итерацију у функцији мапе.
Елемент дугмета садржи икону стрелице налево из библиотеке корисничког интерфејса материјала. Увезите га на врх компоненте користећи овај код.
увоз КеибоардДоублеАрровЛефтИцон из '@муи/ицонс-материал/КеибоардДоублеАрровЛефт';
Можда сте такође приметили да имена класа упућују на објекат стилова. То је зато што овај водич користи ЦСС модуле. ЦСС модули вам омогућавају да креирате стилове локалног опсега у Реацт-у. Не морате ништа да инсталирате или конфигуришете ако сте користили цреате-реацт-апп да покренете овај пројекат.
У фасцикли Компоненте креирајте нову датотеку под називом сиденав.модуле.цсс и додајте следеће:
.сиденав {
ширина: 250пк;
прелаз: ширина 0.3слакоћа уласка;
висина: 100вх;
боја позадине: ргб (10,25,41);
паддинг-топ: 28пк;
}.сиденавЦлосед {
саставља: сиденав;
прелаз: ширина 0.3слакоћа уласка;
ширина: 60пк
}.сидеитем {
дисплеј: флек;
алигн-итемс: центар;
паддинг: 10пк 20пк;
курсор: показивач;
боја: #Б2БАЦ2;
текст-декорација: нема;
}.линкТект {
паддинг-лефт: 16пк;
}.линкТектЦлосед {
саставља: линкТект;
видљивост: скривена;
}.сидеитем:лебдети {
боја позадине: #244ф7д1ц;
}
.менуБтн {
поравнајте-селф: центар;
алигн-селф: флек-почетак;
оправдати се: флек-крај;
боја: #Б2БАЦ2;
боја позадине: транспарентна;
граница: нема;
курсор: показивач;
паддинг-лефт: 20пк;
}
Подешавање Реацт рутера
Елементи див које враћа функција мапе треба да буду везе. У Реацт-у можете креирати везе и руте користећи реацт-роутер-дом.
У терминалу инсталирајте реацт-роутер-дом преко нпм-а.
нпм инсталл реацт-роутер-дом@најновије
Ова команда инсталира најновију верзију реацт-роутер-дом.
У Индек.јс, умотајте компоненту апликације са рутером.
увоз Реаговати из 'реаговати';
увоз РеацтДОМ из 'реацт-дом/цлиент';
увоз Апликација из './Апликација';
увоз {БровсерРоутер} из 'реаговати-рутер-дом';
конст роот = РеацтДОМ.цреатеРоот(документ.гетЕлементБиИд('роот'));
корен.дати, пружити(
<Реаговати. СтрицтМоде>
<БровсерРоутер>
<Апликација />
</BrowserRouter>
</React.StrictMode>
);
Затим у Апп.јс додајте своје руте.
увоз {
БровсерРоутер,
руте,
Рута,
} од "реаговати-рутер-дом";увоз './Апп.цсс';
увоз Сиденав из './Цомпонентс/Сиденав';
увоз Истражите из "./Пагес/Екплоре";
увоз Кућа из "./Пагес/Хоме";
увоз Подешавања из "./Пагес/Сеттингс";
увоз Статистика из "./Пагес/Статистицс";
функцијаАпликација() {
повратак (
<див цлассНаме="Апликација">
<Сиденав/>
<главни>
<Руте>
<Путања руте="/" елемент={<Кућа />}/>
<Путања руте="/explore" елемент={<Истражи />} />
<Путања руте="/statistics" елемент={<Статистика />}/>
<Путања руте="/settings" елемент={<Подешавања />} />
</Routes>
</main>
</div>
);
}
извозУобичајено Апликација;
Измените Апп.цсс овим стиловима.
тело {
маргина: 0;
паддинг: 0;
}.Апликација {
дисплеј: флек;
}
главни {
паддинг: 10пк;
}
Свака рута враћа другу страницу у зависности од УРЛ-а који је прослеђен на реквизити за стазу. Направите нову фасциклу под називом Странице и додајте четири компоненте — страницу Почетна, Истражите, Статистика и Подешавања. Ево примера:
извозУобичајенофункцијаКућа() {
повратак (
<див>Кућа</div>
)
}
Ако посетите /хоме путању, требало би да видите „Хоме“.
Везе на бочној траци треба да воде до одговарајуће странице када кликнете на њих. У Сиденав.јс, измените функцију мапе тако да користи компоненту НавЛинк из реацт-роутер-дом уместо елемента див.
{навДата.мап (ставка => {
повратак <НавЛинк кључ={итем.ид} цлассНаме={стилес.сидеитем} то={итем.линк}>
{итем.ицон}
<спан цлассНаме={стилес.линкТект}>{итем.тект}</span>
</NavLink>
})}
Не заборавите да увезете НавЛинк на врху датотеке.
увоз { НавЛинк } из "реаговати-рутер-дом";
НавЛинк прима УРЛ путању за везу преко то проп.
До ове тачке, навигациона трака је отворена. Да бисте га учинили склопивим, можете променити његову ширину променом ЦСС класе када корисник кликне на дугме са стрелицом. Затим можете поново променити ЦСС класу да бисте је отворили.
Да бисте постигли ову функцију пребацивања, морате знати када је бочна трака отворена и затворена.
За ово користите куку усеСтате. Ово Реаговати кука омогућава вам да додате и пратите стање у функционалној компоненти.
У сидеНав.јс направите куку за отворено стање.
конст [опен, сетопен] = усеСтате(истинито)
Иницијализујте отворено стање на тачно, тако да ће бочна трака увек бити отворена када покренете апликацију.
Затим креирајте функцију која ће променити ово стање.
конст тогглеОпен = () => {
сетопен(!опен)
}
Сада можете користити отворену вредност за креирање динамичких ЦСС класа попут ове:
<див цлассНаме={отворено? стилес.сиденав: стилес.сиденавЦлосед}>
<дугме цлассНаме={стилес.менуБтн} онЦлицк={тогглеОпен}>
{отворено? <ТастатураДоублеАрровЛефтИцон />: <КеибоардДоублеАрровРигхтИцон />}
</button>
{навДата.мап (ставка =>{
повратак <НавЛинк кључ={итем.ид} цлассНаме={стилес.сидеитем} то={итем.линк}>
{итем.ицон}
<спан цлассНаме={отворено? стилес.линкТект: стилес.линкТектЦлосед}>{итем.тект}</span>
</NavLink>
})}
</div>
Имена ЦСС класа која се користе биће одређена отвореним стањем. На пример, ако је опен тачно, спољашњи елемент див ће имати име класе сиденав. У супротном, класа ће бити сиденавЦлосед.
Ово је исто за икону, која се мења у икону стрелице надесно када затворите бочну траку.
Не заборавите да га увезете.
увоз КеибоардДоублеАрровРигхтИцон из '@муи/ицонс-материал/КеибоардДоублеАрровРигхт';
Компонента бочне траке је сада склопива.
Узмите комплетан код из овога ГитХуб спремиште и пробајте сами.
Стилинг Реацт Цомпонентс
Реацт олакшава прављење склопиве компоненте за навигацију. Можете користити неке од алата које Реацт пружа као што је реацт-роутер-дом за руковање рутирањем и куке за праћење срушеног стања.
Такође можете користити ЦСС модуле за стилизовање компоненти, иако не морате. Користите их за креирање класа у локалном опсегу које су јединствене и које можете избацити из пакета ако се не користе.
