Badges are small UI elements that can be used to show bitesized information. This article takes a look at using
Badges within your Ionic applications. No dependencies are required for this project.
As always, we'll be starting out with a new project:
# Create a new Ionic project $ ionic start IonicBadges blank # Navigate to directory $ cd IonicBadges
Badges are often used as part of an
ion-item, this means we can place an icon to the left with some contextual badge information to the right.
<ion-item> <ion-icon color="primary" name="logo-facebook" item-start></ion-icon> Paul Halliday <ion-badge item-end>1,250</ion-badge> </ion-item>
With the above, our UI therefore looks like this:
You can customise your badge colour with the
color attribute, so everything from
danger, and so on works here.