javascript - 如何在 Ionic css 上添加带状标签

我是 ionic 框架的新手，我开始玩并且喜欢，所以我决定做一个新的应用程序。

我在顶部添加条纹标签时遇到问题。条纹标签未定位在顶部。见附图:

enter image description here

这是我的 body 密码 :) :

<body ng-app="starter">


      <div class="tabs-striped tabs-top tabs-background-dark tabs-color-energized">
      <div class="tabs">
        <a class="tab-item" href="#">

         hier
        </a>
        <a class="tab-item active" href="#">

          aujourd'hui
        </a>
        <a class="tab-item" href="#">

          demain
        </a>
      </div>
    </div>


   <ion-content>
<div ng-controller="customersCtrl"> 
 <div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#" align="center" >
 First Item    
  </a>
       <a class="item" href="#" align="center" >
 Second Item    
  </a>
       <a class="item" href="#" align="center" >
 Third Item    
  </a>
       <a class="item" href="#" align="center" >
 Fifth Item    
  </a>


</div>
</div>
</ion-content>


  </body>

Codepen CODE + DEMO

最佳答案

如果您不想要导航栏并希望您的选项卡出现在 View 的最顶部，只需添加以下样式:

.tabs-top >.tabs, .tabs.tabs-top
{
    top: 0 !important;
}

看看codepen here .

更新:

我想问题出在您定义选项卡的方式上。

在您的 index.html(主页)中，您将拥有如下内容:

<body ng-app="app">
   <ion-nav-view></ion-nav-view>
</body>

然后您将在另一个页面( View )中定义您的选项卡:

<ion-view view-title="home" hide-nav-bar="true" hide-back-button="true">

    <ion-tabs class="tabs-striped tabs-top tabs-background-dark tabs-color-energized">

        <ion-tab title="hier">
            <ion-nav-view name="tab-1">
              <ion-content padding="true" has-header="false">
                  <h1>HOME</h1>
              </ion-content>
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="aujourd'hui">
            <ion-nav-view name="tab-2">
              <ion-content padding="true" has-header="false">
                  <h1>SETTINGS</h1>
              </ion-content>
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="demain" >
            <ion-nav-view name="tab-3">
              <ion-content padding="true" has-header="false">
                  <h1>INFO</h1>
              </ion-content>
            </ion-nav-view>
        </ion-tab>

    </ion-tabs>

</ion-view>

在顶部你有<ion-view> (引用 here)。 <ion-tabs>里面你会有你的标签:

<ion-tab title="hier">
    <ion-nav-view name="tab-1">
      <ion-content padding="true" has-header="false">
      <h1>HOME</h1>
      </ion-content>
    </ion-nav-view>
</ion-tab>

标题将出现在顶部。每个内部 <ion-tab>您必须添加一个(引用 here )和您的内容 <ion-content> (引用 here)。

看看这个plunker看看它是否适合您。

关于javascript - 如何在 Ionic css 上添加带状标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30375827/

javascript - 如何在 Ionic css 上添加带状标签

上一篇：html - Bootstrap 中单个元素 form-group 的作用是什么？

下一篇：javascript - HTML 重命名下载链接