Ionic 4 badge on card?

Ionic Framework ionic-v3
#1

Hello everyone,

I was wondering if the Ionic team had any future plans for implementing a badge on the new cards in Ionic 4?

ionic4_card_badge

Something like this would be very useful for a multitude of projects.

Until a feature is introduced, however, I was wondering if there were any good css classes to be used as a substitute?

#2

I know m replying late to this but here’s how it can be handled, hope it’d help someone:

<ion-card mode='ios' class="new-msgs">
    .................
       <ion-fab vertical="top" horizontal="end" edge slot="fixed">
           <span>8</span>
        </ion-fab>
     ................
</ion-card>

in your page’s scss file:

ion-card {
  &.unread-msg {
      ion-fab {
      margin: 10px 0px;
      background: var(--ion-color-primary);
      border-radius: 50%;
      padding: 2px 10px 5px 10px;
      color: var(--ion-color-primary-contrast);
      font-size: 11px;
      line-height: 2;
      right: calc(var(--ion-safe-area-right, 0px) - 10px);
    }
  }
}

here’s how it looks like now:

ionic-badge-card

1 Like