Badge enhancement for tabs

Ionic Framework
1

I want to propose an enhancement to tabs that would allow the use of badges to tabs for use in the ion-tabs component. One use case would be to show the count of new items in an ‘Inbox’ tab.
An example of 3 new properties for a tab:
showBadge: boolean
badgeValue: number
badgeColor: color

This enhancement would be rally helpful in providing a context for users that would guide them to look at a particular tab when there is something new.

1 Like
2

You can propose features to Ionic framework on Issues · ionic-team/ionic-framework · GitHub

1 Like
3

That is a good idea! You can make it work now too though. Right now I just show a dot when there are new community messages. But a number should work too.

image

<IonTabButton tab="community" href="/tabs/community">
    <IonIcon src="/assets/icons/tab-community.svg" />
    <IonBadge
        v-if="showCommunityMessageDot"
        class="rounded-full border border-primary-contrast p-0 leading-[0]"
        color="white"
    >
        <IonIcon class="text-xs text-red-default" :icon="ellipse" />
    </IonBadge>
    <IonLabel>Community</IonLabel>
</IonTabButton>

ion-badge.md {
    top: theme('spacing.[1.5]');
}
ion-badge.ios {
    top: theme('spacing.[0.5]');
}

Sorry not sorry for the TailwindCSS :smile: :upside_down_face:

2 Likes
4

Sounds like i posted this in the wrong place. I will post in github.