• Zuhause
  • Artikel
  • So erstellen Sie eine einfache Navigationskomponente für die Tab-Leiste
Veröffentlicht am 19-03-2019

So erstellen Sie eine einfache Navigationskomponente für die Tab-Leiste

Das Thema für Woche 3 meiner wöchentlichen Coding-Challenge lautet Navigation! Lernen wir ein bisschen mehr darüber.

Navigation

Eine Navigationskomponente ist auf einer Website von entscheidender Bedeutung, da Ihre Benutzer einfach durch Ihre Seiten navigieren können. Sie finden eine Navigationskomponente auch auf Websites mit einer einzigen Seite, auf denen Sie zu einem bestimmten Abschnitt der Seite springen können. Als Entwickler ist es daher sehr nützlich zu wissen, wie man diese Art von Komponenten erstellt.

In diesem Artikel habe ich beschlossen, eine Tab-Leisten-Navigation zu erstellen, aber Sie können jede beliebige Art von Navigation erstellen.

Ich wurde von diesem Entwurf von Aurelien Salomon inspiriert. Das Endergebnis dessen, was wir bauen werden, wird folgendermaßen aussehen:

Das HTML

Die HTML-Struktur wird einfach sein. Wir haben einen .tab-nav-Container und vier .tabs darin:

Wie Sie sehen können, enthält jedes .tab ein Symbol (von FontAwesome), den entsprechenden Text und einige zusätzliche Klassen, die verwendet werden, um den einzelnen Registerkarten spezifische Hintergrundfarben und Farbeigenschaften zuzuweisen. Auch die .active-Klasse, mit der die aktive Registerkarte formatiert wird. Ziemlich einfach, richtig?

Das CSS

Lassen Sie uns zunächst den .tab-nav-Container gestalten:

Hinweis: Wir haben eine feste Breite für den Container, da die Größe des Registers beim Ändern des aktiven Tabs nicht geändert werden soll, da jeder Tab einen Text enthalten kann, der entweder länger oder kürzer ist (z Profil (6 Buchstaben).

Wir verwenden flexbox, um die .tabs gleichmäßig im Container zu verteilen. Abgesehen davon glaube ich, dass das CSS ziemlich selbsterklärend ist.

Weiter… das Styling der .tab:

Einige Dinge hier zu beachten:

  1. Um einen reibungslosen Übergang zu gewährleisten, wenn wir die Registerkarte .active ändern, setzen wir eine Übergangseigenschaft für die TAB-Klasse.
  1. Standardmäßig hat das p-Tag in der .tab eine maximale Breite von 0 und seine Überlaufeigenschaft ist ausgeblendet. Dies liegt daran, dass wir den Text nur anzeigen möchten, wenn das TAB aktiv ist.
  1. Wir verwenden die benutzerdefinierten Farbklassen (.purple, .pink usw.), um die Registerkarten mit unterschiedlichen Farben zu versehen.

Stellen Sie sicher, dass es auch auf dem Handy gut aussieht

Wie Sie sehen, verkleinern wir den .tab-nav-Container, wenn die maximale Breite des Ansichtsfensters 450 Pixel beträgt und wir die Auffüllung verkleinern, damit sie kleiner wirkt.

Das JavaScript

Am Ende müssen wir in JS sicherstellen, dass, wenn der Benutzer auf eine andere .tab klickt, die .active-Klasse hinzugefügt und aus der vorherigen aktiven .tab entfernt wird:

Fazit

Diese Art der Tab-Leisten-Navigation wird hauptsächlich auf mobilen Geräten verwendet. Wenn Sie sie für eine mobile App wiederverwenden möchten, stellen Sie sicher, dass Sie den Container am unteren Bildschirmrand (mit position: fixed) positionieren und die zu füllende Breite neu berechnen in der gesamten Bildschirmbreite.

Im Codepen-Beispiel ändern wir auch die Hintergrundfarbe des Körpers, wenn auf eine andere Registerkarte geklickt wird. Dies ist nur zu visuellen Zwecken und hängt nicht genau mit dem Coding-Thema dieser Woche zusammen. Wenn Sie jedoch sehen möchten, wie ich das gemacht habe, überprüfen Sie den JS-Code im Stift (nur 2 zusätzliche Codezeilen).

Weitere Beispiele für diese Coding Challenge

In einem vorherigen Artikel habe ich gezeigt, wie Sie ein responsives Navigationsmenü erstellen. Sie können es auch ausprobieren, wenn Sie so etwas bauen wollen.

Wenn Sie dies nicht tun, lesen Sie die Regeln der wöchentlichen Codierungs-Challenge, wenn Sie an der Challenge teilnehmen möchten. Und warum würdest du nicht? Es ist eine großartige Möglichkeit, Ihre Codierfähigkeiten zu verbessern!

Viel Spaß beim Codieren!

Ursprünglich auf www.florin-pop.com veröffentlicht.

Siehe auch

Der einfachste Weg, um das Debian-Installationsprogramm für Ihre Anwendung zu erstellenLassen Sie uns süchtig machen: eine kurze Einführung in React Hooks