web-dev-qa-db-fra.com

Comment placer des onglets ioniques au bas de l'écran?

J'ai créé un simple onglet ionique qui montre mes icônes en haut de l'écran. J'ai essayé de l'envelopper dans une barre de pieds ionique afin de le placer au bas de l'écran sans succès. Les onglets disparaissent quand je le fais. Comment dois-je accomplir les regards que je veux?

<ion-footer-bar>
    <ion-tabs class="tabs-icon-only tabs-stable">
    ...
    </ion-tabs>
</ion-footer-bar>
tabsionic
94
Italo Maia

Depuis le beta 14 de Ionic ( http://blog.ionic.io/the-final-beta/ ), certaines variables de configuration ont maintenant pour valeur par défaut leur valeur de plate-forme, ce qui signifie qu'elles tentera de se comporter en fonction de la plate-forme sur laquelle ils sont construits . Dans le cas des onglets, pour iOS, la valeur par défaut est d'afficher en bas et Android en haut.

Vous pouvez facilement "configurer" l'emplacement de toutes les plates-formes en définissant la fonction tabs.position dans le $ionicConfigProvider, dans votre fonction de configuration, comme suit:

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

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

}]);

Vous pouvez consulter la documentation ici

172
jrl53

Pour placer les onglets ionicFramework en bas de l'écran pour les appareils Android, ouvrez simplement votre fichier app.js et sous angular.module ajoutez les lignes de code suivantes:

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

J'espère que cela aidera. 

63
Ahmed Na.

Mise à jour pour Ionic 2 (syntaxe plus propre/améliorée):

Dans app.js:

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

Voir Configs

9
Greg Blass

Le placer dans votre app.js fait le travail.

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

Ionic prend automatiquement en compte les configurations de plate-forme pour ajuster le style de transition à utiliser et déterminer si les icônes d'onglets doivent apparaître en haut ou en bas. 

Par exemple, dans le cas des onglets, pour iOS, la valeur par défaut est d'afficher en bas et Android en haut.

Note1: Il est à noter que lorsqu'une plate-forme n’est ni iOS ni Android, elle sera par défaut sur iOS  

Note2: si vous développez sur un navigateur de bureau, il utilisera les configurations par défaut iOS

7
Raj Kumar

Dans le fichier app.js, vous devrez injecter $ ionicConfigProvider au module .config et ajouter $ ionicConfigProvider.tabs.position ('bottom') 

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

});
5
Sandip Moradiya

Comment placer des onglets ioniques au bas de l'écran dans Ionic 2

Pour la version actuelle ionic 2.0.0-beta.10. 

En app.ts:

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

Voir Config

Ionic 2.0.0-beta.11 sera bientôt disponible

En app.ts:

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

Config

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

Mise à jour pour Ionic 2 et Ionic 3+:

Vous avez 2 méthodes pour changer la position de la barre de tabulation:

Méthode 1: Utiliser tabsPlacement propriété de <ion-tabs>

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

Méthode 2: Modifier la configuration dans app.module.ts 

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

Voir le docs

0
Duannx