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: