Aby uzyskać lepszą czytelność, sprawdź ten post na średni
Szukasz szybkiego, prostego, stylowego i responsywnego menu?
Oto przewodnik, jak uzyskać responsywne menu w stylu hamburgera za pomocą React i Tailwind.
Jeśli chcesz przejść bezpośrednio do kodu, tu jest link
Zakładam, że masz już własny projekt React.
Jeśli nie, możesz szybko utworzyć jeden za pomocą:
npx create-react-app folderWhereToSetUpTheReactProject
Tailwind Css to popularna platforma interfejsu użytkownika, która umożliwia dodawanie stylu za pomocą klas HTML.
Pomysł polega na tym, że istnieje klasa dla każdej właściwości css, której kiedykolwiek będziesz potrzebować, w ten sposób nie musisz pisać żadnego stylu.
Zastrzeżenie: Osobista opinia przed nami
Wiele osób korzysta z tego rodzaju frameworków z myślą, że pomagają im szybciej budować interfejs użytkownika.
Czuję, że często więcej czasu zajmuje mi nauczenie się frameworka, niż samodzielne napisanie css.
Ponadto, jeśli napotkam problem, muszę znaleźć rozwiązanie związane z tym konkretnym frameworkiem, kiedy może łatwiej byłoby znaleźć ogólne rozwiązanie.
Nie mówię, że te frameworki są złe. W dużej mierze zależy to od wymagań projektu, zespołu, poziomu umiejętności i tak dalej.
Chciałbym tylko doradzić, że te frameworki nie rozwiązują w magiczny sposób wszystkich problemów związanych z CSS i timingiem. Weź pod uwagę, że nadal będziesz potrzebować czasu na naukę frameworka i nadal będziesz potrzebować przyzwoitej wiedzy na temat CS
Jak działa Tailwind?
Z ich oficjalnej strony:
CSS Tailwind działa, skanując wszystkie Twoje pliki HTML, komponenty JavaScript i wszelkie inne szablony pod kątem nazw klas, generując odpowiednie style, a następnie zapisując je w statycznym pliku CSS.
Zasadniczo odczytuje każdą klasę znalezioną w plikach HTML lub JS, generuje dla niej css, a następnie zapisuje statyczny plik css.
Dlatego jeśli pracujemy z Reactem, oznacza to, że możemy po prostu skonfigurować tailwind, napisać klasy w JSX, dołączyć jeden plik stylu i wszystko będzie działać poprawnie.
Dokumentacja Tailwind Css jest dobrze wykonana i zawiera różne przewodniki dotyczące konfigurowania Tailwind w innym środowisku. W przypadku aplikacji React możemy wybrać przykład z Create React App:dokumenty dotyczące tylnego wiatru
Musimy najpierw zainstalować wszystkie wymagane zależności i utworzyć wymagany plik konfiguracyjny:
// Terminal
> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init
Jeśli zaewidencjonujesz swój folder projektu, powinieneś mieć teraz tailwind.config.js plik.
Do tego pliku dodajemy ścieżkę w content: [] szyk.
Dodaj ./src/**/*.{js,jsx,ts,tsx} aby powiedzieć tailwindowi, aby przeskanował wszystkie pliki w src folder, który ma js, jsx, ts, tsx rozbudowa.
// tailwind.config.js
module.exports = { content: [
'./src/**/*.{js,jsx,ts,tsx}'
], theme: { extend: {}, }, plugins: [],}
Na koniec dodaj dyrektywy tailwind do pliku css.
Jeśli utworzyłeś projekt z CRA, możesz dodać to do src/index.css.
W przeciwnym razie wystarczy dodać te dyrektywy do dowolnego pliku css, który masz w projekcie. Powinien to być nadrzędny styl CSS, czyli taki, który zawiera wszystkie pozostałe.
Ten plik musi być dołączony do pliku index.js lub App.js lub niezależnie od tego, jak wywoływany jest komponent kontenera aplikacji. W ten sposób mamy pewność, że wszystkie komponenty dla dzieci są zawarte w Tailwind Css.
// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Teraz możesz dodać kilka klas tailwind do dowolnego komponentu i sprawdzić, czy działa poprawnie:
// App.js
Hello world!
a potem po prostu rozpocznij projekt
// Terminal
> npm start
Najpierw zobaczmy, jak kodowana jest część HTML/Tailwind, później dodamy do niej React.
Oto kod, który pokazuje ikonę hamburgera na telefonie komórkowym i pozycje menu na większych ekranach.
W dowolnym komponencie, który chcemy wyświetlić nasze menu, będziemy mieli ten JSX:
Klasy pisane wielkimi literami są tylko wskaźnikiem dodanym przeze mnie, aby pokazać, który element interfejsu użytkownika zawiera ten element.
Każda dodana tutaj klasa jest konkretną klasą Tailwind, która nadaje określony styl: px-8 daje poziome dopełnienie, mb-8 daje dolny margines, flex służy do ustawienia flexu wyświetlania i tak dalej.
Dzięki tym klasom możemy ukryć i pokazać menu mobilne i stacjonarne:
W pobliżu MOBILE-MENU możesz zobaczyć lg:hidden, co oznacza, że ukryj ten DIV na dużym ekranie.
W DESKTOP-MENU znajduje się ukryta klasa. Kiedy jest tylko nazwą klasy bez wskazania mediaquery, oznacza to, że zacznie się od 0px. Tak mobilne lub najmniejsze mediaquery.
Następnie mówimy lg:flex, aby pokazać go w większym mediaquery, dokładnie wtedy, gdy ukrywamy menu mobilne.
Dodajmy teraz funkcję otwierania i zamykania menu mobilnego.
Aby to zrobić, musimy użyć haka useState.
Najpierw importuję go (linia 3), potem określam wartość i ustawiacz stanu oraz inicjuję isNavOpen z wartością false — ponieważ na początku menu mobilne jest zamknięte.
Następnie w wierszu 17 przełączam stan przy każdym kliknięciu — za każdym razem, gdy użytkownik kliknie ikonę hamburgera, chcę zmienić wartość logiczną z prawdy na fałsz i na odwrót. Więc jeśli jest blisko, otworzy się, jeśli jest otwarty, zamknie się.
Na koniec w linii 27 ustawiłem stan isNavOpen na false . Jest to wywoływane kliknięciem przez użytkownika ikony „X” i służy do zamykania mobilnego menu.
// pełny link do kodu
import { useState } from "react"; // import state
export default function Header() {
const [isNavOpen, setIsNavOpen] = useState(false); // initiate isNavOpen state with false
return (
{`
.hideMenuNav {
display: none;
}
.showMenuNav {
display: block;
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background: white;
z-index: 10;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
`}
);
}
I oto jest: prosty, przejrzysty design, responsywne i funkcjonalne menu hamburgerowe z frameworkiem React i Tailwind Css!
