diff --git a/src/components-examples/material/list/index.ts b/src/components-examples/material/list/index.ts index 6c3b3ffe33ae..d3a8268a819e 100644 --- a/src/components-examples/material/list/index.ts +++ b/src/components-examples/material/list/index.ts @@ -5,3 +5,6 @@ export {ListSingleSelectionExample} from './list-single-selection/list-single-se export {ListSingleSelectionReactiveFormExample} from './list-single-selection-reactive-form/list-single-selection-reactive-form-example'; export {ListHarnessExample} from './list-harness/list-harness-example'; export {ListVariantsExample} from './list-variants/list-variants-example'; +export {ListActionExample} from './list-action/list-action-example'; +export {ListAvatarExample} from './list-avatar/list-avatar-example'; +export {ListNavigationExample} from './list-navigation/list-navigation-example'; diff --git a/src/components-examples/material/list/list-action/list-action-example.html b/src/components-examples/material/list/list-action/list-action-example.html new file mode 100644 index 000000000000..68f3c032f6dd --- /dev/null +++ b/src/components-examples/material/list/list-action/list-action-example.html @@ -0,0 +1,4 @@ + + + + diff --git a/src/components-examples/material/list/list-action/list-action-example.ts b/src/components-examples/material/list/list-action/list-action-example.ts new file mode 100644 index 000000000000..c095b77e9d9a --- /dev/null +++ b/src/components-examples/material/list/list-action/list-action-example.ts @@ -0,0 +1,16 @@ +import {Component} from '@angular/core'; +import {MatListModule} from '@angular/material/list'; + +/** + * @title Action list + */ +@Component({ + selector: 'list-action-example', + templateUrl: 'list-action-example.html', + imports: [MatListModule], +}) +export class ListActionExample { + action(task: string) { + window.alert(task); + } +} diff --git a/src/components-examples/material/list/list-avatar/list-avatar-example.html b/src/components-examples/material/list/list-avatar/list-avatar-example.html new file mode 100644 index 000000000000..2e4b6dbfc7b3 --- /dev/null +++ b/src/components-examples/material/list/list-avatar/list-avatar-example.html @@ -0,0 +1,11 @@ + + + + Shiba Inu + + + + + Other Shiba Inu + + diff --git a/src/components-examples/material/list/list-avatar/list-avatar-example.ts b/src/components-examples/material/list/list-avatar/list-avatar-example.ts new file mode 100644 index 000000000000..d2081b9bbc6d --- /dev/null +++ b/src/components-examples/material/list/list-avatar/list-avatar-example.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {MatListModule} from '@angular/material/list'; + +/** + * @title Selection list with avatars + */ +@Component({ + selector: 'list-avatar-example', + templateUrl: 'list-avatar-example.html', + imports: [MatListModule], +}) +export class ListAvatarExample {} diff --git a/src/components-examples/material/list/list-navigation/list-navigation-example.html b/src/components-examples/material/list/list-navigation/list-navigation-example.html new file mode 100644 index 000000000000..f371e070827d --- /dev/null +++ b/src/components-examples/material/list/list-navigation/list-navigation-example.html @@ -0,0 +1,27 @@ + + @for (link of fragments; track link) { + {{link | titlecase}} + } + +

List with icons

+ @for (link of fragments; track link) { + + folder + {{ link | titlecase}} +
+ {{link}} +
+
+ } +
diff --git a/src/components-examples/material/list/list-navigation/list-navigation-example.ts b/src/components-examples/material/list/list-navigation/list-navigation-example.ts new file mode 100644 index 000000000000..3a37f23f192d --- /dev/null +++ b/src/components-examples/material/list/list-navigation/list-navigation-example.ts @@ -0,0 +1,17 @@ +import {TitleCasePipe} from '@angular/common'; +import {Component} from '@angular/core'; +import {MatIconModule} from '@angular/material/icon'; +import {MatListModule} from '@angular/material/list'; + +/** + * @title Navigation list + */ +@Component({ + selector: 'list-navigation-example', + templateUrl: 'list-navigation-example.html', + imports: [MatListModule, MatIconModule, TitleCasePipe], +}) +export class ListNavigationExample { + fragments = ['inbox', 'outbox', 'drafts']; + activeLink: string | null = null; +}