docs(material/card): Update card examples (#29259)

(cherry picked from commit bfdb1a2)

Author: amysorto

src/components-examples/material/card/BUILD.bazel

@@ -19,6 +19,7 @@ ng_module(
         "//src/material/button/testing",
         "//src/material/card",
         "//src/material/card/testing",
+        "//src/material/chips",
         "//src/material/divider",
         "//src/material/progress-bar",
         "@npm//@angular/platform-browser",

src/components-examples/material/card/card-actions/card-actions-example.html

@@ -1,21 +1,19 @@
-<mat-card>
+<mat-card appearance="outlined">
   <mat-card-header>
-    <mat-card-title>Actions Buttons</mat-card-title>
-    <mat-card-subtitle>Start</mat-card-subtitle>
+    <mat-card-title> Australian Shepherd</mat-card-title>
+    <mat-card-subtitle>Herding group</mat-card-subtitle>
   </mat-card-header>
   <mat-card-actions>
-    <button mat-button>LIKE</button>
-    <button mat-button>SHARE</button>
+    <button mat-button>Learn More</button>
   </mat-card-actions>
 </mat-card>
 <br>
-<mat-card>
+<mat-card appearance="outlined">
   <mat-card-header>
-    <mat-card-title>Actions Buttons</mat-card-title>
-    <mat-card-subtitle>End</mat-card-subtitle>
+    <mat-card-title>Poodle</mat-card-title>
+    <mat-card-subtitle>Non-sporting group</mat-card-subtitle>
   </mat-card-header>
   <mat-card-actions align="end">
-    <button mat-button>LIKE</button>
-    <button mat-button>SHARE</button>
+    <button mat-button>Learn More</button>
   </mat-card-actions>
 </mat-card>

src/components-examples/material/card/card-actions/card-actions-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 
@@ -10,5 +10,6 @@ import {MatCardModule} from '@angular/material/card';
   templateUrl: 'card-actions-example.html',
   standalone: true,
   imports: [MatCardModule, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardActionsExample {}

src/components-examples/material/card/card-fancy/card-fancy-example.html

@@ -1,4 +1,4 @@
-<mat-card class="example-card">
+<mat-card class="example-card" appearance="outlined">
   <mat-card-header>
     <div mat-card-avatar class="example-header-image"></div>
     <mat-card-title>Shiba Inu</mat-card-title>

src/components-examples/material/card/card-fancy/card-fancy-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 
@@ -11,5 +11,6 @@ import {MatCardModule} from '@angular/material/card';
   styleUrl: 'card-fancy-example.css',
   standalone: true,
   imports: [MatCardModule, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardFancyExample {}

src/components-examples/material/card/card-footer/card-footer-example.css

@@ -2,3 +2,6 @@
   max-width: 400px;
 }
 
+.example-card-footer {
+  padding: 16px;
+}

src/components-examples/material/card/card-footer/card-footer-example.html

@@ -1,18 +1,15 @@
-<mat-card class="example-card">
+<mat-card class="example-card" appearance="outlined">
   <mat-card-header>
-    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-    <mat-card-title>Shiba Inu</mat-card-title>
+    <mat-card-title>Chihuahua</mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <p>This card has divider and indeterminate progress as footer</p>
-    <p>{{ longText }}</p>
-    <mat-divider></mat-divider>
+    <p>{{longText}}</p>
   </mat-card-content>
-  <mat-card-actions>
-    <button mat-button>LIKE</button>
-    <button mat-button>SHARE</button>
-  </mat-card-actions>
-  <mat-card-footer>
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  <mat-card-footer class="example-card-footer">
+    <mat-chip-set aria-label="Chihuahua traits">
+      <mat-chip>charming</mat-chip>
+      <mat-chip>graceful</mat-chip>
+      <mat-chip>sassy</mat-chip>
+    </mat-chip-set>
   </mat-card-footer>
 </mat-card>

src/components-examples/material/card/card-footer/card-footer-example.ts

@@ -1,8 +1,7 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {MatButtonModule} from '@angular/material/button';
-import {MatDividerModule} from '@angular/material/divider';
 import {MatCardModule} from '@angular/material/card';
+import {MatChipsModule} from '@angular/material/chips';
 
 /**
  * @title Card with footer
@@ -12,10 +11,11 @@ import {MatCardModule} from '@angular/material/card';
   templateUrl: 'card-footer-example.html',
   styleUrl: 'card-footer-example.css',
   standalone: true,
-  imports: [MatCardModule, MatDividerModule, MatButtonModule, MatProgressBarModule],
+  imports: [MatCardModule, MatChipsModule, MatProgressBarModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardFooterExample {
-  longText = `The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog
-  from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was
-  originally bred for hunting.`;
+  longText = `The Chihuahua is a Mexican breed of toy dog. It is named for the
+  Mexican state of Chihuahua and is among the smallest of all dog breeds. It is
+  usually kept as a companion animal or for showing.`;
 }

src/components-examples/material/card/card-harness/card-harness-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 
@@ -10,5 +10,6 @@ import {MatCardModule} from '@angular/material/card';
   templateUrl: 'card-harness-example.html',
   standalone: true,
   imports: [MatCardModule, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardHarnessExample {}

src/components-examples/material/card/card-media-size/card-media-size-example.html

@@ -1,5 +1,5 @@
 <!-- Cards with media area -->
-<mat-card class="example-card">
+<mat-card class="example-card" appearance="outlined">
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Shiba Inu</mat-card-title>
@@ -12,7 +12,7 @@
   </mat-card-content>
 </mat-card>
 
-<mat-card class="example-card">
+<mat-card class="example-card" appearance="outlined">
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Shiba Inu</mat-card-title>
@@ -25,7 +25,7 @@
   </mat-card-content>
 </mat-card>
 
-<mat-card class="example-card">
+<mat-card class="example-card" appearance="outlined">
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Shiba Inu</mat-card-title>
@@ -38,7 +38,7 @@
   </mat-card-content>
 </mat-card>
 
-<mat-card class="example-card">
+<mat-card class="example-card" appearance="outlined">
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Shiba Inu</mat-card-title>

src/components-examples/material/card/card-media-size/card-media-size-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
 
 /**
@@ -10,6 +10,7 @@ import {MatCardModule} from '@angular/material/card';
   styleUrl: 'card-media-size-example.css',
   standalone: true,
   imports: [MatCardModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardMediaSizeExample {
   longText = `The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog

src/components-examples/material/card/card-overview/card-overview-example.html

@@ -1,3 +1,3 @@
-<mat-card>
+<mat-card appearance="outlined">
   <mat-card-content>Simple card</mat-card-content>
 </mat-card>

src/components-examples/material/card/card-overview/card-overview-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
 
 /**
@@ -9,5 +9,6 @@ import {MatCardModule} from '@angular/material/card';
   templateUrl: 'card-overview-example.html',
   standalone: true,
   imports: [MatCardModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardOverviewExample {}

src/components-examples/material/card/card-subtitle/card-subtitle-example.css

@@ -3,5 +3,4 @@ export {CardOverviewExample} from './card-overview/card-overview-example';
 export {CardHarnessExample} from './card-harness/card-harness-example';
 export {CardActionsExample} from './card-actions/card-actions-example';
 export {CardMediaSizeExample} from './card-media-size/card-media-size-example';
-export {CardSubtitleExample} from './card-subtitle/card-subtitle-example';
 export {CardFooterExample} from './card-footer/card-footer-example';