Question

按钮栏没有使用导航栏显示其全高，似乎它正在尝试适合离子导航栏。这是我到目前为止所得到的：

的index.html

<div id="EmpDisplayPic" style="float: left;">
    <img id="empPic" alt="" src="http://183.82.99.100:9080/emp/GetPhoto?empId=7"  width="90px" height="100px" style="border-radius: 12px;">
</div>

制表dash.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>

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>

EXTRA：我假设您正在使用入门模板。如果您希望这些标签贴在顶部。您可以在ion-tabs

中使用课程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 个答案: