Ho creato una semplice scheda ionica che mostra le mie icone nella parte superiore dello schermo. Ho provato a racchiuderlo in una barra ionica per posizionarlo nella parte inferiore dello schermo senza successo. Le schede scompaiono quando lo faccio. Come devo realizzare l'aspetto che desidero?

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

Dalla beta 14 di Ionic ( http://blog.ionic.io/the-final-beta/ ), ci sono alcune variabili di configurazione che ora vengono impostate come predefinite sui valori della piattaforma, il che significa che cercheranno di comportarsi in base alla piattaforma su cui sono costruiti. Nel caso delle schede, per iOS l'impostazione predefinita è quella di visualizzare in basso e Android in alto.

Puoi facilmente "impostare hard" la posizione per tutte le piattaforme impostando la tabs.positionfunzione nella funzione di $ionicConfigProviderconfigurazione in questo modo:

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

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

}]);

Puoi controllare la documentazione qui

Per posizionare le schede ionicFramework nella parte inferiore dello schermo per i dispositivi Android, apri il tuo file app.js e sotto angular.module aggiungi le seguenti righe di codice:

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

Spero che questo ti aiuti.

Aggiornamento per Ionic 2 (sintassi più pulita / migliorata):

In app.js:

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

Vedi Configurazioni

Inserendolo nel tuo app.js fa il lavoro.

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

Ionic prende automaticamente in considerazione le configurazioni della piattaforma per regolare cose come lo stile di transizione da utilizzare e se le icone delle schede devono essere visualizzate in alto o in basso.

Ad esempio, nel caso delle schede, per iOS l'impostazione predefinita è la visualizzazione in basso e Android in alto.

Nota 1 : va notato che quando una piattaforma non è iOS o Android, verrà impostata su iOS per impostazione predefinita

Nota 2 : se stai sviluppando su un browser desktop, verranno utilizzate le configurazioni predefinite di iOS

A lato del file app.js dovrai iniettare $ ionicConfigProvider nel modulo .config e aggiungere $ 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');

});

Come posizionare le linguette ioniche nella parte inferiore dello schermo in Ionic 2

Per la versione corrente ionic 2.0.0-beta.10.

In app.ts:

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

Vedi Config

Per il prossimo rilascio ionico 2.0.0-beta.11

In app.ts:

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

Config

Aggiornamento per Ionic 2 e Ionic 3+:

Hai 2 metodi per cambiare la posizione della barra delle schede:

Metodo 1: utilizzare la tabsPlacementproprietà di<ion-tabs>

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

Metodo 2: modifica della configurazione in app.module.ts

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

Vedi i documenti

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