Skip to content

Commit f05b469

Browse files
docs(material/chips): add chips avatar sample
resolves #22905
1 parent a3840ed commit f05b469

File tree

4 files changed

+34
-0
lines changed

4 files changed

+34
-0
lines changed

src/components-examples/material/chips/chips-avatar/chips-avatar-example.css

Whitespace-only changes.
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<mat-chip-list aria-label="Dog selection">
2+
<mat-chip>
3+
<mat-chip-avatar
4+
><img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="shiba1 image"
5+
/></mat-chip-avatar>
6+
Dog one
7+
</mat-chip>
8+
<mat-chip color="primary">
9+
<mat-chip-avatar
10+
><img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="shiba1 image"
11+
/></mat-chip-avatar>
12+
Dog two
13+
</mat-chip>
14+
<mat-chip color="accent">
15+
<mat-chip-avatar
16+
><img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="shiba1 image"
17+
/></mat-chip-avatar>
18+
Dog three
19+
</mat-chip>
20+
</mat-chip-list>
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Chips avatar
5+
*/
6+
@Component({
7+
selector: 'chips-avatar-example',
8+
templateUrl: 'chips-avatar-example.html',
9+
styleUrls: ['chips-avatar-example.css'],
10+
})
11+
export class ChipsAvatarExample {}

src/components-examples/material/chips/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
1313
import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
1414
import {ChipsHarnessExample} from './chips-harness/chips-harness-example';
1515
import {ChipsFormControlExample} from './chips-form-control/chips-form-control-example';
16+
import {ChipsAvatarExample} from './chips-avatar/chips-avatar-example';
1617
import {MatButtonModule} from '@angular/material/button';
1718

1819
export {
@@ -23,6 +24,7 @@ export {
2324
ChipsStackedExample,
2425
ChipsHarnessExample,
2526
ChipsFormControlExample,
27+
ChipsAvatarExample,
2628
};
2729

2830
const EXAMPLES = [
@@ -33,6 +35,7 @@ const EXAMPLES = [
3335
ChipsStackedExample,
3436
ChipsHarnessExample,
3537
ChipsFormControlExample,
38+
ChipsAvatarExample,
3639
];
3740

3841
@NgModule({

0 commit comments

Comments
 (0)