Tôi đã tạo một tab ion đơn giản hiển thị các biểu tượng của tôi ở đầu màn hình. Tôi đã cố gắng bọc nó trong một thanh ionic-footer-bar để đặt nó ở cuối màn hình nhưng không thành công. Các tab biến mất khi tôi làm điều đó. Tôi nên làm thế nào để đạt được vẻ ngoài mong muốn?

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

Kể từ phiên bản beta 14 của Ionic ( http://blog.ionic.io/the-final-beta/ ), có một số biến cấu hình hiện mặc định thành giá trị nền tảng của chúng, có nghĩa là chúng sẽ cố gắng hoạt động theo nền tảng mà chúng được xây dựng trên. Trong trường hợp tab, đối với iOS, mặc định là hiển thị ở dưới cùng và Android ở trên.

Bạn có thể dễ dàng "thiết lập cứng" vị trí cho tất cả các nền tảng bằng cách đặt tabs.positionchức năng trong $ionicConfigProvider, bên trong chức năng cấu hình của bạn như sau:

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

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

}]);

Bạn có thể kiểm tra tài liệu tại đây

Để đặt các tab ionicFramework ở cuối màn hình cho thiết bị Android, chỉ cần mở tệp app.js của bạn và bên dưới angle.module, hãy thêm các dòng mã sau:

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

Hy vọng điều này sẽ giúp ích.

Cập nhật cho Ionic 2 (cú pháp sạch hơn / cải tiến):

Trong app.js:

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

Xem cấu hình

Đặt nó vào app.js của bạn sẽ hoạt động.

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

Ionic tự động xem xét các cấu hình nền tảng để điều chỉnh những thứ như kiểu chuyển tiếp sẽ sử dụng và biểu tượng tab sẽ hiển thị ở trên cùng hay dưới cùng.

Ví dụ: Trong trường hợp tab, đối với iOS, mặc định là hiển thị ở dưới cùng và Android ở trên.

Lưu ý1 : Cần lưu ý rằng khi một nền tảng không phải là iOS hoặc Android, thì nó sẽ mặc định là iOS

Lưu ý 2 : nếu bạn đang phát triển trên trình duyệt máy tính để bàn, nó sẽ sử dụng các cấu hình mặc định của iOS

Bên cạnh tệp app.js, bạn sẽ cần phải đưa $ ionicConfigProvider vào mô-đun .config và thêm $ 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');

});

Cách đặt các tab ion ở cuối màn hình trong Ionic 2

Đối với phiên bản hiện tại ionic 2.0.0-beta.10.

Trong app.ts:

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

Xem cấu hình

Sắp được phát hành ionic 2.0.0-beta.11

Trong app.ts:

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

Cấu hình

Cập nhật cho Ionic 2 và Ionic 3+:

Bạn có 2 phương pháp để thay đổi vị trí thanh tab:

Phương pháp 1: Sử dụng thích tabsPlacementhợp của<ion-tabs>

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

Phương pháp 2: Thay đổi cấu hình trong app.module.ts

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

Xem tài liệu

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