离子标签徽章

Question

我正在尝试在选项卡中的图标上添加徽章。当前结果为：http://play.ionic.io/app/decfc14cb171

谁知道怎么把它们放在每个图标的右上角？

我尝试使用，但事实证明在其他方面问题更多，尽管使用"badge"属性更容易达到预期效果。有没有不使用 ion-tabs 复制它的方法？

Answer 1

我建议使用 Ionic 的 ion-tabs 指令，因为它 "first class" 支持徽章。 ion-tab 元素有一个 "badge" 属性，这使得向图标添加文本（在你的例子中是数字）变得非常容易。

我在这里写了一个演示：

http://play.ionic.io/app/c6e96276e8fd

添加标签的代码在这里：

<ion-tabs class="tabs-icon-top tabs-striped">

 <ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="3" badge style="badge-assertive">
   <ion-nav-view name="home-tab"></ion-nav-view>
 </ion-tab>

 <ion-tab title="About" icon=" ion-ios-paper" href="#/tab/about" badge="5" badge-style="badge-assertive">
   <ion-nav-view name="about-tab"></ion-nav-view>
 </ion-tab>

</ion-tabs>

结果如下所示：

Answer 2

[仅适用于 ioinc 1]

看到这个：http://play.ionic.io/app/52586f24b84d
您需要制作一个 class 和相对位置

.badge-container{
      position: relative;
}

并这样分配给<i>标签，徽章会自动调整

<i class="icon ion-home badge-container"><span class="badge badge-assertive">3</span></i>

其他选项卡也是如此

<i class="icon ion-ios-paper badge-container"><span class="badge badge-assertive">5</span></i>

现在您还可以通过为徽章提供边距等来进一步更改徽章的位置。

Answer 3

在最新的 Ionic 文档中出现了一种不同的执行方式：

在选项卡代码中使用 tabBadget 和 tabBadgetStyle 属性，如下所示：

 <ion-tabs>
      <ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
      <ion-tab tabIcon="chatbubbles" [root]="tabTwo" tabBadge="14" tabBadgeStyle="danger"></ion-tab>
      <ion-tab tabIcon="musical-notes" [root]="tabThree"></ion-tab>
    </ion-tabs>

它说 "danger" 是您在主题中定义的颜色...

希望对2017年的新人有所帮助！

离子标签徽章

Ionic tabs Badge

tabs

icons

ionic-framework

ionic

badge