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>

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

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.

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

In app.js:

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

Siehe Konfigurationen

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

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');

});

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

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

myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);