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 pied de page ionique afin de le placer en bas de l'écran sans succès. Les onglets disparaissent lorsque je fais cela. Comment dois-je réaliser les looks que je veux?

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

Depuis la version bêta 14 d'Ionic ( http://blog.ionic.io/the-final-beta/ ), certaines variables de configuration sont désormais définies par défaut sur leurs valeurs de plate-forme, ce qui signifie qu'elles vont essayer de se comporter en fonction de la plate-forme sur lesquels 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 définir l'emplacement de toutes les plates-formes en définissant la tabs.positionfonction dans la $ionicConfigProviderfonction de configuration de la manière suivante:

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

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

}]);

Vous pouvez consulter la documentation ici

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.

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

Dans app.js:

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

Voir les configurations

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 des éléments tels que le style de transition à utiliser et 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.

Note 1 : Il convient de noter que lorsqu'une plate-forme n'est pas iOS ou Android, elle sera par défaut iOS

Remarque 2 : si vous développez sur un navigateur de bureau, il prendra les configurations par défaut d'iOS

À côté du fichier app.js, vous devrez injecter le $ ionicConfigProvider dans le 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');

});

Comment placer les onglets ioniques en bas de l'écran dans Ionic 2

Pour la version actuelle ionic 2.0.0-beta.10.

Dans app.ts:

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

Voir Config

Pour le prochain ionic 2.0.0-beta.11

Dans app.ts:

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

Config

Mise à jour pour Ionic 2 et Ionic 3+:

Vous avez 2 méthodes pour changer la position de la barre d'onglets:

Méthode 1: utiliser la tabsPlacementproprié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 la documentation

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