Für eine bessere Lesbarkeit sehen Sie sich diesen Beitrag an mittlere

Suchen Sie nach einem schnellen, einfachen, eleganten und ansprechenden Menü?
Hier ist eine Anleitung, wie Sie mit React und Tailwind ein ansprechendes Menü im Hamburger-Stil erstellen.
Wenn Sie direkt zum Code springen möchten, Hier ist die Verbindung

Ich nehme an, Sie haben bereits ein eigenes Reaktionsprojekt.
Wenn Sie dies nicht tun, können Sie schnell eines erstellen mit:

npx create-react-app folderWhereToSetUpTheReactProject

Tailwind CSS ist ein beliebtes UI-Framework, das das Hinzufügen von Stilen nur über HTML-Klassen ermöglicht.
Die Idee ist, dass es eine Klasse für jede CSS-Eigenschaft gibt, die Sie jemals brauchen werden, auf diese Weise brauchen Sie keinen Stil zu schreiben.

Haftungsausschluss: Persönliche Meinung voraus
Viele Leute verwenden diese Art von Frameworks mit der Idee, dass sie ihnen helfen, die Benutzeroberfläche schneller zu erstellen.
Ich habe das Gefühl, dass ich oft mehr Zeit brauche, um das Framework zu lernen, als das CSS selbst zu schreiben.
Außerdem muss ich, wenn ich auf ein Problem stoße, eine Lösung finden, die sich auf dieses spezifische Framework bezieht, wenn eine allgemeine Lösung vielleicht einfacher zu finden wäre.
Ich sage nicht, dass diese Frameworks schlecht sind. Es hängt weitgehend von den Projektanforderungen, dem Team, dem Qualifikationsniveau und so weiter ab.
Ich möchte nur darauf hinweisen, dass diese Frameworks nicht alle Ihre CSS- und Timing-Probleme auf magische Weise lösen. Berücksichtigen Sie, dass Sie noch Zeit brauchen werden, um das Framework zu lernen, und dass Sie immer noch ein anständiges Verständnis von CS haben müssen
Wie Rückenwind funktioniert

Von ihrer offiziellen Seite:

Tailwind CSS scannt alle Ihre HTML-Dateien, JavaScript-Komponenten und alle anderen Vorlagen nach Klassennamen, generiert die entsprechenden Stile und schreibt sie dann in eine statische CSS-Datei.

Grundsätzlich liest es jede Klasse, die in Html- oder JS-Dateien gefunden wird, generiert das CSS dafür und schreibt dann eine statische CSS-Datei.

Wenn wir also mit React arbeiten, bedeutet das, dass wir einfach Rückenwind konfigurieren, Klassen in JSX schreiben, eine Stildatei einbinden und alles wird gut funktionieren.

Tailwind CSS-Dokumentation ist gut gemacht und gibt uns verschiedene Anleitungen, um Tailwind in einer anderen Umgebung einzurichten. Für eine React-App können wir das Beispiel mit Create React App auswählen:Rückenwind docs

Was wir tun müssen, ist, zuerst alle erforderlichen Abhängigkeiten zu installieren und die erforderliche Konfigurationsdatei zu erstellen:

// Terminal
> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init

Wenn Sie Ihren Projektordner einchecken, sollten Sie jetzt eine tailwind.config.js Datei.
Zu dieser Datei fügen wir einen Pfad in der content: [] Array.
Speichern ./src/**/*.{js,jsx,ts,tsx} um Rückenwind anzuweisen, nach allen Dateien in der Datei zu suchen src Ordner, der hat js, jsx, ts, tsx Erweiterung.

// tailwind.config.js
module.exports = {  content: [
    './src/**/*.{js,jsx,ts,tsx}' 
  ],  theme: {  extend: {},  },  plugins: [],}

Zuletzt fügen Sie Tailwind-Anweisungen zu einer CSS-Datei hinzu.
Wenn Sie das Projekt mit CRA erstellt haben, können Sie dies der hinzufügen src/index.css.
Andernfalls müssen Sie diese Anweisungen nur zu jeder CSS-Datei hinzufügen, die Sie im Projekt haben. Es sollte ein übergeordneter CSS-Stil sein, also derjenige, der alle anderen enthält.
Diese Datei muss in index.js oder App.js oder wie auch immer Ihre App-Container-Komponente genannt wird, enthalten sein. Auf diese Weise sind wir sicher, dass alle Kinderkomponenten in Tailwind CSS enthalten sind.

// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Jetzt können Sie jeder Ihrer Komponenten einige Rückenwindklassen hinzufügen und sehen, ob sie richtig funktionieren:

// App.js

  Hello world!

und starten Sie dann einfach das Projekt

// Terminal
> npm start

Lassen Sie uns zunächst sehen, wie der HTML/Tailwind-Teil codiert ist, wir werden React später hinzufügen.

Hier ist also der Code, der das Hamburger-Symbol auf Mobilgeräten und die Menüelemente auf größeren Bildschirmen anzeigt.
In jeder Komponente, in der wir unser Menü anzeigen möchten, haben wir dieses JSX:

Die in Großbuchstaben geschriebenen Klassen sind nur ein Indikator, der von mir hinzugefügt wurde, um anzuzeigen, welches UI-Element dieses Element enthält.

Jede hier hinzugefügte Klasse ist eine bestimmte Tailwind-Klasse, die einen bestimmten Stil gibt: px-8 gibt horizontale Polsterung, mb-8 gibt den unteren Rand an, flex stellt die Anzeigeflexion ein und so weiter.
Dank dieser Klassen können wir das Mobil- und Desktop-Menü ausblenden und anzeigen:
In der Nähe von MOBILE-MENU sehen Sie lg:hidden, was bedeutet, dass Sie dieses DIV auf einem großen Bildschirm ausblenden möchten.
Im DESKTOP-MENU gibt es eine versteckte Klasse. Wenn nur der Klassenname ohne Mediaquery-Angabe ist, bedeutet dies, dass er bei 0px mit beginnt. Also mobil oder die kleinste Mediaquery.
Dann sagen wir lg:flex, um es auf einer größeren Medienabfrage anzuzeigen, genau dann, wenn wir das mobile Menü ausblenden.

Fügen wir nun Funktionen zum Öffnen und Schließen des mobilen Menüs hinzu.

Dazu müssen wir den useState-Hook verwenden.
Zuerst importiere ich es (Zeile 3), dann definiere ich den Wert und den Setter des Zustands und ich initiiere das isNavOpen mit dem Wert false – denn zunächst ist das mobile Menü geschlossen.
Dann schalte ich in Zeile 17 den Status bei jedem Klick um – immer wenn der Benutzer auf das Hamburger-Symbol klickt, möchte ich den booleschen Wert von true auf false und umgekehrt ändern. Wenn es also geschlossen ist, wird es geöffnet, wenn es offen ist, wird es geschlossen.
Zuletzt setze ich in Zeile 27 den Zustand isNavOpen auf false . Dies wird durch einen Klick des Benutzers auf das „X“-Symbol ausgelöst und zum Schließen des mobilen Menüs verwendet.
// vollständiger Code-Link

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;
      }
    `}
    
  );
}

Und hier ist es: Ein einfaches, sauberes Design, ein ansprechendes und funktionales Hamburger-Menü mit React- und Tailwind-Css-Framework!