离子标签徽章 [英] Ionic tabs Badge

问题描述

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

I am trying to add a badge on my Icons in the tabs. The current result is: http://play.ionic.io/app/decfc14cb171

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

Does anyone know how to put them in the top-right corner of each icon?

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

I tried using but it proved more problematic in other aspects, although with the "badge" attribute is was easier to achieve the desired effect. Is there a way to replicate it without using ion-tabs?

推荐答案

[仅适用于ioinc 1]

请参阅： http：// play.ionic.io/app/52586f24b84d

您需要创建一个相对位置的班级

See this: http://play.ionic.io/app/52586f24b84d
You need to make a class with relative position

.badge-container{
      position: relative;
}

并将其分配给< i> 以这种方式标记，徽章将自动调整

And assign it to <i> tag this way, badge will be automatically adjusted

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

其他标签也一样

Same goes for other tab

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

现在，您可以通过给予保证金等额度来更改徽章的更多位置。

Now you can change further position of badge also by giving margin etc to span with badge.

这篇关于离子标签徽章的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！