ฉันสร้างแท็บไอออนิกแบบธรรมดาที่แสดงไอคอนของฉันที่ด้านบนของหน้าจอ ฉันพยายามห่อไว้ในอิออน - ส่วนท้าย - บาร์เพื่อให้วางไว้ที่ด้านล่างของหน้าจอโดยไม่ประสบความสำเร็จ แท็บหายไปเมื่อฉันทำเช่นนั้น ฉันจะทำอย่างไรให้ได้รูปลักษณ์ที่ต้องการ?

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

ตั้งแต่เบต้า 14ของ Ionic ( http://blog.ionic.io/the-final-beta/ ) มีตัวแปร config บางตัวที่ตอนนี้เป็นค่าเริ่มต้นของค่าแพลตฟอร์มซึ่งหมายความว่าพวกเขาจะพยายามทำงานตามแพลตฟอร์ม ที่พวกเขาสร้างขึ้น ในกรณีของแท็บสำหรับ iOS ค่าเริ่มต้นคือแสดงที่ด้านล่างและ Android อยู่ด้านบน

คุณสามารถ "กำหนดตำแหน่ง" สำหรับทุกแพลตฟอร์มได้อย่างง่ายดายโดยตั้งค่าtabs.positionฟังก์ชันใน$ionicConfigProviderฟังก์ชัน config ของคุณดังนี้:

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

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

}]);

คุณสามารถตรวจสอบเอกสารได้ที่นี่

ในการวางแท็บ ionicFramework ที่ด้านล่างของหน้าจอสำหรับอุปกรณ์ Android เพียงแค่เปิดไฟล์app.jsของคุณและภายใต้angular.module ให้เพิ่มโค้ดบรรทัดต่อไปนี้:

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

หวังว่านี่จะช่วยได้

การอัปเดตสำหรับ Ionic 2 (ไวยากรณ์ที่สะอาด / ดีขึ้น):

ใน app.js:

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

ดู Configs

การวางไว้ใน app.js ของคุณได้ผล

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

Ionic จะคำนึงถึงการกำหนดค่าแพลตฟอร์มโดยอัตโนมัติเพื่อปรับเปลี่ยนสิ่งต่างๆเช่นลักษณะการเปลี่ยนแปลงที่จะใช้และไอคอนแท็บควรแสดงที่ด้านบนหรือด้านล่าง

ตัวอย่างเช่นในกรณีของแท็บสำหรับ iOS ค่าเริ่มต้นคือแสดงที่ด้านล่างและ Android อยู่ด้านบน

หมายเหตุ 1 :ควรสังเกตว่าเมื่อแพลตฟอร์มไม่ใช่ iOS หรือ Android ระบบจะตั้งค่าเริ่มต้นเป็น iOS

Note2 : หากคุณกำลังพัฒนาบนเบราว์เซอร์บนเดสก์ท็อปมันจะใช้การกำหนดค่าเริ่มต้นของ iOS

ข้างไฟล์ app.js คุณจะต้องฉีด $ ionicConfigProvider ลงในโมดูล. config และเพิ่ม$ 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');

});

วิธีวางแท็บไอออนิกที่ด้านล่างของหน้าจอใน Ionic 2

สำหรับเวอร์ชันปัจจุบัน ionic 2.0.0-beta 10.

ใน app.ts:

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

ดูConfig

สำหรับเร็ว ๆ นี้ที่จะเปิดตัว ionic 2.0.0-beta11

ใน app.ts:

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

Config

อัปเดตสำหรับ Ionic 2 และ Ionic 3+:

คุณมี 2 วิธีในการเปลี่ยนตำแหน่งแถบแท็บ:

วิธีที่ 1: ใช้ที่เหมาะสมtabsPlacementของ<ion-tabs>

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

วิธีที่ 2: เปลี่ยนการกำหนดค่าใน app.module.ts

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

ดูเอกสาร

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