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

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

Desde la beta 14 de Ionic ( http://blog.ionic.io/the-final-beta/ ), hay algunas variables de configuración que ahora están por defecto en los valores de su plataforma, lo que significa que intentarán comportarse de acuerdo con la plataforma. sobre los que se basan. 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 fácilmente la ubicación para todas las plataformas configurando la tabs.positionfunción en el $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 aquí

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

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

Espero que esto ayude.

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

En app.js:

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

Ver configuraciones

Colocarlo en su app.js hace el trabajo.

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

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

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

Note1 : Debe tenerse en cuenta que cuando una plataforma no es iOS o Android, entonces estará predeterminada a iOS

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

Al lado del archivo app.js, deberá inyectar el $ ionicConfigProvider al 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');

});

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 configuración

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

En app.ts:

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

Config

Actualización para Ionic 2 y Ionic 3+:

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

Método 1: Utilice las tabsPlacementpropiedades 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 documentos

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