Stworzyłem proste karty jonowe, które pokazują moje ikony u góry ekranu. Próbowałem zawinąć go w pasek stopki jonowej, aby bezskutecznie umieścić go na dole ekranu. Karty znikają, kiedy to robię. Jak mam uzyskać pożądany wygląd?

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

Od wersji beta 14 Ionic ( http://blog.ionic.io/the-final-beta/ ) istnieją pewne zmienne konfiguracyjne, które teraz domyślnie przyjmują wartości platformy, co oznacza, że ​​będą próbowały zachowywać się zgodnie z platformą na których są zbudowane. W przypadku kart, w przypadku iOS domyślnie wyświetlane jest na dole, a Android na górze.

Możesz łatwo „sztywno ustawić” lokalizację dla wszystkich platform, ustawiając tabs.positionfunkcję w $ionicConfigProvider, wewnątrz funkcji konfiguracyjnej, w następujący sposób:

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

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

}]);

Możesz sprawdzić dokumentację tutaj

Aby umieścić zakładki ionicFramework u dołu ekranu dla urządzeń z systemem Android, po prostu otwórz plik app.js i pod angular.module dodaj następujące wiersze kodu:

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

Mam nadzieję, że to pomoże.

Aktualizacja dla Ionic 2 (czystsza / ulepszona składnia):

W app.js:

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

Zobacz Konfiguracje

Umieszczenie go w pliku app.js działa.

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

Ionic automatycznie bierze pod uwagę konfiguracje platformy, aby dostosować takie rzeczy, jak używany styl przejścia i czy ikony zakładek powinny być wyświetlane na górze, czy na dole.

Na przykład, w przypadku kart, w przypadku iOS domyślnym ustawieniem jest wyświetlanie na dole, a Androida na górze.

Uwaga 1 : Należy zauważyć, że jeśli platforma nie jest systemem iOS lub Android, domyślnie będzie to iOS

Uwaga 2 : jeśli tworzysz w przeglądarce na komputerze, zajmie to domyślne konfiguracje iOS

Po stronie pliku app.js musisz wstrzyknąć $ ionicConfigProvider do modułu .config i dodać $ 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');

});

Jak umieścić zakładki jonowe u dołu ekranu w Ionic 2

W obecnej wersji ionic 2.0.0-beta.10.

W aplikacjach:

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

Zobacz Config

Wkrótce ukaże się ionic 2.0.0-beta.11

W aplikacjach:

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

Config

Aktualizacja dla Ionic 2 i Ionic 3+:

Masz dwie metody zmiany pozycji paska kart:

Metoda 1: użyj tabsPlacementwłaściwości<ion-tabs>

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

Metoda 2: Zmień konfigurację w app.module.ts

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

Zobacz dokumentację

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