Ionic - Tabs

Ionic tabswerden meistens für die mobile Navigation verwendet. Das Styling ist für verschiedene Plattformen optimiert. Dies bedeutet, dass auf Android-Geräten Registerkarten oben auf dem Bildschirm platziert werden, während sie auf IOS unten angezeigt werden. Es gibt verschiedene Möglichkeiten, Registerkarten zu erstellen. In diesem Kapitel erfahren Sie ausführlich, wie Sie Registerkarten erstellen.

Einfache Registerkarten

Das Menü "Einfache Registerkarten" kann mit einem erstellt werden tabsKlasse. Für das innere Element, das diese Klasse verwendet, müssen wir hinzufügentab-itemElemente. Da normalerweise Registerkarten für die Navigation verwendet werden, werden wir verwenden<a>Tags für Registerkartenelemente. Das folgende Beispiel zeigt ein Menü mit vier Registerkarten.

<div class = "tabs">
   <a class = "tab-item">
      Tab 1
   </a>
	
   <a class = "tab-item">
      Tab 2
   </a>

   <a class = "tab-item">
      Tab 3
   </a>
</div>

Der obige Code erzeugt den folgenden Bildschirm:

Hinzufügen von Symbolen

Ionic bietet Klassen zum Hinzufügen von Symbolen zu Registerkarten. Wenn Ihre Registerkarten Symbole ohne Text enthalten sollen, atabs-icon-only Klasse sollte nach dem hinzugefügt werden tabsKlasse. Natürlich müssen Sie Symbole hinzufügen, die Sie anzeigen möchten.

<div class = "tabs tabs-icon-only">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
   </a>
</div>

Der obige Code erzeugt den folgenden Bildschirm:

Sie können auch Symbole und Text hinzufügen. Dastabs-icon-top und tabs-icon-leftsind Klassen, die das Symbol über bzw. auf der linken Seite platzieren. Die Implementierung ist die gleiche wie im obigen Beispiel. Wir fügen lediglich eine neue Klasse und einen neuen Text hinzu, die wir verwenden möchten. Das folgende Beispiel zeigt Symbole über dem Text.

<div class = "tabs tabs-icon-top">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
      Tab 1
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
      Tab 2
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
      Tab 3
   </a>
</div>

Der obige Code erzeugt den folgenden Bildschirm:

Gestreifte Tabs

Gestreifte Tabs können erstellt werden, indem ein Container um unsere Tabs mit dem hinzugefügt wird tabs-stripedKlasse. Diese Klasse ermöglicht die Verwendung vontabs-background und die tabs-color Präfixe zum Hinzufügen einiger ionischer Farben zum Registerkartenmenü.

Im folgenden Beispiel verwenden wir die tabs-background-positive (blaue) Klasse, um den Hintergrund unseres Menüs zu gestalten, und die tabs-color-light(weiße) Klasse zum Stylen der Registerkartensymbole. Beachten Sie den Unterschied zwischen der zweiten Registerkarte, die aktiv ist, und den beiden anderen, die nicht aktiv sind.

<div class = "tabs-striped tabs-background-positive tabs-color-light">
   <div class = "tabs">
      <a class = "tab-item">
         <i class = "icon ion-home"></i>
      </a>
		
      <a class = "tab-item active">
         <i class = "icon ion-star"></i>
      </a>
		
      <a class = "tab-item">
         <i class = "icon ion-planet"></i>
      </a>
   </div>
</div>

Der obige Code erzeugt den folgenden Bildschirm: