Как разместить ионные вкладки в нижней части экрана?

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

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

Ответ 1

Поскольку beta 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

}]);

Вы можете проверить документацию здесь

Ответ 2

Чтобы поместить вкладки ionicFramework в нижней части экрана для устройств Android, просто откройте файл app.js, а под angular.module добавьте следующие строки кода:

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

Надеюсь, это поможет.

Ответ 3

Обновление для Ionic 2 (более чистый/улучшенный синтаксис):

В app.js:

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

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

Ответ 4

Размещение его в вашем приложении app.js делает работу.

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

Ionic автоматически учитывает конфигурации платформы, чтобы настроить такие вещи, как стиль перехода, и должны ли отображаться значки вкладок сверху или снизу.

Например, в случае вкладок для iOS по умолчанию отображается снизу, а Android сверху.

Примечание1: Следует отметить, что когда платформа не является iOS или Android, то по умолчанию она будет равна iOS

Примечание2 : , если вы работаете на настольном браузере, оно будет работать с конфигурациями по умолчанию iOS

Ответ 5

Как разместить ионные вкладки в нижней части экрана в Ionic 2

Для текущей версии ionic 2.0.0-beta.10.

В app.ts:

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

См. Config

В ближайшее время будет выпущен ионный 2.0.0-beta.11

В app.ts:

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

Config

Ответ 6

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

Ответ 7

Обновление для Ionic 2 и Ionic 3 +:

У вас есть 2 способа изменить положение панели вкладок:

Метод 1: используйте tabsPlacement propertytive <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'
    })
  ]
})

См. docs