logo标签列表

如何将ionic选项卡放置在屏幕底部？

tabsionic-framework
97

我创建了一个简单的ionic-tabs，它在屏幕顶部显示我的图标。我尝试将其包装在ionic-footer-bar中，以便将其放置在屏幕底部，但没有成功。当我这样做时，选项卡会消失。我应该如何实现我想要的外观？

<ion-footer-bar>
    <ion-tabs class="tabs-icon-only tabs-stable">
    ...
    </ion-tabs>
</ion-footer-bar>
9个回答
175
自从Ionic的beta 14版本（http://blog.ionic.io/the-final-beta/）以来，有一些配置变量现在默认为它们所在平台的值，这意味着它们会尝试根据其所构建的平台来行事。在标签页的情况下，对于iOS，默认显示在底部，而对于Android，则是在顶部。
您可以通过在配置函数中设置$ionicConfigProvider中的tabs.position函数来轻松地“硬设”所有平台的位置，如下所示：
MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {

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

}]);

你可以在这里查看文档。

1
不，它不起作用。在浏览器中，选项卡在底部，在Android上则在顶部。 - Toolkit
3
根据Ionic文档，@Toolkit Android标签默认应该在顶部呈现。Android指南建议避免使用底部栏，因为操作系统的默认操作位于底部：http://developer.android.com/design/patterns/pure-android.html - Daniel Rochetti
@Toolkit 我已经编辑了答案，修复了平台默认信息。如果你想自定义它，上面的代码是正确的方式。然而，我建议你避免更改平台默认值，因为它们往往遵循平台指南。=) - Daniel Rochetti
有没有一种方法，使用这种或其他方法，可以拥有底部和顶部选项卡？我尝试为我的页脚创建另一个状态，但由于某种原因，它没有呈现到屏幕上，即使我在浏览器的网络选项卡中看到它。对此有什么想法吗？谢谢。 - Bill Pope
65

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

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

希望这能有所帮助。

如何在屏幕顶部和底部都实现选项卡？ - Syed Danish Ali
我认为你可以为底部和顶部的选项卡创建单独的模板。 - AhmedBinNasser
哦，是的。我明白了。在这个Ionic世界里，我是一个新手。 - Syed Danish Ali
这应该被标记为答案。它简单明了，直戳要点，你得到了我的赞成票... - Mbithy Mbithy
将Android选项卡设置为底部后，根据您的代码它可以正常工作。但是，在按键盘时，选项卡也会随着键盘一起显示出来。是否有任何选项可以在按键盘时保持其稳定在底部？ - Suthan M
9

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

在app.js中：

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

See Configs

7
将其放置在您的app.js中即可完成工作。
.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Ionic会自动考虑平台配置，以调整诸如使用哪种过渡样式以及选项卡图标是否应该显示在顶部或底部等内容。

例如，在选项卡的情况下，对于iOS，默认设置是在底部显示，而对于Android，则在顶部显示。

Note1：需要注意的是，如果平台不是iOS或Android，则默认为iOS

Note2：如果您在桌面浏览器上开发，则会采用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');

});
3

如何在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" 
});

配置

2

更新Ionic 2和Ionic 3+：

您有两种方法可以更改选项卡栏的位置：

方法1：使用<ion-tabs>的tabsPlacement属性

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

方法二：修改app.module.ts配置
@NgModule({
  imports: [
    IonicModule.forRoot(MyApp, {
      tabsPlacement : 'bottom'
    })
  ]
})

请查看文档。
Segment组件是否有类似的解决方案？我可以用CSS将其放在底部，但是在按钮上放置边框似乎需要跳过很多循环，并且感觉有点hacky，所以我想知道是否有更简单的解决方案，但是在文档中没有找到。实际上，Segment文档非常简短...https://ionicframework.com/docs/api/components/segment/Segment/ - yogibimbi
自问自答：ion-segment-button.segment-button { border-top-style: solid; border-bottom-width: 0; } 可以解决问题，但是对于border-top-width，我没有找到其他的解决办法，只能在元素的style属性中显式设置为2px。其他任何东西都会将其覆盖为3px，即使在Chrome浏览器上在元素和样式表中设置!important也似乎无法顶替它。 - yogibimbi
2
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
请避免仅提供代码答案，解释您的解决方案。 - Micho
0

试一下

<ion-footer><ion-tabs> <ion-tab tabTitle="返回"></ion-tab> </ion-tabs></ion-footer>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接