docs(material/card): add more examples

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

@@ -19,6 +19,8 @@ ng_module(
         "//src/material/button/testing",
         "//src/material/card",
         "//src/material/card/testing",
+        "//src/material/divider",
+        "//src/material/progress-bar",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",

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

@@ -0,0 +1,17 @@
+<mat-card>
+  <mat-card-title>Actions Buttons</mat-card-title>
+  <mat-card-subtitle>Start</mat-card-subtitle>
+  <mat-card-actions>
+    <button mat-button>LIKE</button>
+    <button mat-button>SHARE</button>
+  </mat-card-actions>
+</mat-card>
+<br>
+<mat-card>
+  <mat-card-title>Actions Buttons</mat-card-title>
+  <mat-card-subtitle>End</mat-card-subtitle>
+  <mat-card-actions align="end">
+    <button mat-button>Like</button>
+    <button mat-button>SHARE</button>
+  </mat-card-actions>
+</mat-card>

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

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Card with actions alignment option
+ */
+@Component({
+  selector: 'card-actions-example',
+  templateUrl: 'card-actions-example.html'
+})
+export class CardActionsExample {}

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

@@ -0,0 +1,4 @@
+.example-card {
+  max-width: 400px;
+}
+

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

@@ -0,0 +1,16 @@
+<mat-card class="example-card">
+  <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+  <mat-card-title>Shiba Inu</mat-card-title>
+  <mat-card-content>
+    <p>This card has divider and indeterminate progress as footer</p>
+    <p>{{ longText }}</p>
+  </mat-card-content>
+  <mat-divider inset></mat-divider>
+  <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>
+</mat-card>

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

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Card with footer
+ */
+@Component({
+  selector: 'card-footer-example',
+  templateUrl: 'card-footer-example.html',
+  styleUrls: ['card-footer-example.css']
+})
+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.`;
+}

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

@@ -0,0 +1,4 @@
+.example-card {
+  max-width: 400px;
+  margin-bottom: 8px;
+}

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

@@ -0,0 +1,44 @@
+<!-- Cards with media area -->
+<mat-card class="example-card">
+  <mat-card-title-group>
+    <mat-card-title>Shiba Inu</mat-card-title>
+    <mat-card-subtitle>Small</mat-card-subtitle>
+    <img mat-card-sm-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
+  </mat-card-title-group>
+  <mat-card-content>
+    {{longText}}
+  </mat-card-content>
+</mat-card>
+
+<mat-card class="example-card">
+  <mat-card-title-group>
+    <mat-card-title>Shiba Inu</mat-card-title>
+    <mat-card-subtitle>Medium</mat-card-subtitle>
+    <img mat-card-md-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
+  </mat-card-title-group>
+  <mat-card-content>
+    {{longText}}
+  </mat-card-content>
+</mat-card>
+
+<mat-card class="example-card">
+  <mat-card-title-group>
+    <mat-card-title>Shiba Inu</mat-card-title>
+    <mat-card-subtitle>Large</mat-card-subtitle>
+    <img mat-card-lg-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
+  </mat-card-title-group>
+  <mat-card-content>
+    {{longText}}
+  </mat-card-content>
+</mat-card>
+
+<mat-card class="example-card">
+  <mat-card-title-group>
+    <mat-card-title>Shiba Inu</mat-card-title>
+    <mat-card-subtitle>Extra large</mat-card-subtitle>
+    <img mat-card-xl-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
+  </mat-card-title-group>
+  <mat-card-content>
+    {{longText}}
+  </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Card with media size
+ */
+@Component({
+  selector: 'card-media-size-example',
+  templateUrl: 'card-media-size-example.html',
+  styleUrls: ['card-media-size-example.css']
+})
+export class CardMediaSizeExample {
+  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.`;
+}

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

@@ -0,0 +1,3 @@
+.example-card {
+  max-width: 400px;
+}

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

@@ -0,0 +1,12 @@
+<mat-card class="example-card">
+  <mat-card-title>Shiba Inu</mat-card-title>
+  <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+  <mat-card-content>
+    <p>This card indeterminates progress bar.</p>
+    <p>{{longText}}</p>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-button>LIKE</button>
+    <button mat-button>SHARE</button>
+  </mat-card-actions>
+</mat-card>

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

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Card with sub-title
+ */
+@Component({
+  selector: 'card-subtitle-example',
+  templateUrl: 'card-subtitle-example.html',
+  styleUrls: ['card-subtitle-example.css']
+})
+export class CardSubtitleExample {
+  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.`;
+}

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

@@ -1,26 +1,42 @@
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {CardFancyExample} from './card-fancy/card-fancy-example';
 import {CardOverviewExample} from './card-overview/card-overview-example';
 import {CardHarnessExample} from './card-harness/card-harness-example';
+import {CardActionsExample} from './card-actions/card-actions-example';
+import {CardMediaSizeExample} from './card-media-size/card-media-size-example';
+import {CardSubtitleExample} from './card-subtitle/card-subtitle-example';
+import {CardFooterExample} from './card-footer/card-footer-example';
 
 export {
   CardFancyExample,
   CardOverviewExample,
   CardHarnessExample,
+  CardActionsExample,
+  CardMediaSizeExample,
+  CardSubtitleExample,
+  CardFooterExample
 };
 
 const EXAMPLES = [
   CardFancyExample,
   CardOverviewExample,
   CardHarnessExample,
+  CardActionsExample,
+  CardMediaSizeExample,
+  CardSubtitleExample,
+  CardFooterExample
 ];
 
 @NgModule({
   imports: [
     MatButtonModule,
     MatCardModule,
+    MatDividerModule,
+    MatProgressBarModule
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,