如何在 ionic 中将徽章添加到 ion-fab

Question

我想向我的 ion-fab 添加通知徽章，我希望徽章位于徽章的右上角。 这是我的代码

<ion-fab vertical="bottom" horizontal="center" translucent="true">
    <ion-fab-button id="cart-btn" color="danger">
         <ion-icon name="notifications-outline" class="icon-button inner-center-btn"></ion-icon>
         <ion-badge id="cart-badge" color="danger">6</ion-badge>
    </ion-fab-button>
</ion-fab>

#cart-btn {
    position: relative;
    top: 1px;
    right: 1px;
    overflow: visible!important;
}


#cart-badge {
    position: absolute;
    top: 12%;
    right: 12%;
}

通知徽章确实显示在 ion-fab 内部，但是当我将 scss 代码更改为

#cart-btn {
    position: relative;
    top: -3px;
    right: -3px;
    overflow: visible!important;
}

徽章消失了，请问如何添加徽章，使其位于 ion-fab 的右上角

Answer 1

试试这个

    <ion-fab vertical="bottom" horizontal="center" translucent="true">

        <ion-badge color="primary" style="left: -5px; z-index: 3; position: absolute;">11</ion-badge>

        <ion-fab-button id="cart-btn" color="danger">
             <ion-icon name="notifications-outline" class="icon-button inner-center-btn"></ion-icon>
             <ion-badge id="cart-badge" color="danger">6</ion-badge>
        </ion-fab-button>
    </ion-fab>