Skip to content

Commit 422f1fd

Browse files
Update demo to use base classes
1 parent 67a4962 commit 422f1fd

File tree

1 file changed

+35
-35
lines changed

1 file changed

+35
-35
lines changed

src/dev-app/mdc-chips/mdc-chips-demo.html

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,84 +5,84 @@
55
<mat-card-content>
66
<h4>Simple</h4>
77

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>
1313

1414
<h4>Unstyled</h4>
1515

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>
2121

2222
<h4>Advanced</h4>
2323

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>
2626

27-
<mat-chip-cell color="warn" selected="true" *ngIf="visible"
27+
<mat-chip color="warn" selected="true" *ngIf="visible"
2828
(destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
2929
With Events
3030
<mat-icon matChipRemove>cancel</mat-icon>
31-
</mat-chip-cell>
32-
</mat-chip-grid>
31+
</mat-chip>
32+
</mat-chip-set>
3333
<div>{{message}}</div>
3434

3535
<h4>With avatar and icons</h4>
3636

37-
<mat-chip-grid>
38-
<mat-chip-cell disabled>
37+
<mat-chip-set>
38+
<mat-chip disabled>
3939
<mat-icon matChipAvatar>home</mat-icon>
4040
Home
4141
<mat-icon matChipRemove>cancel</mat-icon>
42-
</mat-chip-cell>
42+
</mat-chip>
4343

44-
<mat-chip-cell color="accent" selected="true">
44+
<mat-chip color="accent" selected="true">
4545
<mat-chip-avatar>P</mat-chip-avatar>
4646
Portel
4747
<mat-icon matChipRemove>cancel</mat-icon>
48-
</mat-chip-cell>
48+
</mat-chip>
4949

50-
<mat-chip-cell>
50+
<mat-chip>
5151
<mat-chip-avatar>M</mat-chip-avatar>
5252
Molly
53-
</mat-chip-cell>
53+
</mat-chip>
5454

55-
<mat-chip-cell>
55+
<mat-chip>
5656
Koby
5757
<mat-icon matChipRemove>cancel</mat-icon>
58-
</mat-chip-cell>
58+
</mat-chip>
5959

60-
<mat-chip-cell>
60+
<mat-chip>
6161
Razzle
62-
</mat-chip-cell>
62+
</mat-chip>
6363

64-
<mat-chip-cell>
64+
<mat-chip>
6565
<img src="https://material.angularjs.org/material2_assets/ngconf/Mal.png" matChipAvatar>
6666
Mal
67-
</mat-chip-cell>
67+
</mat-chip>
6868

69-
<mat-chip-cell selected="true" color="warn">
69+
<mat-chip selected="true" color="warn">
7070
<img src="https://material.angularjs.org/material2_assets/ngconf/Husi.png" matChipAvatar>
7171
Husi
7272
<mat-icon matChipRemove>cancel</mat-icon>
73-
</mat-chip-cell>
73+
</mat-chip>
7474

75-
<mat-chip-cell>
75+
<mat-chip>
7676
Good
7777
<mat-icon matChipTrailingIcon>star</mat-icon>
78-
</mat-chip-cell>
78+
</mat-chip>
7979

80-
<mat-chip-cell>
80+
<mat-chip>
8181
Bad
8282
<mat-icon matChipTrailingIcon>star_border</mat-icon>
83-
</mat-chip-cell>
83+
</mat-chip>
8484

85-
</mat-chip-grid>
85+
</mat-chip-set>
8686
</mat-card-content>
8787
</mat-card>
8888
</div>

0 commit comments

Comments
 (0)