离子标签徽章

Question

我正在尝试在标签中的“我的图标”上添加徽章。 目前的结果是：http://play.ionic.io/app/decfc14cb171

有谁知道如何将它们放在每个图标的右上角？

我尝试使用 ，但事实证明在其他方面存在问题，尽管使用＆＃34;徽章＆＃34;属性更容易达到预期的效果。有没有办法在不使用离子标签的情况下复制它？

Answer 1

我建议使用Ionic的ion-tabs指令，因为它有徽章的“头等”支持。 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
你需要创建一个具有相对位置的类

.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 doc中，出现了不同的做法：

使用选项卡代码中的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>

它说＆＃34;危险＆＃34;是您在主题中定义的颜色......

希望有助于新人在2017年找到答案！