diff --git a/src/components-examples/material/card/BUILD.bazel b/src/components-examples/material/card/BUILD.bazel index e557aad32046..d5a81324ed05 100644 --- a/src/components-examples/material/card/BUILD.bazel +++ b/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", diff --git a/src/components-examples/material/card/card-actions/card-actions-example.html b/src/components-examples/material/card/card-actions/card-actions-example.html new file mode 100644 index 000000000000..5bd959e1782c --- /dev/null +++ b/src/components-examples/material/card/card-actions/card-actions-example.html @@ -0,0 +1,17 @@ + + Actions Buttons + Start + + + + + +
+ + Actions Buttons + End + + + + + \ No newline at end of file diff --git a/src/components-examples/material/card/card-actions/card-actions-example.ts b/src/components-examples/material/card/card-actions/card-actions-example.ts new file mode 100644 index 000000000000..6d3eb3f144b1 --- /dev/null +++ b/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 {} diff --git a/src/components-examples/material/card/card-footer/card-footer-example.css b/src/components-examples/material/card/card-footer/card-footer-example.css new file mode 100644 index 000000000000..81749a89098e --- /dev/null +++ b/src/components-examples/material/card/card-footer/card-footer-example.css @@ -0,0 +1,4 @@ +.example-card { + max-width: 400px; +} + diff --git a/src/components-examples/material/card/card-footer/card-footer-example.html b/src/components-examples/material/card/card-footer/card-footer-example.html new file mode 100644 index 000000000000..0d2e4937ef2c --- /dev/null +++ b/src/components-examples/material/card/card-footer/card-footer-example.html @@ -0,0 +1,16 @@ + + Dog Breed + Shiba Inu + +

This card has divider and indeterminate progress as footer

+

{{ longText }}

+
+ + + + + + + + +
\ No newline at end of file diff --git a/src/components-examples/material/card/card-footer/card-footer-example.ts b/src/components-examples/material/card/card-footer/card-footer-example.ts new file mode 100644 index 000000000000..21d9c221f632 --- /dev/null +++ b/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.`; +} diff --git a/src/components-examples/material/card/card-media-size/card-media-size-example.css b/src/components-examples/material/card/card-media-size/card-media-size-example.css new file mode 100644 index 000000000000..d360784967fb --- /dev/null +++ b/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; +} diff --git a/src/components-examples/material/card/card-media-size/card-media-size-example.html b/src/components-examples/material/card/card-media-size/card-media-size-example.html new file mode 100644 index 000000000000..1cb2f9981d02 --- /dev/null +++ b/src/components-examples/material/card/card-media-size/card-media-size-example.html @@ -0,0 +1,44 @@ + + + + Shiba Inu + Small + + + + {{longText}} + + + + + + Shiba Inu + Medium + + + + {{longText}} + + + + + + Shiba Inu + Large + + + + {{longText}} + + + + + + Shiba Inu + Extra large + + + + {{longText}} + + \ No newline at end of file diff --git a/src/components-examples/material/card/card-media-size/card-media-size-example.ts b/src/components-examples/material/card/card-media-size/card-media-size-example.ts new file mode 100644 index 000000000000..d4e88014d956 --- /dev/null +++ b/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.`; +} diff --git a/src/components-examples/material/card/card-subtitle/card-subtitle-example.css b/src/components-examples/material/card/card-subtitle/card-subtitle-example.css new file mode 100644 index 000000000000..82c7afd666f7 --- /dev/null +++ b/src/components-examples/material/card/card-subtitle/card-subtitle-example.css @@ -0,0 +1,3 @@ +.example-card { + max-width: 400px; +} diff --git a/src/components-examples/material/card/card-subtitle/card-subtitle-example.html b/src/components-examples/material/card/card-subtitle/card-subtitle-example.html new file mode 100644 index 000000000000..43e068d6002f --- /dev/null +++ b/src/components-examples/material/card/card-subtitle/card-subtitle-example.html @@ -0,0 +1,12 @@ + + Shiba Inu + Dog Breed + +

This card indeterminates progress bar.

+

{{longText}}

+
+ + + + +
\ No newline at end of file diff --git a/src/components-examples/material/card/card-subtitle/card-subtitle-example.ts b/src/components-examples/material/card/card-subtitle/card-subtitle-example.ts new file mode 100644 index 000000000000..56b02a342372 --- /dev/null +++ b/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.`; +} diff --git a/src/components-examples/material/card/index.ts b/src/components-examples/material/card/index.ts index 20532e992d9e..659f47cb2cb8 100644 --- a/src/components-examples/material/card/index.ts +++ b/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,