首页 文章

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

提问于
浏览 次
94

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

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

8 回答

  • 63

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

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

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

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

}]);

    你可以查看文档here

    回复于
  • 9

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

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

    希望这会有所帮助 .

    回复于
  • 3

    Ionic 2的更新（更清晰/改进的语法）：

    在app.js中：

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

    See Configs

    回复于
  • 0

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

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

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

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

    Note1 ： It should be noted that when a platform is not iOS or Android, then it’ll default to iOS

    Note2 : if you are developing on a desktop browser, it’s going to take on iOS default configs

    回复于
  • 1

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

});
    回复于
  • 7

    如何在Ionic 2中将离子标签置于屏幕底部

    对于当前版本的离子2.0.0-beta.10 .

    在app.ts：

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

    见Config

    对于即将发布的离子2.0.0-beta.11

    在app.ts：

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

    Config

    回复于
  • 173
    myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
    回复于
  • 5

    Ionic 2和Ionic 3的更新：

    您有2种方法可以更改标签栏位置：

    Method 1: Use tabsPlacement propertive of <ion-tabs>

    <ion-tabs  tabsPlacement='bottom' >
    <ion-tab [root]="rootTab" tabTitle="Home"></ion-tab> 
</ion-tabs>

    Method 2: Change config in app.module.ts

    @NgModule({
  imports: [
    IonicModule.forRoot(MyApp, {
      tabsPlacement : 'bottom'
    })
  ]
})

    见docs

    回复于

相关问题