Simgelerimi ekranın üst kısmında gösteren basit bir iyonik sekmeler oluşturdum. Başarısız bir şekilde ekranın altına yerleştirilmesi için iyonik bir altlık çubuğuna sarmaya çalıştım. Bunu yaptığımda sekmeler kayboluyor. İstediğim görünümü nasıl elde etmeliyim?

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

Ionic'in beta 14'ünden beri ( http://blog.ionic.io/the-final-beta/ ), artık platform değerlerine varsayılan olan bazı yapılandırma değişkenleri var, bu da platforma göre davranmaya çalışacakları anlamına geliyor. üzerine inşa edilmişlerdir. Sekmeler söz konusu olduğunda, iOS için varsayılan, altta ve Android'in üstte görüntülenmesidir.

Yapılandırma işlevinizin içindeki tabs.positionişlevi şu şekilde ayarlayarak tüm platformlar için konumu kolayca "sabit ayarlayabilirsiniz" $ionicConfigProvider:

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

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

}]);

Belgeleri buradan kontrol edebilirsiniz

Android cihazlarda ionicFramework sekmelerini ekranın altına yerleştirmek için app.js dosyanızı açmanız ve angular.module kod aşağıdaki satırları ekleyin:

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

Umarım bu yardımcı olur.

Ionic 2 için güncelleme (daha temiz / geliştirilmiş sözdizimi):

App.js'de:

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

Yapılandırmaları Görün

Bunu app.js dosyanıza yerleştirmek işi yapar.

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

Ionic, hangi geçiş stilinin kullanılacağı ve sekme simgelerinin üstte mi yoksa altta mı gösterileceği gibi şeyleri ayarlamak için otomatik olarak platform yapılandırmalarını dikkate alır.

Örneğin, sekmeler söz konusu olduğunda, iOS için varsayılan, altta ve Android'in üstte görüntülenmesidir.

Not 1 : Bir platform iOS veya Android olmadığında, varsayılan olarak iOS'a geçeceği unutulmamalıdır.

Not 2 : Bir masaüstü tarayıcısında geliştiriyorsanız, iOS varsayılan yapılandırmalarını alacaktır.

App.js dosyasının yan tarafında, .config modülüne $ ionicConfigProvider'ı enjekte etmeniz ve $ ionicConfigProvider.tabs.position ('bottom') eklemeniz gerekir.

.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');

});

İyonik sekmeler Ionic 2'de ekranın altına nasıl yerleştirilir

Mevcut sürüm ionic 2.0.0-beta.10 için.

App.ts içinde:

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

Yapılandırmaya bakın

Yakında piyasaya sürülecek ionic 2.0.0-beta.11

App.ts içinde:

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

Yapılandırma

Ionic 2 ve Ionic 3+ için güncelleme:

Sekme çubuğu konumunu değiştirmek için 2 yönteminiz vardır:

Yöntem 1: tabsPlacementbir propertive<ion-tabs>

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

Yöntem 2: Yapılandırmayı değiştir app.module.ts

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

Dokümanlara bakın

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