Skip to content

Commit dc9a905

Browse files
rameshworshtrameshworsht
authored
docs(material/card): add more examples (#23247)
* docs(material/card): add more examples Introduce more examples with actions, footer, image size, and subtitles. * docs(material/card): add the divider and progress bar for footer * docs(material/card): incorporate feedback remove br and add margin and clean up
1 parent 530287d commit dc9a905

13 files changed

+173
-0
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ ng_module(
1919
"//src/material/button/testing",
2020
"//src/material/card",
2121
"//src/material/card/testing",
22+
"//src/material/divider",
23+
"//src/material/progress-bar",
2224
"@npm//@angular/platform-browser",
2325
"@npm//@angular/platform-browser-dynamic",
2426
"@npm//@types/jasmine",

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<mat-card>
2+
<mat-card-title>Actions Buttons</mat-card-title>
3+
<mat-card-subtitle>Start</mat-card-subtitle>
4+
<mat-card-actions>
5+
<button mat-button>LIKE</button>
6+
<button mat-button>SHARE</button>
7+
</mat-card-actions>
8+
</mat-card>
9+
<br>
10+
<mat-card>
11+
<mat-card-title>Actions Buttons</mat-card-title>
12+
<mat-card-subtitle>End</mat-card-subtitle>
13+
<mat-card-actions align="end">
14+
<button mat-button>Like</button>
15+
<button mat-button>SHARE</button>
16+
</mat-card-actions>
17+
</mat-card>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Card with actions alignment option
5+
*/
6+
@Component({
7+
selector: 'card-actions-example',
8+
templateUrl: 'card-actions-example.html'
9+
})
10+
export class CardActionsExample {}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.example-card {
2+
max-width: 400px;
3+
}
4+

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<mat-card class="example-card">
2+
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
3+
<mat-card-title>Shiba Inu</mat-card-title>
4+
<mat-card-content>
5+
<p>This card has divider and indeterminate progress as footer</p>
6+
<p>{{ longText }}</p>
7+
</mat-card-content>
8+
<mat-divider inset></mat-divider>
9+
<mat-card-actions>
10+
<button mat-button>LIKE</button>
11+
<button mat-button>SHARE</button>
12+
</mat-card-actions>
13+
<mat-card-footer>
14+
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
15+
</mat-card-footer>
16+
</mat-card>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Card with footer
5+
*/
6+
@Component({
7+
selector: 'card-footer-example',
8+
templateUrl: 'card-footer-example.html',
9+
styleUrls: ['card-footer-example.css']
10+
})
11+
export class CardFooterExample {
12+
longText = `The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog
13+
from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was
14+
originally bred for hunting.`;
15+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.example-card {
2+
max-width: 400px;
3+
margin-bottom: 8px;
4+
}

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!-- Cards with media area -->
2+
<mat-card class="example-card">
3+
<mat-card-title-group>
4+
<mat-card-title>Shiba Inu</mat-card-title>
5+
<mat-card-subtitle>Small</mat-card-subtitle>
6+
<img mat-card-sm-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
7+
</mat-card-title-group>
8+
<mat-card-content>
9+
{{longText}}
10+
</mat-card-content>
11+
</mat-card>
12+
13+
<mat-card class="example-card">
14+
<mat-card-title-group>
15+
<mat-card-title>Shiba Inu</mat-card-title>
16+
<mat-card-subtitle>Medium</mat-card-subtitle>
17+
<img mat-card-md-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
18+
</mat-card-title-group>
19+
<mat-card-content>
20+
{{longText}}
21+
</mat-card-content>
22+
</mat-card>
23+
24+
<mat-card class="example-card">
25+
<mat-card-title-group>
26+
<mat-card-title>Shiba Inu</mat-card-title>
27+
<mat-card-subtitle>Large</mat-card-subtitle>
28+
<img mat-card-lg-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
29+
</mat-card-title-group>
30+
<mat-card-content>
31+
{{longText}}
32+
</mat-card-content>
33+
</mat-card>
34+
35+
<mat-card class="example-card">
36+
<mat-card-title-group>
37+
<mat-card-title>Shiba Inu</mat-card-title>
38+
<mat-card-subtitle>Extra large</mat-card-subtitle>
39+
<img mat-card-xl-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
40+
</mat-card-title-group>
41+
<mat-card-content>
42+
{{longText}}
43+
</mat-card-content>
44+
</mat-card>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Card with media size
5+
*/
6+
@Component({
7+
selector: 'card-media-size-example',
8+
templateUrl: 'card-media-size-example.html',
9+
styleUrls: ['card-media-size-example.css']
10+
})
11+
export class CardMediaSizeExample {
12+
longText = `The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog
13+
from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was
14+
originally bred for hunting.`;
15+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.example-card {
2+
max-width: 400px;
3+
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<mat-card class="example-card">
2+
<mat-card-title>Shiba Inu</mat-card-title>
3+
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
4+
<mat-card-content>
5+
<p>This card indeterminates progress bar.</p>
6+
<p>{{longText}}</p>
7+
</mat-card-content>
8+
<mat-card-actions>
9+
<button mat-button>LIKE</button>
10+
<button mat-button>SHARE</button>
11+
</mat-card-actions>
12+
</mat-card>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Card with sub-title
5+
*/
6+
@Component({
7+
selector: 'card-subtitle-example',
8+
templateUrl: 'card-subtitle-example.html',
9+
styleUrls: ['card-subtitle-example.css']
10+
})
11+
export class CardSubtitleExample {
12+
longText = `The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog
13+
from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was
14+
originally bred for hunting.`;
15+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,42 @@
11
import {NgModule} from '@angular/core';
22
import {MatButtonModule} from '@angular/material/button';
33
import {MatCardModule} from '@angular/material/card';
4+
import {MatDividerModule} from '@angular/material/divider';
5+
import {MatProgressBarModule} from '@angular/material/progress-bar';
46
import {CardFancyExample} from './card-fancy/card-fancy-example';
57
import {CardOverviewExample} from './card-overview/card-overview-example';
68
import {CardHarnessExample} from './card-harness/card-harness-example';
9+
import {CardActionsExample} from './card-actions/card-actions-example';
10+
import {CardMediaSizeExample} from './card-media-size/card-media-size-example';
11+
import {CardSubtitleExample} from './card-subtitle/card-subtitle-example';
12+
import {CardFooterExample} from './card-footer/card-footer-example';
713

814
export {
915
CardFancyExample,
1016
CardOverviewExample,
1117
CardHarnessExample,
18+
CardActionsExample,
19+
CardMediaSizeExample,
20+
CardSubtitleExample,
21+
CardFooterExample
1222
};
1323

1424
const EXAMPLES = [
1525
CardFancyExample,
1626
CardOverviewExample,
1727
CardHarnessExample,
28+
CardActionsExample,
29+
CardMediaSizeExample,
30+
CardSubtitleExample,
31+
CardFooterExample
1832
];
1933

2034
@NgModule({
2135
imports: [
2236
MatButtonModule,
2337
MatCardModule,
38+
MatDividerModule,
39+
MatProgressBarModule
2440
],
2541
declarations: EXAMPLES,
2642
exports: EXAMPLES,

0 commit comments

Comments
 (0)