pefe
June 19, 2019, 2:05am
1
hello, currently i’m using ion-tab-button like this to have a “proper” badge on the ion-toolbar
<ion-buttons slot="primary">
<ion-tab-button (click)="showCart()">
<ion-icon name="cart"></ion-icon>
<ion-label>Cart</ion-label>
<ion-badge color="primary">11</ion-badge>
</ion-tab-button>
</ion-buttons>
and it doesn’t feel right to use ion-tab-button i tried using a ion-button with css and the badge gets cut off
<ion-button (click)="showCart()">
<ion-icon slot="icon-only"
name="cart">
</ion-icon>
<ion-badge color="primary">11</ion-badge>
</ion-button>
ion-button {
ion-badge {
position: absolute;
top: -0.2rem;
right: -0.2rem;
opacity: 0.9;
& ~ ion-icon {
margin-right: 1.2rem;
}
}
}
anybody have a working badge for ion-buttons in ion-toolbar?
Hi, I try this
ion-button {
ion-badge {
position: absolute;
opacity: 0.9;
top: 0.1rem;
right: 0.2rem;
& ~ ion-icon {
margin-right: 1.2rem;
}
}
<ion-button (click)="message.emit()">
<ion-badge color="primary">11</ion-badge>
<ion-icon name="md-chatboxes">
</ion-icon>
</ion-button>
Just remove slot=“icon-only”
Sagits4
November 19, 2019, 2:39pm
3
You need to use the --overvlow:visible, otherwise the ion-icon will be cut (works inside ion-header/ion-toolbar too):
ion-toolbar {
.notification-icon-button {
--overflow: visible;
ion-badge {
position: absolute;
background: #f70b0b;
border-radius: 50%;
opacity: 0.9;
top: 0.1rem;
right: 0.2rem;
}
}
}
<ion-button (click)="onNotificationsClick()" class="notification-icon-button">
<ion-badge class="notification-badge">10</ion-badge>
<ion-icon slot="icon-only" name="md-notifications"></ion-icon>
</ion-button>
3 Likes
My Ionic 5 solution:
.badge-one {
position: absolute;
top: 0px;
right: -5px;
font-size: 0.6em;
--padding-start: 5px;
--padding-end: 5px;
}
.badge-two {
position: absolute;
top: 0px;
right: -5px;
font-size: 0.6em;
--padding-start: 3px;
--padding-end: 3px;
}
<ion-button class="badge-button" routerLink="/notifications/" routerDirection="forward">
<ion-icon size="large" name="notifications-circle-outline">
</ion-icon>
<ion-badge [class.badge-one]="unread < 10" [class.badge-two]="unread >= 10" color="danger">{{ unread }}</ion-badge>
</ion-button>
P.S. I call different classes for one digit and more digits. It’s optional.
11 Likes
You are an angel dude. Thanks
1 Like
Say, I know this is an older post but… I am trying it on ionic 5 pwa and its working however my badge is not a circle, its an oval! Any help would be greatly appreciated.
<ion-button fill="clear" expand="block" (click)="clickNoti()" [routerLink]="['/notifications']">
<ion-badge [class.badge-one]="notifications < 10" [class.badge-two]="notifications >= 10" color="danger" *ngIf="notifications > 0">{{ notifications }}</ion-badge>
<ion-icon name="{{name}}" class="notification_Icon"></ion-icon>
</ion-button>
.badge-one {
position: absolute;
top: 3px;
right: -1px;
font-size: 0.8em;
--padding-start: 5px;
--padding-end: 5px;
--padding-top: 5px;
--padding-top: 5px;
border-radius: 51%;
z-index: 1;
width: 22px;
height: 22px;
}
.badge-two {
position: absolute;
top: 3px;
right: -4px;
font-size: 0.7em;
--padding-start: 4px;
--padding-end: 4px;
border-radius: 40%;
z-index: 1;
}
````ts`
notifications: number = 3;
You can use this code as above I pasted for you, if your lenght are getting increase then you increase update the css properties of class 2 and so on
