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.
Subscribe to Paul Halliday
Get the latest posts delivered right to your inbox