Я створив просту іонну вкладку, яка показує мої піктограми вгорі екрана. Я намагався загорнути його в іонно-нижній колонтитул, щоб його розмістити в нижній частині екрана без успіху. Коли я це роблю, вкладки зникають. Як я повинен досягти вигляду, який я хочу?

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

Оскільки бета-версія Ionic ( http://blog.ionic.io/the-final-beta/ ), існують деякі змінні конфігурації, які тепер за замовчуванням відповідають значенню їх платформи, це означає, що вони намагатимуться вести себе відповідно до платформи що вони побудовані на. Що стосується вкладок, для iOS за замовчуванням відображається знизу, а Android - зверху.

Ви можете легко «встановити жорстке» місцеположення для всіх платформ, встановивши tabs.positionфункцію $ionicConfigProviderвсередині вашої функції конфігурації таким чином:

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',
  }
})

Див. Розділ Налаштування

Розміщення його у своєму app.js спрацьовує.

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

Ionic автоматично враховує конфігурації платформи для коригування таких речей, як стиль переходу, який слід використовувати та чи повинні відображатися піктограми вкладок у верхній чи нижній частині.

Наприклад, у випадку вкладок для iOS за замовчуванням відображається знизу, а для Android вгорі.

Примітка1 . Слід зазначити, що коли платформа не iOS або Android, вона за замовчуванням буде iOS

Примітка2 : якщо ви розробляєте браузер на робочому столі, він буде приймати конфігурації iOS за замовчуванням

Збоку файлу app.js вам потрібно буде ввести $ ionicConfigProvider в модуль .config та додати $ ionicConfigProvider.tabs.position ('знизу')

.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

Для поточної версії іонний 2.0.0-beta.10.

У додатках:

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

Див. Налаштування

Скоро вийде іонний 2.0.0-beta.11

У додатках:

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

Налаштування

Оновлення для Ionic 2 та Ionic 3+:

У вас є два способи зміни позиції панелі вкладок:

Спосіб 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
}]);