Ich habe eine einfache Ionen-Registerkarte erstellt, auf der meine Symbole oben auf dem Bildschirm angezeigt werden. Ich habe versucht, es in eine Ionenfußleiste zu wickeln, um es ohne Erfolg am unteren Bildschirmrand zu platzieren. Die Registerkarten verschwinden dabei. Wie soll ich das gewünschte Aussehen erzielen?
<ion-footer-bar>
<ion-tabs class="tabs-icon-only tabs-stable">
...
</ion-tabs>
</ion-footer-bar>
Die ionicFramework Registerkarten am unteren Rand des Bildschirms , um Platz für Android - Geräte einfach Ihre öffnen app.js Datei und unter angular.module die folgenden Codezeilen hinzu:
Hoffe das wird helfen.
quelle
Update für Ionic 2 (sauberere / verbesserte Syntax):
In app.js:
Siehe Konfigurationen
quelle
Das Platzieren in Ihrer app.js erledigt die Arbeit.
Ionic berücksichtigt automatisch Plattformkonfigurationen, um beispielsweise den zu verwendenden Übergangsstil und die Frage anzupassen, ob oben oder unten Registerkartensymbole angezeigt werden sollen.
Beispiel: Bei Registerkarten wird für iOS standardmäßig unten und Android oben angezeigt.
Hinweis 1 : Wenn eine Plattform nicht iOS oder Android ist, wird standardmäßig iOS verwendet
Hinweis 2 : Wenn Sie in einem Desktop-Browser entwickeln, werden iOS-Standardkonfigurationen verwendet
quelle
Neben der Datei app.js müssen Sie den $ ionicConfigProvider in das .config-Modul einfügen und $ ionicConfigProvider.tabs.position ('bottom') hinzufügen.
quelle
So platzieren Sie in Ionic 2 ionische Tabs am unteren Bildschirmrand
Für die aktuelle Version ionic 2.0.0-beta.10.
In app.ts:
Siehe Konfig
Für die bald erscheinende ionische Version 2.0.0-beta.11
In app.ts:
Konfig
quelle
Update für Ionic 2 und Ionic 3+:
Sie haben zwei Methoden, um die Position der Registerkartenleiste zu ändern:
Methode 1: Verwenden Sie die
tabsPlacement
Eigenschaft von<ion-tabs>
Methode 2: Ändern Sie die Konfiguration in
app.module.ts
Siehe die Dokumente
quelle
ion-segment-button.segment-button { border-top-style: solid; border-bottom-width: 0; }
macht den Trick, aber für die Rahmenbreite habe ich keine andere Möglichkeit gefunden, als sie explizit im style-Attribut des Elements auf 2px zu setzen. Etwas anderes überschreibt es immer mit 3px, selbst wenn es in Chrome auf das Element gesetzt wird und mit! Wichtig im Stylesheet, scheint das nicht zu übertreffen.quelle