如何在Ionic CSS上添加strped标签

Yasser B. 发表于 Dev

Yasser B.

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

我在顶部添加条纹选项卡时遇到问题。条纹选项卡不位于顶部。见附图：

在此处输入图片说明

这是我的身体代码:)：

<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 +演示

左撇子

如果您不希望导航栏并且希望您的选项卡显示在视图的顶部，只需添加以下样式：

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

在这里看看codepen 。

更新：

我猜问题出在您定义标签的方式上。

在index.html（主页）中，您将看到以下内容：

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

然后您将在另一个页面（视图）中定义标签：

<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>（参考此处）。在里面，<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>必须添加一个（参考此处）和您的内容<ion-content>（参考此处）。

看看这个矮子，看看它是否对您有用。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。