Criei uma aba iônica simples que mostra meus ícones no topo da tela. Tentei envolvê-lo em uma barra de rodapé iônica para colocá-lo na parte inferior da tela, sem sucesso. As guias desaparecem quando eu faço isso. Como devo conseguir os looks que desejo?

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

Desde a versão beta 14 do Ionic ( http://blog.ionic.io/the-final-beta/ ), existem algumas variáveis ​​de configuração que agora assumem os valores da plataforma, o que significa que tentarão se comportar de acordo com a plataforma em que são construídos. No caso de guias, para iOS, o padrão é exibir na parte inferior e Android na parte superior.

Você pode facilmente definir o local para todas as plataformas, definindo a tabs.positionfunção no $ionicConfigProvider, dentro de sua função de configuração, desta forma:

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

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

}]);

Você pode verificar a documentação aqui

Para colocar as guias ionicFramework na parte inferior da tela para dispositivos Android, basta abrir o arquivo app.js e, em angular.module, adicionar as seguintes linhas de código:

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

Espero que isso ajude.

Atualização para Ionic 2 (sintaxe mais limpa / aprimorada):

Em app.js:

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

Veja configs

Colocá-lo em seu app.js faz o trabalho.

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

O Ionic leva automaticamente as configurações da plataforma em consideração para ajustar coisas como o estilo de transição a ser usado e se os ícones de guia devem ser exibidos na parte superior ou inferior.

Por exemplo, no caso de guias, para iOS, o padrão é exibir na parte inferior e Android na parte superior.

Nota 1 : deve-se observar que quando uma plataforma não é iOS ou Android, o padrão é iOS

Nota 2 : se você estiver desenvolvendo em um navegador de desktop, ele assumirá as configurações padrão do iOS

Ao lado do arquivo app.js, você precisará injetar o $ ionicConfigProvider no módulo .config e adicionar $ 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');

});

Como colocar guias iônicas na parte inferior da tela no Ionic 2

Para a versão atual do ionic 2.0.0-beta.10.

Em app.ts:

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

Veja a configuração

Para o lançamento iônico 2.0.0-beta.11 em breve

Em app.ts:

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

Config

Atualização para Ionic 2 e Ionic 3+:

Você tem 2 métodos para alterar a posição da barra de guias:

Método 1: Use tabsPlacementpropriedade de<ion-tabs>

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

Método 2: alterar a configuração em app.module.ts

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

Veja a documentação

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