带有离子导航栏的按钮栏未显示全高答案

【问题标题】：button-bar not showing full height with ion-nav-bar带有离子导航栏的按钮栏未显示全高
【发布时间】：2015-07-25 11:39:45
【问题描述】：

按钮栏未显示其与导航栏的完整高度，似乎它正试图适应离子导航栏。这是我到目前为止所得到的：

index.html

<body ng-app="starter">
<ion-nav-bar class="bar bar-header bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>

tab-dash.html

<ion-view view-title="Dashboard">

 <div class="button-bar">
  <a class="button button-positive">Mon</a>
  <a class="button button-positive">Tue</a>
  <a class="button button-positive">Wed</a>
  <a class="button button-positive">Thu</a>
  <a class="button button-positive">Fri</a>
</div>
<ion-content class="padding">
...
</ion-content>
</ion-view>

【问题讨论】：

首先，你想达到什么目的？
一个带有按钮的导航栏

标签： ios ionic-framework ionic

【解决方案1】：

试试这个。

<ion-view view-title="Dashboard">

<ion-content class="padding">

<div class="button-bar">
  <a class="button button-positive">Mon</a>
  <a class="button button-positive">Tue</a>
  <a class="button button-positive">Wed</a>
  <a class="button button-positive">Thu</a>
  <a class="button button-positive">Fri</a>
</div>


</ion-content>
</ion-view>

EXTRA：我假设您使用的是入门模板。如果您希望这些标签保持在顶部。您可以在 ion-tabs 中使用 tabs-top 类

【讨论】：

按钮现在显示，但它似乎有一个填充，它没有附加到导航栏
ion-content 中的任何内容都将具有填充/可滚动。您需要使用，这是正确的方法。可以使用按钮，但您需要更改大量 css 才能实现。

【解决方案2】：

按照 Karan Kumar 的建议，我通过使用 ion-tabs 使其工作。为了解决填充问题，我在 ion-content 中添加了 has-tabs-top。使用 button-clear 移除按钮的边框

<ion-view view-title="Dashboard">
    <ion-tabs class="tabs-positive tabs-top">
        <div class="button-bar">
            <a class="button button-clear">Mon</a>
            <a class="button button-clear">Tue</a>
            <a class="button button-clear">Wed</a>
            <a class="button button-clear">Thu</a>
            <a class="button button-clear">Fri</a>
        </div>
    </ion-tabs>
    <ion-content class="padding has-tabs-top">
     ...
    </ion-content>
</ion-view>

【讨论】：