docs(material/list): extend list examples (#32427)

Added examples for the use of MatActionList, MatNavList, MatListItemAvatar
and these also include the use of togglePosition, activated, matListItemMeta and matSubheader

close #32130

Author: szoboszlaypali

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';

src/components-examples/material/list/list-action/list-action-example.html

@@ -0,0 +1,4 @@
+<mat-action-list>
+  <button mat-list-item (click)="action('save')">Save</button>
+  <button mat-list-item (click)="action('undo')">Undo</button>
+</mat-action-list>

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);
+  }
+}

src/components-examples/material/list/list-avatar/list-avatar-example.html

@@ -0,0 +1,11 @@
+<mat-selection-list>
+  <mat-list-option togglePosition="before">
+    <img matListItemAvatar src="https://material.angular.dev/assets/img/examples/shiba1.jpg" />
+    <span matListItemTitle>Shiba Inu</span>
+  </mat-list-option>
+
+  <mat-list-option togglePosition="after">
+    <img matListItemAvatar src="https://material.angular.dev/assets/img/examples/shiba2.jpg" />
+    <span matListItemTitle>Other Shiba Inu</span>
+  </mat-list-option>
+</mat-selection-list>

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 {}

src/components-examples/material/list/list-navigation/list-navigation-example.html

@@ -0,0 +1,27 @@
+<mat-nav-list>
+  @for (link of fragments; track link) {
+    <a
+      mat-list-item
+      href="#{{link}}"
+      (click)="$event.preventDefault(); activeLink=link;"
+      [activated]="activeLink === link"
+      >{{link | titlecase}}</a
+    >
+  }
+
+  <h3 matSubheader>List with icons</h3>
+  @for (link of fragments; track link) {
+    <a
+      mat-list-item
+      [activated]="activeLink===link"
+      href="#{{link}}"
+      (click)="$event.preventDefault(); activeLink=link;"
+    >
+      <mat-icon matListItemIcon>folder</mat-icon>
+      <span matListItemTitle>{{ link | titlecase}}</span>
+      <div matListItemMeta>
+        <mat-icon>{{link}}</mat-icon>
+      </div>
+    </a>
+  }
+</mat-nav-list>

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;
+}