Wie platziere ich ionische Tabs am unteren Bildschirmrand?

97

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>
Italo Maia
quelle

Antworten:

175

Seit der Beta 14 von Ionic ( http://blog.ionic.io/the-final-beta/ ) gibt es einige Konfigurationsvariablen, die jetzt standardmäßig ihre Plattformwerte verwenden. Dies bedeutet, dass sie versuchen, sich entsprechend der Plattform zu verhalten dass sie darauf aufgebaut sind. Bei Registerkarten wird für iOS standardmäßig unten und Android oben angezeigt.

Sie können den Speicherort für alle Plattformen einfach "fest einstellen", indem Sie die tabs.positionFunktion in $ionicConfigProviderIhrer Konfigurationsfunktion wie folgt einstellen :

MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom'); // other values: top

}]);

Sie können Dokumentation überprüfen hier

jrl53
quelle
1
Nein, es funktioniert nicht. Auf den Browser-Registerkarten befinden sich unten, auf Android - oben
Toolkit
3
@ Toolkit Android-Registerkarten sollten laut Ionic-Dokumenten standardmäßig oben gerendert werden. Android-Richtlinien sollen die Verwendung von unteren Balken aufgrund der unten aufgeführten Standardaktionen des Betriebssystems vermeiden: developer.android.com/design/patterns/pure-android.html
Daniel Rochetti
@Toolkit Ich habe die Antwort bereits bearbeitet, um die Standardinformationen der Plattform zu korrigieren. Wenn Sie es anpassen möchten, ist der obige Code der richtige Weg. Ich würde Ihnen jedoch empfehlen, eine Änderung der Plattformstandards zu vermeiden. Sie folgen in der Regel den Plattformrichtlinien. =)
Daniel Rochetti
Gibt es eine Möglichkeit, mit dieser oder einer anderen Methode untere und obere Registerkarten zu erstellen? Ich habe versucht, einen anderen Status für meine Fußzeile zu erstellen, aber aus irgendeinem Grund wird er nicht auf dem Bildschirm gerendert, obwohl ich ihn auf der Registerkarte "Netzwerk" in meinem Browser sehe. Irgendwelche Gedanken dazu? Vielen Dank
Bill Pope
65

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:

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Hoffe das wird helfen.

Ahmed Na.
quelle
Wie erreiche ich Registerkarten oben und unten auf dem Bildschirm?
Syed Danish Ali
Ich denke, Sie könnten eine separate Vorlage für Registerkarten unten und oben erstellen
Ahmed Na.
Oh ja. Ich verstehe es. Ich bin ein Neuling in der Welt dieses Ions.
Syed Danish Ali
Dies sollte als Antwort markiert werden. Es ist einfach und direkt auf den Punkt, Sie haben meine Gegenstimme ...
Mbithy Mbithy
Während die Android-Registerkarte auf "unten" gesetzt ist, funktioniert sie gut gemäß Ihrem Code. Wenn Sie jedoch die Tastatur drücken, wird auch die Registerkarte mit der Registerkarte angezeigt. Gibt es eine Option, um es unten stabil zu halten, während Sie die Tastatur drücken?
Suthan M
9

Update für Ionic 2 (sauberere / verbesserte Syntax):

In app.js:

@App({
  ...
  config: {
    tabbarPlacement: 'bottom',
  }
})

Siehe Konfigurationen

Greg Blass
quelle
7

Das Platzieren in Ihrer app.js erledigt die Arbeit.

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

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

Raj Kumar
quelle
5

Neben der Datei app.js müssen Sie den $ ionicConfigProvider in das .config-Modul einfügen und $ ionicConfigProvider.tabs.position ('bottom') hinzufügen.

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

 $ionicConfigProvider.tabs.position('bottom'); //top

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
.
.
.
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});
Sandip Moradiya
quelle
3

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:

ionicBootstrap(MyApp, [], {
  tabbarPlacement: "bottom"
});

Siehe Konfig

Für die bald erscheinende ionische Version 2.0.0-beta.11

In app.ts:

ionicBootstrap(MyApp, [], {
  tabsPlacement: "bottom" 
});

Konfig

MasterProgrammer200
quelle
2

Update für Ionic 2 und Ionic 3+:

Sie haben zwei Methoden, um die Position der Registerkartenleiste zu ändern:

Methode 1: Verwenden Sie die tabsPlacementEigenschaft von<ion-tabs>

<ion-tabs  tabsPlacement='bottom' >
    <ion-tab [root]="rootTab" tabTitle="Home"></ion-tab> 
</ion-tabs>

Methode 2: Ändern Sie die Konfiguration in app.module.ts

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp, {
      tabsPlacement : 'bottom'
    })
  ]
})

Siehe die Dokumente

Duannx
quelle
Gibt es etwas Ähnliches für die Segmentkomponente? Ich kann es mit CSS ohne Sorgen ganz unten platzieren, aber wenn ich den Rand oben auf die Schaltflächen setze, gibt es so viele Schleifen, durch die ich springen kann, und ich fühle mich ziemlich hackig. Ich frage mich, ob es eine einfachere Lösung gab, aber keine gefunden habe in den Dokumenten. Eigentlich ist das Segment-Dokument ziemlich kurz ... ionicframework.com/docs/api/components/segment/Segment
yogibimbi
Antwort an sich selbst: 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.
Yogibimbi
1
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
Nasouh Almrstani
quelle
Bitte vermeiden Sie nur Code-Antworten und erläutern Sie Ihre Lösung.
Micho