Ionic 2 Badges: Badges are basically numerical representaion of message that needs to be conveyed to the user. It is very easy to create Badges in Ionic 2. Here in this tutorial we are going to explain how you can create badges in Ionic 2 Framework. You can also use online editor to see the output of the example.
Ionic 2 Badges Example
You can create badge simply using ion-badge tag as in example below –
Ionic 2 Badges Example
<ion-item> <ion-icon name="thumbs-up" item-left=""></ion-icon> Likes <ion-badge item-right="">50K</ion-badge> </ion-item> |
If you run the above example it will produce output something like this –
Attributes
Following Attributes can be used for badges-
| Attribute | Type | Description |
|---|---|---|
| color | string | You can use this to add predefined colors such as “primary”, “danger”. |
| mode | string | Mode to apply to this component. |
Learn More About Badges
Let us have some More example and demo about the Badges.
Change Badge Color
Some times we need to change the badge color, you can change color using color attribute simply as below –
Ionic 2 Change Badges Color Example
<ion-item> <ion-icon name="thumbs-up" item-left=""></ion-icon> Likes <ion-badge color="danger" item-right="">50K</ion-badge> </ion-item> |
If you run the above example it will produce output something like this –