如何在Ionic选项卡中插入数字

Question

我想在标签中显示一些待处理的图书。我想在离子选项卡图标中显示一个数字。有可能吗？

喜欢这张图片。

<ion-tabs class="tabs-striped tabs-dark tabs-background-positive">

  <ion-tab title="Fila" icon-off="ion-ios-people dark" icon-on="ion-ios-people" href="#/tab/queue">
    <ion-nav-view name="tab-queue"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Comissões" icon-off="ion-social-usd-outline dark" icon-on="ion-social-usd-outline" href="#/tab/profit">
    <ion-nav-view name="tab-profit"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Agenda" icon-off="ion-ios-calendar-outline dark" icon-on="ion-ios-calendar-outline" href="#/tab/book">
    <span><number here ??></span>
    <ion-nav-view name="tab-book"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Perfil" icon-off="ion-android-person dark" icon-on="ion-android-person" href="#/tab/profile">
    <ion-nav-view name="tab-profile"></ion-nav-view>
  </ion-tab>
</ion-tabs>

Answer 1

我找到了解决方案。只需使用徽章Attr。 感谢

http://ionicframework.com/docs/api/directive/ionTab/

Answer 2

将您的容器设为position:relative，然后将position:absolute添加到数字容器中（它可以是p，span，div标签，任何内容，不重要）。 然后，您可以更改数字容器的top，left，right和bottom属性，以便根据需要对其进行定位。

＆＃13;

＆＃13;

ion-tab{
  
  position:relative;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  }

ion-tab span {
  position: absolute;
  top: 0;
  right: 0;
  }

＆＃13;

    <ion-tab>
        <span>10 </span>
    </ion-tab>

＆＃13;

＆＃13;

＆＃13;

确保在希望编号所在的离子选项卡中添加该span标记。