Я создал простые ионные вкладки, на которых отображаются мои значки в верхней части экрана. Я попытался обернуть его ионной полосой нижнего колонтитула, чтобы разместить его внизу экрана, но безуспешно. Вкладки исчезают, когда я это делаю. Как мне добиться желаемого образа?

<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/ ), есть некоторые переменные конфигурации, которые теперь по умолчанию имеют значения своей платформы, что означает, что они будут пытаться вести себя в соответствии с платформой. на которых они построены. В случае вкладок для 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 - вверху.

Note1 : Следует отметить , что , когда платформа не IOS или Android, то это будет по умолчанию прошивки

Примечание 2 : если вы разрабатываете в настольном браузере, он будет использовать конфигурации 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"
});

См. Конфигурацию

Скоро выйдет ionic 2.0.0-beta.11

В app.ts:

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

Конфиг

Обновление для 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
}]);