離子導航欄的按鈕欄未顯示全高

Question

按鈕欄未顯示其與導航欄的完整高度，似乎它正試圖適應ion-nav-bar。 這是到目前為止我得到的：

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>

Answer 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>

額外：我假設您正在使用入門模板。 如果您希望這些標簽停留在頂部。 您可以在ion-tabs中使用class tabs-top

Answer 2

我按照Karan Kumar的建議使用了離子標簽來使其工作。 為了解決填充問題，我在離子含量中添加了has-tabs-top。 使用清除按鈕刪除按鈕的邊框

<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>

離子導航欄的按鈕欄未顯示全高

問題描述

2 個解決方案

解決方案1
1 2015-07-23 06:15:11

解決方案2
0 2015-07-25 03:39:45

離子導航欄的按鈕欄未顯示全高

問題描述

2 個解決方案

解決方案1 1 2015-07-23 06:15:11

解決方案2 0 2015-07-25 03:39:45

解決方案1
1 2015-07-23 06:15:11

解決方案2
0 2015-07-25 03:39:45