Wie platziere ich ionische Tabs am unteren Bildschirmrand?

Question

Ich habe ein einfaches ionic-tabs erstellt, das meine Symbole oben auf dem Bildschirm anzeigt. Ich habe versucht, es in eine ionische Fußleiste zu verpacken, damit es ohne Erfolg am unteren Bildschirmrand platziert wird. Die Tabs verschwinden, wenn ich das tue. Wie soll ich das Aussehen erreichen, das ich will?

<ion-footer-bar> 
    <ion-tabs class="tabs-icon-only tabs-stable"> 
    ... 
    </ion-tabs> 
</ion-footer-bar> 

Answer 1

Da die Beta 14 ionischer (http://blog.ionic.io/the-final-beta/), gibt es einige Konfigurationsvariablen, die jetzt auf ihre Plattform Werte Standard, was bedeutet, dass sie nach der Plattform zu verhalten versuchen, dass sie auf gebaut werden. Im Falle von Tabs, für iOS ist der Standard unten und Android oben angezeigt.

Sie können ganz einfach „hard-Set“ die Lage für alle Plattformen durch die tabs.position Funktion in der $ionicConfigProvider Einstellung, wie diese in der Config-Funktion:

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

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

}]); 

Sie Dokumentation here

Answer 2

Um Platz überprüfen Die ionicFramework-Registerkarten am unteren Bildschirmrand für Android-Geräte öffnen Sie einfach Ihre app.js Datei, und unter angular.module fügen Sie die folgenden Codezeilen hinzu:

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

Hoffe, das wird helfen.

Answer 3

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

In app.js:

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

See Configs

Answer 4

Wie am unteren Rand des Bildschirms in Ionic ionisches Laschen 2 platzieren

Für die aktuelle Version ionic 2.0.0-beta.10.

In app.ts:

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

Siehe Config

Für die in Kürze veröffentlicht ionischen 2.0.0-beta.11

In app.ts werden:

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

Config

Answer 5

Platzieren Sie es in Ihrer app.js macht die Arbeit.

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

Ionic nimmt automatisch Plattformkonfigurationen berücksichtigt Dinge anzupassen wie das, was die Art des Übergangs zu verwenden und ob Registerkarte Symbole auf der Ober- oder Unterseite zeigen.

Zum Beispiel, im Fall von Tabs, für iOS ist die Standardanzeige unten und Android oben.

Note1: Es sollte beachtet werden, dass, wenn eine Plattform nicht iOS oder Android ist, dann wird es

Note2auf iOS Standard:wenn Sie entwickeln in einem Desktop-Browser wird es auf iOS-Standardkonfigurationen

Answer 6

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

übernehmen

Answer 7

Update für Ionic 2 und Ionic 3+:

Sie haben zwei Methoden Tableiste Position zu ändern:

Methode 1: Verwenden tabsPlacement propertive von <ion-tabs>

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

Methode 2: Konfiguration ändern in app.module.ts

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

die

Siehe docs

Answer 8

In Seite der app.js Datei, die Sie den $ ionicConfigProvider zum .config Modul injizieren müssen und $ ionicConfigProvider.tabs.position ('bottom') in

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

});