Material Badge for AngularJS
Material Badge for AngularJS design inspired customizable badges for your AngularJS applications.
Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.
By default, the badge will be placed
above after. The direction can be changed by defining the attribute
matBadgePosition follow by
<mat-icon matBadge="22" matBadgePosition="above after">home</mat-icon>
The overlap of the badge in relation to its inner contents can also be defined using the
matBadgeOverlap tag. Typically, you want the badge to overlap an icon and not a text phrase. By default it will overlap.
<h1 matBadge="11" matBadgeOverlap="false"> Email </h1>
The badge has 3 sizes:
large. By default, the badge is set to
medium. You can change the size by adding
matBadgeSize to the host element.
<h1 matBadge="11" matBadgeSize="large"> Email </h1>
The badge visibility can be toggled programmatically by defining
<h1 matBadge="11" [matBadgeHidden]="!visible"> Email </h1>
Badges can be colored in terms of the current theme using the
matBadgeColor property to set the background color to
<mat-icon matBadge="22" matBadgeColor="accent"> home </mat-icon>
Badges should be given a meaningful description via
matBadgeDescription. This description will be applied, via
aria-describedby to the element decorated by
When applying a badge to a
<mat-icon>, it is important to know that the icon is marked as
aria-hidden by default. If the combination of icon and badge communicates some meaningful information, that information should be surfaced in another way
For more Amazing Angular Plugins Click