Saya membuat tab ionik sederhana yang menampilkan ikon saya di bagian atas layar. Saya mencoba membungkusnya dengan ionic-footer-bar agar ditempatkan di bagian bawah layar tanpa hasil. Tab menghilang saat saya melakukannya. Bagaimana saya harus mendapatkan penampilan yang saya inginkan?

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

Sejak beta 14 dari Ionic ( http://blog.ionic.io/the-final-beta/ ), ada beberapa variabel config yang sekarang default ke nilai platform mereka, yang berarti bahwa mereka akan mencoba berperilaku sesuai dengan platform yang mereka bangun. Dalam kasus tab, untuk iOS defaultnya adalah ditampilkan di bawah, dan Android di atas.

Anda dapat dengan mudah "mengatur" lokasi untuk semua platform dengan mengatur tabs.positionfungsi di $ionicConfigProvider, di dalam fungsi konfigurasi Anda seperti ini:

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

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

}]);

Anda dapat memeriksa dokumentasi di sini

Untuk menempatkan tab ionicFramework di bagian bawah layar untuk perangkat android cukup buka file app.js Anda , dan di bawah angular.module tambahkan baris kode berikut:

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

Semoga ini bisa membantu.

Pembaruan untuk Ionic 2 (sintaks yang lebih bersih / ditingkatkan):

Di app.js:

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

Lihat Konfigurasi

Menempatkannya di app.js Anda berhasil.

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

Ionic secara otomatis mempertimbangkan konfigurasi platform untuk menyesuaikan hal-hal seperti gaya transisi yang akan digunakan dan apakah ikon tab harus ditampilkan di atas atau bawah.

Misalnya, dalam kasus tab, untuk iOS defaultnya adalah ditampilkan di bawah, dan Android di atas.

Note1 : Perlu dicatat bahwa ketika platform bukan iOS atau Android, maka itu akan default ke iOS

Note2 : jika Anda mengembangkan di browser desktop, ini akan menggunakan konfigurasi default iOS

Di samping file app.js, Anda perlu memasukkan $ ionicConfigProvider ke modul .config dan menambahkan $ 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');

});

Cara menempatkan tab ion di bagian bawah layar di Ionic 2

Untuk versi saat ini ionic 2.0.0-beta.10.

Dalam app.ts:

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

Lihat Config

Untuk segera dirilis ionic 2.0.0-beta.11

Dalam app.ts:

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

Config

Pembaruan untuk Ionic 2, dan Ionic 3+:

Anda memiliki 2 metode untuk mengubah posisi bilah tab:

Metode 1: Gunakan tabsPlacementpropertive of<ion-tabs>

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

Metode 2: Ubah konfigurasi app.module.ts

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

Lihat dokumennya

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