如何在Ionic 2

Question

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

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

Answer 1

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

你可以很容易地＆＃34;硬设置＆＃34;通过在tabs.position中设置$ionicConfigProvider函数，在您的配置函数中设置所有平台的位置，如下所示：

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

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

}]);

您可以查看文档here

Answer 2

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

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

希望这会有所帮助。

Answer 3

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

在app.js中：

AnotherFragment anotherFrag = (AnotherFragment)
 getSupportFragmentManager().findFragmentById(R.id.fragment_container);

    if (anotherFrag != null) {
        anotherFrag.receiveDataInFrag(object);
    }else{
       // create a new instance of the fragment and pass data to it.
    }

See Configs

Answer 4

将它放在你的app.js中就可以了。

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

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

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

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

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

});

Answer 6

如何在Ionic 2

中将离子标签置于屏幕底部

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

在app.ts中：

{{1}}

请参阅Config

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

在app.ts中：

{{1}}

Config

Answer 7

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

Answer 8

Ionic 2和Ionic 3 +的更新：

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

方法1：使用def draw_triangle(pattern_values=""): def draw(ht, ch): for i in range(1, ht+1): print('{txt:^{wid}}'.format(txt=i*(ch+' '),wid=2*ht)) while True: pattern_values = yield pattern_values draw(pattern_values[0], pattern_values[1]) pattern_series = draw_triangle() next(pattern_series) pattern_series.send([10, '*']) pattern_series.send([12, '=']) # This does not produce any output pattern_series.send([14, '&'])的{{1}}属性

tabsPlacement

方法2：更改<ion-tabs>

中的配置

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

请参阅docs

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

8 个答案:

如何在Ionic 2

Ionic 2和Ionic 3 +的更新：