Skip to content

Commit c4f80b4

Browse files
rameshworshtmmalerba
rameshworsht
authored and
mmalerba
committed
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 (cherry picked from commit dc9a905)
1 parent 116766d commit c4f80b4

File tree

13 files changed

+173
-0
lines changed

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

0 commit comments

Comments
 (0)