tabs - features - ¿Cómo colocar pestañas iónicas en la parte inferior de la pantalla?

runelite demonic

Question

Creé unas pestañas iónicas simples que muestran mis íconos en la parte superior de la pantalla. Traté de envolverlo en una barra iónica de pie de página para colocarlo en la parte inferior de la pantalla sin éxito. Las pestañas desaparecen cuando hago eso. ¿Cómo debo lograr el aspecto que quiero?

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

Answer 1

Actualización para Ionic 2 e Ionic 3+:

Tiene 2 métodos para cambiar la posición de la barra de pestañas:

Método 1: utilice las tabsPlacement de <ion-tabs>

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

Método 2: cambiar la configuración en app.module.ts

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

Ver los docs

Answer 2

Cómo colocar pestañas iónicas en la parte inferior de la pantalla en Ionic 2

Para la versión actual ionic 2.0.0-beta.10.

En app.ts:

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

Ver Config

Para el próximo lanzamiento iónico 2.0.0-beta.11

En app.ts:

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

Config

Answer 3

Actualización para Ionic 2 (sintaxis más limpia / mejorada):

En app.js:

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

Ver configuraciones

Answer 4

Colocarlo en tu app.js hace el trabajo.

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

Ionic toma en cuenta automáticamente las configuraciones de plataforma para ajustar cosas como qué estilo de transición usar y si los íconos de pestañas deberían mostrarse en la parte superior o inferior.

Por ejemplo, en el caso de las pestañas, para iOS lo predeterminado es mostrar en la parte inferior y Android en la parte superior.

Nota 1 : Debe tenerse en cuenta que cuando una plataforma no es iOS o Android, entonces se establecerá de manera predeterminada en iOS

Nota 2 : si está desarrollando en un navegador de escritorio, tomará las configuraciones predeterminadas de iOS

Answer 5

Desde la versión beta 14 de Ionic ( http://blog.ionic.io/the-final-beta/ ), hay algunas variables de configuración que ahora predeterminan sus valores de plataforma, lo que significa que intentarán comportarse de acuerdo con la plataforma sobre los cuales están construidos. En el caso de las pestañas, para iOS el valor predeterminado es mostrar en la parte inferior y Android en la parte superior.

Puede "configurar" la ubicación de todas las plataformas tabs.position configurando la función tabs.position en $ionicConfigProvider , dentro de su función de configuración de esta manera:

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

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

}]);

Puedes consultar la documentación here

Answer 6

En el lado del archivo app.js, deberá inyectar el $ ionicConfigProvider en el módulo .config y agregar $ 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'');

});

Answer 7

Para colocar las pestañas de ionicFramework en la parte inferior de la pantalla para dispositivos Android, simplemente abra su archivo app.js , y debajo de angular.module agregue las siguientes líneas de código:

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

Espero que esto ayude.

Answer 8

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