feat: Badges in ion-tabs

[donhmorris]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Would be helpful to specify the display of a badge with a numeric count within a particular ion-tab-button

Describe the Use Case

Show the count of new messages for a tab button that navigates to an inbox page.

Describe Preferred Solution

Add the following properties to ion-tab-button

• displayBadge: boolean
• badgeValue: number
• badgeColor: color

Describe Alternatives

Haven't really discovered anything I like.

Related Code

No response

Additional Information

No response

[EinfachHans]

I just use <ion-badge>, doesn't that work for you?

[donhmorris]

I just use <ion-badge>, doesn't that work for you?

I tried it with the tabs starter project. It doesn't seem to work well. After viewing the result, I get the feeling the designers didn't plan for it because it doesn't look right. The badge is jammed against the icon with no margin or spacing. I can add spacing with css but i don't usually need to do this for badges. They normally just work.

I think we need to hear from the team the official word on using badges in tab buttons and update the documentation accordingly.

[sean-perkins]

I am no longer on the team, but ion-badge is the correct/intended component for this usage. ion-tab-button has specific styling targeting when an ion-badge is slotted:

ionic-framework/core/src/components/tab-button/tab-button.ios.scss

Lines 16 to 28 in ff214bd

	// iOS Tab Button: Badge
	// --------------------------------------------------
	::slotted(ion-badge) {
	@include padding(1px, 6px);
	@include position(4px, null, null, calc(50% + 6px));
	height: auto;
	font-size: 12px;
	line-height: 16px;
	}

Since the element is slotted, badge's position can be customized through CSS in the light dom.

[donhmorris]

Sean, are you saying that I can choose a slot like 'end' when including a badge? The docs for ion-tab-button and ion-tab say there aren't any slots for these components.

I tried specifying a slot and the badge disappears.

`

Tab 1 5

<ion-tab-button tab="tab2" href="/tabs/tab2">
  <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
  <ion-label>Tab 2</ion-label>
  <ion-badge color="success">10</ion-badge>
</ion-tab-button>

<ion-tab-button tab="tab3" href="/tabs/tab3">
  <ion-icon aria-hidden="true" name="square"></ion-icon>
  <ion-label>Tab 3</ion-label>
  <ion-badge slot="end" color="danger">7</ion-badge>
</ion-tab-button>

`

[sean-perkins]

ion-tab-button supports a single/default slot:

ionic-framework/core/src/components/tab-button/tab-button.tsx

Line 179 in ff214bd

<slot></slot>

e.g.:

<ion-tab-button>
  Text
  <ion-badge></ion-badge>
</ion-tab-button>

The styling shared earlier will target the badge and position it absolutely in the container.

[donhmorris]

Ok, but it doesn't work well. The badge gets jammed against the icon. I can use css to move it farther away but it seems like the default slot should obviate that. Seems broken based on the appearance.

[sean-perkins]

Ionicons are not of a consistent viewbox, so you will need to manually position your badge if you want a specific visual appearance.

Ionic Framework tries to closely resemble the visual appearance of the iOS tab bar: https://developer.apple.com/documentation/swiftui/tabview

[donhmorris]

I can live with that.

[donhmorris]

I think the docs should be updated for any component that has a 'default' slot. I wasn't aware that such a thing existed nor how it works. Maybe I missed that.

Probably would be a good idea to update the docs for ion-tabs to cover the use of badges since it is such a common use case and it's not obvious how to do it. I've spoken to other devs who didn't know how it works.

Thanks for commenting.