Animierte Hamburger-Menüsymbole für React

Blog

Animierte Hamburger-Menüsymbole für React

Animierte Hamburger-Menüsymbole für React

Animierte Hamburger-Menüsymbole für React

Hamburger Menüsymbole für React, mit CSS-gesteuerten Übergängen. Geschaffen, um so elegant und performant wie möglich zu sein. Das bedeutet keine JavaScript-Animationen, keine Übergänge auf nicht billige Immobilien und eine geringe Größe.

Installation

npm install hamburger-react

Größe

Wenn Sie einen Hamburger verwenden, werden Ihrem Bundle ~1,5 KB hinzugefügt (min + gzip).

Verwendungszweck

Besuchen Sie die Website für vollständige Dokumentation, API und Beispiele. Eine grundlegende Implementierung sieht wie folgt aus:

import Hamburger from 'hamburger-react' const [isOpen, setOpen] = useState(false)

Oder ohne Angabe Ihres eigenen Bundeslandes:

...} />

Noch eine Hamburger Bibliothek?

Jawohl. Seit der Kreation dieser Burger im Jahr 2015 sind viele ähnliche Burger erschienen, mit einem oder mehreren der folgenden Nachteile:

eckig aktuelles Datum abrufen
  • Animationen, die sich nicht natürlich anfühlen
  • Übergänge bei teuren Objekten (ruckelnde Animationen)
  • Keine React-Unterstützung
  • Größe (zusätzliche Abhängigkeiten neben React oder kein Baumzittern)
  • Nicht anpassbar oder zu anpassbar (keine sinnvollen Standardeinstellungen)
  • Zu viel tun

Barrierefreiheit

Es wird empfohlen, einen Tap/Click-Bereich von mindestens 48x48 Pixeln zu haben. Daher wird um das Symbol herum eine Auffüllung hinzugefügt, um eine Oberfläche mit genau dieser Größe zu erstellen.

Die Tastaturinteraktion wird mit dem |_+_| . bereitgestellt key, und das icon-Element hat die empfohlenen Barrierefreiheitsattribute (wie |_+_|). Sie können die |_+_| -Eigenschaft, um ein ARIA-Label für das Symbol bereitzustellen.

Unterstützung

Die Icons basieren auf Hooks und funktionieren mit React 16.8.0 („der mit Hooks“) oder höher.

Download-Details:

Autor: Luke

Python-Partition vs Split

Demo: https://hamburger-react.netlify.app/

Quellcode: https://github.com/luukdv/hamburger-react

#reagieren #reactjs #javascript