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

Posted

技术标签:

【中文标题】如何在屏幕底部放置离子标签?【英文标题】:How to place ionic tabs at the bottom of the screen? 【发布时间】:2015-03-08 14:49:28 【问题描述】:

我创建了一个简单的 ionic-tabs,在屏幕顶部显示我的图标。我试图将其包装在 ionic-footer-bar 中,以便将其放置在屏幕底部但没有成功。当我这样做时,标签消失了。我应该如何完成我想要的外观?

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

【问题讨论】:

【参考方案1】:

自 Ionic (http://blog.ionic.io/the-final-beta/) 的 beta 14 以来,有一些配置变量现在默认为其平台值,这意味着它们将尝试根据它们所在的平台运行建立在。 对于选项卡,ios 默认显示在底部,android 显示在顶部。

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

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

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

]);

您可以查看文档here

【讨论】:

不,它不起作用。在浏览器标签位于底部,在 Android 上 - 在顶部 根据 Ionic 文档,@Toolkit Android 选项卡应该默认呈现在顶部。 Android 准则是避免使用底部栏,因为底部的操作系统默认操作:developer.android.com/design/patterns/pure-android.html @Toolkit 我已经编辑了修复平台默认信息的答案。如果你想自定义它,上面的代码是正确的方法。但是,我建议您避免更改平台默认值,它们倾向于遵循平台准则。 =) 有没有办法使用这种或其他方法来设置底部和顶部选项卡?我尝试为我的页脚创建另一个状态,但由于某种原因,即使我在浏览器的网络选项卡中看到它,它也不会呈现到屏幕上。对此有什么想法吗?谢谢【参考方案2】:

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

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

希望这会有所帮助。

【讨论】:

如何实现屏幕顶部和底部的标签页? 我认为你可以为底部和顶部的标签创建单独的模板 哦,是的。我知道了。我是这个 ionic 世界的新手。 这应该被标记为答案。这很简单直接,你得到了我的支持...... 虽然将 android 选项卡设置为底部,但它根据您的代码运行良好,但在按下键盘时,选项卡也会与选项卡一起显示。是否有任何选项可以在按下键盘时将其稳定在底部。【参考方案3】:

Ionic 2 更新(更简洁/改进的语法):

在 app.js 中:

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

See Configs

【讨论】:

【参考方案4】:

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

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

Ionic 会自动考虑平台配置,以调整要使用的过渡样式以及标签图标应该显示在顶部还是底部。

例如,在选项卡的情况下,iOS 默认显示在底部,Android 显示在顶部。

注意1需要注意的是,当平台不是iOS或Android时,默认为iOS

注意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');

);

【讨论】:

【参考方案6】:

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

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

在 app.ts 中:

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

见Config

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

在 app.ts 中:

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

Config

【讨论】:

【参考方案7】:
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) 
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
]);

【讨论】:

请避免仅使用代码回答并解释您的解决方案。【参考方案8】:

Ionic 2 和 Ionic 3+ 的更新:

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

方法一:使用&lt;ion-tabs&gt;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'
    )
  ]
)

见docs

【讨论】:

Segment 组件有什么类似的东西吗?我可以用 CSS 将它放在底部,不用担心,但是将边框放在顶部的按钮上然后有很多循环要跳过并且感觉相当 hacky,所以我想知道是否有更简单的解决方案,但没有遇到在文档中。实际上,Segment 文档相当短......ionicframework.com/docs/api/components/segment/Segment Answer to self: ion-segment-button.segment-button border-top-style: solid; border-bottom-width: 0; 可以解决问题,但是,对于border-top-width,除了在元素的样式属性中明确设置为2像素。其他东西总是用 3px 覆盖它,即使在元素上的 Chrome 中设置它并且在样式表中使用 !important 似乎也没有超过它。【参考方案9】:

试试这个

&lt;ion-footer&gt;&lt;ion-tabs&gt; &lt;ion-tab tabTitle="Return"&gt;&lt;/ion-tab&gt; &lt;/ion-tabs&gt;&lt;/ion-footer&gt;

【讨论】:

以上是关于如何在屏幕底部放置离子标签?的主要内容,如果未能解决你的问题,请参考以下文章

在屏幕底部放置一个标签

移动端的离子底部标签和桌面端的侧边菜单

如何在颤动的屏幕底部放置一行

如何在 iOS 视网膜和非视网膜的屏幕底部放置 admob 横幅

NSLayoutContraints:如何将底部视图放置在两个标签中较高者的下方?

如何在所有屏幕上放置一个带有时间的标签