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


97

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

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

Ответы:


175

Начиная с бета-версии 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

}]);

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


1
нет, это не работает. В браузере вкладки внизу, на Android - вверху
Toolkit

3
Согласно документам Ionic, вкладки @Toolkit Android должны отображаться сверху по умолчанию. Рекомендации Android - избегать использования нижних панелей из-за действий ОС по умолчанию, расположенных внизу: developer.android.com/design/patterns/pure-android.html
Daniel Rochetti

@Toolkit Я уже редактировал ответ, чтобы исправить информацию о настройках платформы по умолчанию. Если вы хотите настроить его, приведенный выше код - правильный путь. Однако я бы посоветовал вам избегать изменения настроек платформы по умолчанию, они, как правило, следуют рекомендациям платформы. =)
Daniel Rochetti

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

65

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

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

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


Как добиться вкладок как в верхней, так и в нижней части экрана?
Сайед Даниш Али

Думаю, вы могли бы создать отдельный шаблон для вкладок снизу и сверху
Ахмед На.

О да. Я понял. Я новичок в этом ионном мире.
Сайед Даниш Али

Это должно быть отмечено как ответ. Это просто и прямо по
делу

При установке вкладки Android в нижнюю часть он работает хорошо в соответствии с вашим кодом, но при нажатии на клавиатуру вкладка также отображается вместе с вкладкой. Есть ли возможность установить его стабильно внизу при нажатии на клавиатуру.
Suthan M


7

Поместите его в свой app.js.

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

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

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

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

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


5

В файле 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');

});


2

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

См. Документацию


Есть ли что-нибудь отдаленно похожее на компонент "Сегмент"? Я могу поместить его внизу с помощью CSS, не беспокойтесь, но если поставить границу на кнопки вверху, тогда будет так много петель, через которые можно прыгать, и это выглядит довольно взломанным, поэтому мне интересно, было ли более простое решение, но не нашел ни одного в документах. На самом деле документ Segment довольно короткий .... ionicframework.com/docs/api/components/segment/Segment
yogibimbi

Ответ себе: ion-segment-button.segment-button { border-top-style: solid; border-bottom-width: 0; } трюк, однако, для border-top-width я не нашел другого выхода, кроме как явно установить его в атрибуте стиля элемента на 2px. Что-то еще всегда перезаписывает его на 3 пикселя, даже установка его в Chrome для элемента и! Important в таблице стилей, похоже, не превосходит этого.
yogibimbi

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

Пожалуйста, избегайте только кодовых ответов и объясните свое решение.
Micho
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.