Open donhmorris opened 2 weeks ago
I just use <ion-badge>
, doesn't that work for you?
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.
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: https://github.com/ionic-team/ionic-framework/blob/ff214bd5f3da947d861d5d0b81575791c391a9b8/core/src/components/tab-button/tab-button.ios.scss#L16-L28
Since the element is slotted, badge's position can be customized through CSS in the light dom.
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.
`
`
ion-tab-button
supports a single/default slot: https://github.com/ionic-team/ionic-framework/blob/ff214bd5f3da947d861d5d0b81575791c391a9b8/core/src/components/tab-button/tab-button.tsx#L179
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.
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.
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
I can live with that.
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.
Prerequisites
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
Describe Alternatives
Haven't really discovered anything I like.
Related Code
No response
Additional Information
No response