0

I am working with Ionic 6, and I want to put a badge on one of my tab buttons. Simular to the first red one in this image (vuetify):

Vuetify badge

An empty badge in Ionic seems to be invisible. For now I am using this workaround, adding a char, and coloring it the same as the background. Does anyone have a better idea?

 <ion-page>
        <ion-tabs>
            <ion-router-outlet></ion-router-outlet>
            <ion-tab-bar slot="bottom">
                <ion-tab-button tab="tabQr" href="/tabs/tabQr">
                    <ion-icon :icon="qrCode" />
                    <ion-label>QR</ion-label>
                </ion-tab-button>

                <ion-tab-button tab="tabHome" href="/tabs/tabHome">
                    <ion-icon :icon="home" />
                    <ion-label>Home</ion-label>
                </ion-tab-button>

                <ion-tab-button tab="tabVisit" href="/tabs/tabVisit">
                    <ion-icon :icon="clipboard" />
                    <ion-label>Visit</ion-label>
                    <ion-badge color="danger" style="color: red">-</ion-badge>
                </ion-tab-button>

                <ion-tab-button tab="tabNfc" href="/tabs/tabNfc">
                    <ion-icon :icon="radio" />
                    <ion-label>Sensor</ion-label>
                </ion-tab-button>
            </ion-tab-bar>
        </ion-tabs>
    </ion-page>

Ionic tab page workaround

Thanks!

Denxorz
  • 316
  • 1
  • 4
  • 15

1 Answers1

0

You can add some css to your file

ion-badge {
  display: block;
  height: 12px;
  width: 12px;
  border-radius: 15px;
  margin: 0.5rem;
  color: red;
}

and now you can delete the unwanted icon from your code, like this:

 <ion-tab-button tab="tabVisit" href="/tabs/tabVisit">
                    <ion-label>Visit</ion-label>
                    <ion-badge></ion-badge>
 </ion-tab-button>

I hope this is helpful!

Mădă
  • 1
  • 3