Ionic - Fußzeile

Ionic footerwird am unteren Rand des App-Bildschirms platziert. Das Arbeiten mit Fußzeilen entspricht fast dem Arbeiten mit Kopfzeilen.

Fußzeile hinzufügen

Die Hauptklasse für ionische Fußzeilen ist bar(das gleiche wie Header). Wenn Sie Ihren Bildschirmen eine Fußzeile hinzufügen möchten, müssen Sie diese hinzufügenbar-footer Klasse zu Ihrem Element nach dem Haupt barKlasse. Da wir unsere Fußzeile auf jedem Bildschirm in der App verwenden möchten, fügen wir sie der hinzubody des index.htmlDatei. Wir werden auch Titel für unsere Fußzeile hinzufügen.

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

Der obige Code erzeugt den folgenden Bildschirm:

Fußzeilenfarben

Wenn Sie Ihre Fußzeile stylen möchten, müssen Sie nur die entsprechende Farbklasse hinzufügen. Wenn Sie Ihre Elemente formatieren, müssen Sie Ihre Hauptelementklasse als Präfix zu Ihrer Farbklasse hinzufügen. Da wir eine Fußzeilenleiste gestalten, lautet die Präfixklasse abar und die Farbklasse, die wir in diesem Beispiel verwenden möchten, ist assertive (rot).

<div class = "bar bar-footer bar-assertive">
   <h1 class = "title">Footer</h1>
</div>

Der obige Code erzeugt den folgenden Bildschirm:

Sie können eine der folgenden neun Klassen verwenden, um Ihrer App-Fußzeile eine Farbe Ihrer Wahl zu geben:

Farbklasse Beschreibung Ergebnis
Balkenlicht Zur Verwendung für weiße Farbe  
bar-stabil Zur Verwendung für hellgraue Farbe  
bar-positiv Für blaue Farbe zu verwenden  
bar-ruhig Zur Verwendung für hellblaue Farbe  
Balkenausgeglichen Zur Verwendung für grüne Farbe  
bar erregt Zur Verwendung für gelbe Farbe  
bar-durchsetzungsfähig Für rote Farbe zu verwenden  
Bar-Royal Zur Verwendung für violette Farben  
bar-dunkel Zur Verwendung für schwarze Farbe  

Fußzeilenelemente

Fußzeilen können Elemente enthalten. Meistens müssen Sie Schaltflächen mit Symbolen in einer Fußzeile hinzufügen.

Die erste hinzugefügte Schaltfläche befindet sich immer in der linken Ecke. Der letzte wird rechts platziert. Die Schaltflächen dazwischen werden neben der ersten auf der linken Seite Ihrer Fußzeile gruppiert. Im folgenden Beispiel können Sie auch feststellen, dass wir die verwendenicon Klasse, um Symbole über den Schaltflächen hinzuzufügen.

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon"></button>
   <button class = "button icon ion-home"></button>
   <button class = "button icon ion-star"></button>
   <button class = "button icon ion-checkmark-round"></button>
</div>

Der obige Code erzeugt den folgenden Bildschirm:

Wenn Sie Ihre Schaltfläche nach rechts verschieben möchten, können Sie sie hinzufügen pull-right Klasse.

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon pull-right"></button>
</div>

Der obige Code erzeugt den folgenden Bildschirm: