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

97

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>
Italo Maia
la source

Réponses:

175

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

jrl53
la source
1
non ça ne marche pas. Sur les onglets du navigateur sont en bas, sur Android - en haut
Toolkit
3
Les onglets @Toolkit Android sont censés être rendus par défaut selon la documentation Ionic. Les directives Android sont d'éviter d'utiliser les barres du bas en raison des actions par défaut du système d'exploitation situées en bas: developer.android.com/design/patterns/pure-android.html
Daniel Rochetti
@Toolkit J'ai déjà modifié la réponse pour corriger les informations par défaut de la plate-forme. Si vous souhaitez le personnaliser, le code ci-dessus est le bon moyen. Cependant, je vous suggère d'éviter de modifier les valeurs par défaut de la plate-forme, elles ont tendance à suivre les directives de la plate-forme. =)
Daniel Rochetti
Existe-t-il un moyen, en utilisant cette méthode ou une autre, d'avoir des onglets en bas et en haut? J'ai essayé de créer un autre état pour mon pied de page mais, pour une raison quelconque, il ne s'affiche pas à l'écran même si je le vois dans l'onglet réseau de mon navigateur. Des pensées à ce sujet? Merci
Bill Pope
65

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.

Ahmed Na.
la source
Comment réaliser des onglets en haut et en bas de l'écran?
Syed Danish Ali
Je pense que vous pourriez créer un modèle séparé pour les onglets en bas et en haut
Ahmed Na.
Oh oui. J'ai compris. Je suis un novice dans ce monde ionique.
Syed Danish Ali
Cela devrait être marqué comme réponse. C'est simple et droit au but, vous avez mon vote pour ...
Mbithy Mbithy
Tout en définissant l'onglet Android en bas, cela fonctionne bien selon votre code, mais tout en appuyant sur le clavier, l'onglet apparaît également avec l'onglet. Existe-t-il une option pour le stabiliser en bas tout en appuyant sur le clavier.
Suthan M
9

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

Dans app.js:

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

Voir les configurations

Greg Blass
la source
7

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

Raj Kumar
la source
5

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

});
Sandip Moradiya
la source
3

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

MasterProgrammer200
la source
2

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

Duannx
la source
Y a-t-il quelque chose de similaire à distance pour le composant Segment? Je peux le mettre en bas avec CSS pas de soucis, mais mettre la bordure sur les boutons en haut a en quelque sorte tellement de boucles à traverser et se sent plutôt piraté, alors je me demande s'il y avait une solution plus simple, mais je n'en ai rencontré aucune dans les docs. En fait, le document Segment est plutôt court .... ionicframework.com/docs/api/components/segment/Segment
yogibimbi
Réponse à soi-même: ion-segment-button.segment-button { border-top-style: solid; border-bottom-width: 0; }fait l'affaire, cependant, pour le border-top-width je n'ai trouvé aucun autre recours que de le définir explicitement dans l'attribut style sur l'élément à 2px. Quelque chose d'autre l'écrase toujours avec 3px, même en le définissant dans Chrome sur l'élément et avec! Important dans la feuille de style ne semble pas dépasser cela.
yogibimbi
1
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
Nasouh Almrstani
la source
Veuillez éviter les réponses codées uniquement et expliquer votre solution.
Micho