Менюто за навигация в страничната лента обикновено се състои от вертикален списък с връзки. Можете да създадете набор от връзки в React с помощта на react-router-dom.
Следвайте тези стъпки, за да създадете странично навигационно меню на React с връзки, съдържащи материални икони на потребителския интерфейс. Връзките ще изобразяват различни страници, когато щракнете върху тях.
Създаване на React приложение
Ако вече имате a Проект React, не се колебайте да преминете към следващата стъпка.
Можете да използвате командата create-react-app, за да започнете бързо да работите с React. Той инсталира всички зависимости и конфигурация вместо вас.
Изпълнете следната команда, за да създадете проект на React, наречен react-sidenav.
npx създавам-react-app react-sidenav
Това ще създаде папка react-sidenav с някои файлове, за да започнете. За да почистите малко тази папка, отидете до папката src и заменете съдържанието на App.js с това:
импортиране './App.css';функцияПриложение() {
връщане (
<div className="Приложение"></div>
);
}
износпо подразбиране Приложение;
Създаване на навигационния компонент
Навигационният компонент, който ще създадете, ще изглежда така:
Това е доста просто, но след като приключите, трябва да можете да го промените, за да отговаря на вашите нужди. Можете да свиете навигационния компонент, като използвате иконата с двойна стрелка в горната част:
Започнете със създаване на несвит изглед. Освен иконата със стрелка, страничната лента съдържа списък с елементи. Всеки от тези елементи има икона и някакъв текст. Вместо многократно да създавате елемент за всеки, можете да съхранявате данните за всеки елемент в масив и след това да го обхождате с помощта на функция за карта.
За да демонстрирате, създайте нова папка, наречена lib, и добавете нов файл, наречен navData.js.
импортиране HomeIcon от '@mui/icons-material/Начало';
импортиране TravelExploreIcon от '@mui/icons-material/TravelExplore';
импортиране BarChartIcon от '@mui/icons-material/BarChart';
импортиране Икона за настройки от '@mui/icons-material/Настройки';
износконст navData = [
{
id: 0,
икона: <HomeIcon/>,
текст: "У дома",
връзка: "/"
},
{
id: 1,
икона: <TravelExploreIcon/>,
текст: "Разгледайте",
връзка: "изследвайте"
},
{
ID: 2,
икона: <BarChartIcon/>,
текст: "Статистика",
връзка: "статистика"
},
{
ID: 3,
икона: <Икона за настройки/>,
текст: "Настройки",
връзка: "настройки"
}
]
Иконите, използвани по-горе, са от библиотеката Material UI, така че първо я инсталирайте, като използвате тази команда:
npm инсталирайте @mui/material @емоция/react @емоция/styled
npm инсталирайте @mui/icons-material
След това създайте папка, наречена Компоненти и добавете нов компонент, наречен Sidenav.js.
В този файл импортирайте navData от ../lib и създайте скелета за Sidenav функция:
// В Sidenav.js
импортиране {navData} от "../lib/navData";
износпо подразбиранефункцияSidenav() {
връщане (
<див>
</div>
)
}
За да създадете връзките, променете елемента div в този компонент на следното:
<див>
<бутон className={styles.menuBtn}>
<KeyboardDoubleArrowLeftIcon />
</button>
{navData.map (елемент =>{
връщане <div ключ={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Този компонент създава навигационна връзка, съдържаща иконата и текста на връзката за всяка итерация във функцията за карта.
Елементът на бутона държи иконата със стрелка наляво от библиотеката Material UI. Импортирайте го в горната част на компонента, като използвате този код.
импортиране KeyboardDoubleArrowLeftIcon от '@mui/icons-material/KeyboardDoubleArrowLeft';
Може също да сте забелязали, че имената на класовете препращат към стилов обект. Това е така, защото този урок използва CSS модули. CSS модулите ви позволяват да създавате стилове с локален обхват в React. Не е необходимо да инсталирате или конфигурирате нищо, ако сте използвали create-react-app, за да стартирате този проект.
В папката Components създайте нов файл, наречен sidenav.module.css и добавете следното:
.sidenav {
ширина: 250px;
преход: ширина 0.3sлекота на влизане и излизане;
височина: 100vh;
цвят на фона: rgb (10,25,41);
подложка-отгоре: 28px;
}.sidenav Затворено {
съставя: страничнанав;
преход: ширина 0.3sлекота на влизане и излизане;
ширина: 60px
}.страничен елемент {
дисплей: гъвкав;
подравняване на елементи: център;
подложка: 10px 20px;
курсор: показалец;
цвят: #B2BAC2;
текст-декорация: няма;
}.linkText {
padding-left: 16px;
}.linkTextClosed {
съставя: linkText;
видимост: скрита;
}.страничен елемент:задръжте {
Цвят на фона: #244f7d1c;
}
.menuBtn {
подравнявам-себе си: център;
align-self: flex-започнете;
justify-self: flex-край;
цвят: #B2BAC2;
цвят на фона: прозрачен;
граница: няма;
курсор: показалец;
padding-left: 20px;
}
Настройване на React Router
Елементите div, върнати от функцията map, трябва да бъдат връзки. В React можете да създавате връзки и маршрути с помощта на react-router-dom.
В терминала инсталирайте react-router-dom чрез npm.
npm инсталирате реагира-рутер-дом@последен
Тази команда инсталира най-новата версия на react-router-dom.
В Index.js обвийте компонента на приложението с рутера.
импортиране Реагирайте от 'реагира';
импортиране ReactDOM от 'react-dom/клиент';
импортиране Приложение от './Приложение';
импортиране {BrowserRouter} от 'react-router-dom';
конст корен = ReactDOM.createRoot(документ.getElementById('root'));
корен.render(
<Реагирайте. Строг режим>
<BrowserRouter>
<Приложение />
</BrowserRouter>
</React.StrictMode>
);
След това в App.js добавете вашите маршрути.
импортиране {
BrowserRouter,
маршрути,
маршрут,
} от "реагират-рутер-дом";импортиране './App.css';
импортиране Sidenav от './Components/Sidenav';
импортиране Разгледайте от "./Pages/Explore";
импортиране У дома от "./Страници/Начало";
импортиране Настройки от "./Страници/Настройки";
импортиране Статистика от "./Страници/Статистика";
функцияПриложение() {
връщане (
<div className="Приложение">
<Sidenav/>
<основен>
<Маршрути>
<Път на маршрута="/" елемент={<У дома />}/>
<Път на маршрута="/explore" елемент={<Разгледайте />} />
<Път на маршрута="/statistics" елемент={<Статистика />}/>
<Път на маршрута="/settings" елемент={<Настройки />} />
</Routes>
</main>
</div>
);
}
износпо подразбиране Приложение;
Променете App.css с тези стилове.
тяло {
марж: 0;
подплата: 0;
}.App {
дисплей: гъвкав;
}
основен {
подложка: 10px;
}
Всеки маршрут връща различна страница в зависимост от URL адреса, подаден на подпори за път. Създайте нова папка, наречена „Страници“, и добавете четири компонента — страницата „Начало“, „Изследване“, „Статистика“ и „Настройки“. Ето един пример:
износпо подразбиранефункцияУ дома() {
връщане (
<див>У дома</div>
)
}
Ако посетите пътеката /home, трябва да видите „Начало“.
Връзките в страничната лента трябва да водят до съответната страница, когато щракнете върху тях. В Sidenav.js променете функцията map, за да използвате компонента NavLink от react-router-dom вместо елемента div.
{navData.map (елемент => {
връщане <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Не забравяйте да импортирате NavLink в горната част на файла.
импортиране { NavLink } от "react-router-dom";
NavLink получава URL пътя за връзката през to prop.
До този момент лентата за навигация е отворена. За да го направите сгъваем, можете да превключите ширината му, като промените CSS класа, когато потребител щракне върху бутона със стрелка. След това можете отново да промените CSS класа, за да го отворите.
За да постигнете тази функция за превключване, трябва да знаете кога страничната лента е отворена и затворена.
За целта използвайте куката useState. Това Реагирайте куката ви позволява да добавяте и проследявате състоянието във функционален компонент.
В sideNav.js създайте куката за отворено състояние.
конст [open, setopen] = useState(вярно)
Инициализирайте отвореното състояние на true, така че страничната лента винаги да бъде отворена, когато стартирате приложението.
След това създайте функцията, която ще превключва това състояние.
конст toggleOpen = () => {
setopen(!open)
}
Вече можете да използвате отворената стойност за създаване на динамични CSS класове като този:
<div className={open? styles.sidenav: styles.sidenavClosed}>
<бутон className={styles.menuBtn} onClick={toggleOpen}>
{отваряне? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />}
</button>
{navData.map (елемент =>{
връщане <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={open? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
Използваните имена на CSS класове ще се определят от отвореното състояние. Например, ако open е true, външният елемент div ще има име на клас sidenav. В противен случай класът ще бъде sidenavClosed.
Това е същото за иконата, която се променя на икона със стрелка надясно, когато затворите страничната лента.
Не забравяйте да го импортирате.
импортиране KeyboardDoubleArrowRightIcon от '@mui/icons-material/KeyboardDoubleArrowRight';
Компонентът на страничната лента вече може да се сгъва.
Вземете пълния код от това GitHub хранилище и опитайте сами.
Оформяне на React компоненти
React прави лесно изграждането на сгъваем навигационен компонент. Можете да използвате някои от инструментите, които React предоставя като react-router-dom, за да управлявате маршрутизирането и куките, за да следите свитото състояние.
Можете също да използвате CSS модули за стилизиране на компоненти, въпреки че не е нужно. Използвайте ги, за да създадете класове с локален обхват, които са уникални и които можете да изтриете от пакетните файлове, ако не се използват.
