离子标签徽章

Question

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

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

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

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

以下是 2022 年的具体做法（Ionic 6.x）。

您需要<ion-badge>在选项卡标记中使用：

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="dashboard">
      <ion-icon name="home"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="cart">
      <ion-badge color="danger">11</ion-badge>
      <ion-icon name="cart></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="person"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

这会给你一个看起来像这样的结果：

Answer 3

[仅适用于 ioinc 1 ]

请参阅： http: //play.ionic.io/app/52586f24b84d
您需要创建一个具有相对位置的类

.badge-container{
      position: relative;
}

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

<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>

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