|
5 | 5 | <mat-card-content>
|
6 | 6 | <h4>Simple</h4>
|
7 | 7 |
|
8 |
| - <mat-chip-grid> |
9 |
| - <mat-chip-cell>Chip 1</mat-chip-cell> |
10 |
| - <mat-chip-cell>Chip 2</mat-chip-cell> |
11 |
| - <mat-chip-cell disabled>Chip 3</mat-chip-cell> |
12 |
| - </mat-chip-grid> |
| 8 | + <mat-chip-set> |
| 9 | + <mat-chip>Chip 1</mat-chip> |
| 10 | + <mat-chip>Chip 2</mat-chip> |
| 11 | + <mat-chip disabled>Chip 3</mat-chip> |
| 12 | + </mat-chip-set> |
13 | 13 |
|
14 | 14 | <h4>Unstyled</h4>
|
15 | 15 |
|
16 |
| - <mat-chip-grid> |
17 |
| - <mat-basic-chip-cell>Basic Chip 1</mat-basic-chip-cell> |
18 |
| - <mat-basic-chip-cell>Basic Chip 2</mat-basic-chip-cell> |
19 |
| - <mat-basic-chip-cell>Basic Chip 3</mat-basic-chip-cell> |
20 |
| - </mat-chip-grid> |
| 16 | + <mat-chip-set> |
| 17 | + <mat-basic-chip>Basic Chip 1</mat-basic-chip> |
| 18 | + <mat-basic-chip>Basic Chip 2</mat-basic-chip> |
| 19 | + <mat-basic-chip>Basic Chip 3</mat-basic-chip> |
| 20 | + </mat-chip-set> |
21 | 21 |
|
22 | 22 | <h4>Advanced</h4>
|
23 | 23 |
|
24 |
| - <mat-chip-grid selectable="false"> |
25 |
| - <mat-chip-cell color="accent" selected="true">Selected/Colored</mat-chip-cell> |
| 24 | + <mat-chip-set selectable="false"> |
| 25 | + <mat-chip color="accent" selected="true">Selected/Colored</mat-chip> |
26 | 26 |
|
27 |
| - <mat-chip-cell color="warn" selected="true" *ngIf="visible" |
| 27 | + <mat-chip color="warn" selected="true" *ngIf="visible" |
28 | 28 | (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
|
29 | 29 | With Events
|
30 | 30 | <mat-icon matChipRemove>cancel</mat-icon>
|
31 |
| - </mat-chip-cell> |
32 |
| - </mat-chip-grid> |
| 31 | + </mat-chip> |
| 32 | + </mat-chip-set> |
33 | 33 | <div>{{message}}</div>
|
34 | 34 |
|
35 | 35 | <h4>With avatar and icons</h4>
|
36 | 36 |
|
37 |
| - <mat-chip-grid> |
38 |
| - <mat-chip-cell disabled> |
| 37 | + <mat-chip-set> |
| 38 | + <mat-chip disabled> |
39 | 39 | <mat-icon matChipAvatar>home</mat-icon>
|
40 | 40 | Home
|
41 | 41 | <mat-icon matChipRemove>cancel</mat-icon>
|
42 |
| - </mat-chip-cell> |
| 42 | + </mat-chip> |
43 | 43 |
|
44 |
| - <mat-chip-cell color="accent" selected="true"> |
| 44 | + <mat-chip color="accent" selected="true"> |
45 | 45 | <mat-chip-avatar>P</mat-chip-avatar>
|
46 | 46 | Portel
|
47 | 47 | <mat-icon matChipRemove>cancel</mat-icon>
|
48 |
| - </mat-chip-cell> |
| 48 | + </mat-chip> |
49 | 49 |
|
50 |
| - <mat-chip-cell> |
| 50 | + <mat-chip> |
51 | 51 | <mat-chip-avatar>M</mat-chip-avatar>
|
52 | 52 | Molly
|
53 |
| - </mat-chip-cell> |
| 53 | + </mat-chip> |
54 | 54 |
|
55 |
| - <mat-chip-cell> |
| 55 | + <mat-chip> |
56 | 56 | Koby
|
57 | 57 | <mat-icon matChipRemove>cancel</mat-icon>
|
58 |
| - </mat-chip-cell> |
| 58 | + </mat-chip> |
59 | 59 |
|
60 |
| - <mat-chip-cell> |
| 60 | + <mat-chip> |
61 | 61 | Razzle
|
62 |
| - </mat-chip-cell> |
| 62 | + </mat-chip> |
63 | 63 |
|
64 |
| - <mat-chip-cell> |
| 64 | + <mat-chip> |
65 | 65 | <img src="https://material.angularjs.org/material2_assets/ngconf/Mal.png" matChipAvatar>
|
66 | 66 | Mal
|
67 |
| - </mat-chip-cell> |
| 67 | + </mat-chip> |
68 | 68 |
|
69 |
| - <mat-chip-cell selected="true" color="warn"> |
| 69 | + <mat-chip selected="true" color="warn"> |
70 | 70 | <img src="https://material.angularjs.org/material2_assets/ngconf/Husi.png" matChipAvatar>
|
71 | 71 | Husi
|
72 | 72 | <mat-icon matChipRemove>cancel</mat-icon>
|
73 |
| - </mat-chip-cell> |
| 73 | + </mat-chip> |
74 | 74 |
|
75 |
| - <mat-chip-cell> |
| 75 | + <mat-chip> |
76 | 76 | Good
|
77 | 77 | <mat-icon matChipTrailingIcon>star</mat-icon>
|
78 |
| - </mat-chip-cell> |
| 78 | + </mat-chip> |
79 | 79 |
|
80 |
| - <mat-chip-cell> |
| 80 | + <mat-chip> |
81 | 81 | Bad
|
82 | 82 | <mat-icon matChipTrailingIcon>star_border</mat-icon>
|
83 |
| - </mat-chip-cell> |
| 83 | + </mat-chip> |
84 | 84 |
|
85 |
| - </mat-chip-grid> |
| 85 | + </mat-chip-set> |
86 | 86 | </mat-card-content>
|
87 | 87 | </mat-card>
|
88 | 88 | </div>
|
0 commit comments