Skip to content

Commit 3371667

Browse files
rameshworshtrameshworsht
committed
docs(material/card): add more examples
Introduce more examples with actions, footer, image size, and subtitles.
1 parent 0742bab commit 3371667

File tree

12 files changed

+170
-0
lines changed

12 files changed

+170
-0
lines changed

‎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: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.example-card {
2+
max-width: 400px;
3+
}
4+
5+
.example-card-footer {
6+
padding: 0 16px;
7+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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 indeterminates progress bar and divider.</p>
6+
<p>{{ longText }}</p>
7+
</mat-card-content>
8+
<!-- <mat-divider [inset]="true"></mat-divider> -->
9+
<hr/>
10+
<mat-card-actions>
11+
<button mat-button>LIKE</button>
12+
<button mat-button>SHARE</button>
13+
</mat-card-actions>
14+
<mat-card-footer>
15+
<!-- <mat-progress-bar mode="indeterminate"></mat-progress-bar> -->
16+
<div class="example-card-footer">This is the footer!</div>
17+
</mat-card-footer>
18+
</mat-card>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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 from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.`
13+
}

‎src/components-examples/material/card/card-media-size/card-media-size-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-media-size/card-media-size-example.html‎

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

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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 from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.`
13+
}

‎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>

0 commit comments

Comments
 (0)