-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
badge-demo.html
102 lines (79 loc) · 2.74 KB
/
badge-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<div>
<div class="demo-badge">
<h3>Text</h3>
<span [matBadge]="badgeContent" matBadgeOverlap="false" *ngIf="visible">
Hello
</span>
<span matBadge="11111" matBadgeOverlap="false">
Hello
</span>
<span matBadge="22" matBadgeOverlap="false" matBadgePosition="below after" matBadgeColor="accent">
Hello
</span>
<span matBadge="22" matBadgeOverlap="false" matBadgePosition="above before" matBadgeColor="warn">
Hello
</span>
<span matBadge="⚡️" matBadgeOverlap="false" matBadgePosition="below before">
Hello
</span>
<span [matBadge]="badgeContent" matBadgeDescription="I've got {{badgeContent}} problems">
Aria
</span>
<span [matBadge]="badgeContent" matBadgeHidden="true">
Hidden
</span>
<input type="text" [(ngModel)]="badgeContent" />
<button (click)="visible = !visible">Toggle</button>
</div>
<div class="demo-badge">
<h3>Buttons</h3>
<button mat-raised-button [matBadge]="badgeContent">
<mat-icon color="primary">home</mat-icon>
</button>
<button mat-raised-button matBadge="22" matBadgePosition="below after" color="primary" matBadgeColor="accent">
<mat-icon color="accent">home</mat-icon>
</button>
<button mat-raised-button matBadge="22" matBadgePosition="above before">
<mat-icon color="primary">home</mat-icon>
</button>
<button mat-raised-button [matBadge]="badgeContent" matBadgeDisabled>
<mat-icon color="primary">home</mat-icon>
</button>
<button mat-stroked-button [matBadge]="badgeContent">
<mat-icon color="primary">home</mat-icon>
</button>
<button disabled mat-raised-button [matBadge]="badgeContent" matBadgeDisabled>
<mat-icon color="primary">home</mat-icon>
</button>
<button mat-raised-button matBadge="22" matBadgePosition="below before">
<mat-icon color="primary">home</mat-icon>
</button>
<button mat-raised-button>
<mat-icon color="primary" matBadge="22" color="accent">home</mat-icon>
</button>
</div>
<div class="demo-badge">
<h3>Icons</h3>
<mat-icon [matBadge]="badgeContent">
home
</mat-icon>
<mat-icon color="primary" matBadge="22" matBadgePosition="below after" matBadgeColor="accent">
home
</mat-icon>
<mat-icon color="primary" matBadge="22" matBadgePosition="above before" matBadgeColor="warn">
home
</mat-icon>
<mat-icon color="primary" matBadge="22" matBadgePosition="below before">
home
</mat-icon>
</div>
<div class="demo-badge">
<h3>Size</h3>
<mat-icon [matBadge]="badgeContent" matBadgeSize="small">
home
</mat-icon>
<mat-icon [matBadge]="badgeContent" matBadgeSize="large">
home
</mat-icon>
</div>
</div>