如何在屏幕底部放置离子标签？

Question

我创建了一个简单的离子选项卡,在屏幕顶部显示我的图标.我试图将它包裹在一个离子 - 页脚栏中,以便将它放在屏幕的底部,但没有成功.当我这样做时,标签消失了.我应该如何完成我想要的外观？

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

Answer 1

自Ionic 的beta 14(http://blog.ionic.io/the-final-beta/)以来,有一些配置变量现在默认为他们的平台值,这意味着他们将尝试根据平台行为他们是建立在.对于标签,对于iOS,默认显示在底部,Android显示在顶部.

通过tabs.position在$ionicConfigProvider配置函数中设置函数,您可以轻松地"硬设置"所有平台的位置,如下所示:

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

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

}]);

你可以在这里查看文档

Answer 2

要将ionicFramework选项卡放在Android设备的屏幕底部,只需打开app.js文件,然后在angular.module下添加以下代码行:

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

希望这会有所帮助.

Answer 3

Ionic 2的更新(更清晰/改进的语法):

在app.js中:

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

见配置

Answer 4

将它放在app.js中可以完成工作.

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

Ionic自动将平台配置考虑在内,以调整使用的过渡样式以及标签图标是否应显示在顶部或底部.

例如,对于标签,对于iOS,默认显示在底部,Android显示在顶部.

注意1:应该注意的是,当一个平台不是iOS或Android时,它将默认为iOS

注意2 : 如果您正在桌面浏览器上进行开发,那么它将采用iOS默认配置

Answer 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');

});