Skip to content

Commit f6116ee

Browse files
jelbournjelbourn
authored
prototype(card): create prototype card based on MDC web (#16588)
1 parent fa81811 commit f6116ee

File tree

15 files changed

+605
-19
lines changed

15 files changed

+605
-19
lines changed

‎src/dev-app/mdc-card/BUILD.bazel‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ ng_module(
1111
":mdc_card_demo_scss",
1212
],
1313
deps = [
14+
"//src/material-experimental/mdc-button",
1415
"//src/material-experimental/mdc-card",
1516
"@npm//@angular/router",
1617
],

‎src/dev-app/mdc-card/mdc-card-demo-module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@
88

99
import {NgModule} from '@angular/core';
1010
import {MatCardModule} from '@angular/material-experimental/mdc-card';
11+
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
1112
import {RouterModule} from '@angular/router';
1213
import {MdcCardDemo} from './mdc-card-demo';
1314

1415
@NgModule({
1516
imports: [
1617
MatCardModule,
18+
MatButtonModule,
1719
RouterModule.forChild([{path: '', component: MdcCardDemo}]),
1820
],
1921
declarations: [MdcCardDemo],

‎src/dev-app/mdc-card/mdc-card-demo.html‎

Lines changed: 122 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,122 @@
1-
<!-- TODO: copy in demo template from existing mat-card demo. -->
2-
Not yet implemented.
1+
<div class="demo-card-container">
2+
3+
<!-- TODO(jelbourn): re-add dividers and footers with progress bars once the MDC versions exist -->
4+
5+
<mat-card>
6+
Card with only text content
7+
</mat-card>
8+
9+
<mat-card>
10+
<mat-card-content>
11+
Card with only <code>&lt;mat-card-content&gt;</code> and text content.
12+
</mat-card-content>
13+
</mat-card>
14+
15+
<mat-card>
16+
<mat-card-subtitle>Subtitle</mat-card-subtitle>
17+
<mat-card-title>Card with title and footer</mat-card-title>
18+
<mat-card-content>
19+
<p>This is supporting text.</p>
20+
<p>{{longText}}</p>
21+
</mat-card-content>
22+
<mat-card-actions>
23+
<button mat-button>Like</button>
24+
<button mat-button>Share</button>
25+
</mat-card-actions>
26+
</mat-card>
27+
28+
<mat-card>
29+
<mat-card-subtitle>Subtitle</mat-card-subtitle>
30+
<mat-card-title>Card with title, footer, and inset-divider</mat-card-title>
31+
<mat-card-content>
32+
<p>This is supporting text.</p>
33+
<p>{{longText}}</p>
34+
</mat-card-content>
35+
<mat-card-actions>
36+
<button mat-button>Like</button>
37+
<button mat-button>Share</button>
38+
</mat-card-actions>
39+
40+
</mat-card>
41+
42+
<mat-card>
43+
<img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
44+
<mat-card-title>Content Title</mat-card-title>
45+
<mat-card-content>
46+
<p>Here is some content</p>
47+
</mat-card-content>
48+
<mat-card-actions align="end">
49+
<button mat-button>Like</button>
50+
<button mat-button>Share</button>
51+
</mat-card-actions>
52+
</mat-card>
53+
54+
<mat-card>
55+
<mat-card-header>
56+
<img mat-card-avatar>
57+
<mat-card-title>Header title</mat-card-title>
58+
<mat-card-subtitle>Header subtitle</mat-card-subtitle>
59+
</mat-card-header>
60+
<img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
61+
<mat-card-content>
62+
<p>Here is some content</p>
63+
</mat-card-content>
64+
</mat-card>
65+
66+
<mat-card class="demo-card-blue mat-card-flat">
67+
<mat-card-title>Easily customizable</mat-card-title>
68+
<mat-card-actions>
69+
<button mat-button>First</button>
70+
<button mat-button>Second</button>
71+
</mat-card-actions>
72+
</mat-card>
73+
74+
<hr>
75+
<h2>Cards with media area</h2>
76+
77+
<mat-card>
78+
<mat-card-title-group>
79+
<mat-card-title>Card</mat-card-title>
80+
<mat-card-subtitle>Small</mat-card-subtitle>
81+
<img mat-card-sm-image>
82+
</mat-card-title-group>
83+
<mat-card-content>
84+
{{longText}}
85+
</mat-card-content>
86+
</mat-card>
87+
88+
<mat-card>
89+
<mat-card-title-group>
90+
<mat-card-title>Card</mat-card-title>
91+
<mat-card-subtitle>Medium</mat-card-subtitle>
92+
<img mat-card-md-image>
93+
</mat-card-title-group>
94+
<mat-card-content>
95+
{{longText}}
96+
</mat-card-content>
97+
</mat-card>
98+
99+
<mat-card>
100+
<mat-card-title-group>
101+
<mat-card-title>Card</mat-card-title>
102+
<mat-card-subtitle>Large</mat-card-subtitle>
103+
<img mat-card-lg-image>
104+
</mat-card-title-group>
105+
<mat-card-content>
106+
{{longText}}
107+
</mat-card-content>
108+
</mat-card>
109+
110+
<mat-card>
111+
<mat-card-title-group>
112+
<mat-card-title>Card</mat-card-title>
113+
<mat-card-subtitle>Extra large</mat-card-subtitle>
114+
<img mat-card-xl-image>
115+
</mat-card-title-group>
116+
<mat-card-content>
117+
{{longText}}
118+
</mat-card-content>
119+
</mat-card>
120+
121+
122+
</div>

‎src/dev-app/mdc-card/mdc-card-demo.scss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,18 @@
1-
// TODO: copy in demo styles from existing mat-card demo.
1+
.demo-card-container {
2+
display: flex;
3+
flex-flow: column nowrap;
4+
5+
.mat-mdc-card {
6+
margin: 0 16px 16px 0;
7+
width: 350px;
8+
}
9+
10+
// Use a gray background instead of real images for that "mock" feel.
11+
img {
12+
background-color: gray;
13+
}
14+
15+
.mdc-button {
16+
text-transform: uppercase;
17+
}
18+
}

‎src/dev-app/mdc-card/mdc-card-demo.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,20 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {Component} from '@angular/core';
9+
import {Component, ViewEncapsulation} from '@angular/core';
1010

1111
@Component({
1212
moduleId: module.id,
1313
selector: 'mdc-card-demo',
1414
templateUrl: 'mdc-card-demo.html',
1515
styleUrls: ['mdc-card-demo.css'],
16+
encapsulation: ViewEncapsulation.None,
1617
})
1718
export class MdcCardDemo {
19+
longText = `Once upon a midnight dreary, while I pondered, weak and weary,
20+
Over many a quaint and curious volume of forgotten lore—
21+
While I nodded, nearly napping, suddenly there came a tapping,
22+
As of some one gently rapping, rapping at my chamber door.
23+
“’Tis some visitor,” I muttered, “tapping at my chamber door—
24+
Only this and nothing more.”`;
1825
}

‎src/material-experimental/mdc-card/BUILD.bazel‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,21 @@ sass_library(
2222
srcs = glob(["**/_*.scss"]),
2323
deps = [
2424
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
25+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
26+
"//src/material/core:core_scss_lib",
2527
],
2628
)
2729

2830
sass_binary(
2931
name = "card_scss",
3032
src = "card.scss",
33+
include_paths = [
34+
"external/npm/node_modules",
35+
],
36+
deps = [
37+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
38+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
39+
],
3140
)
3241

3342
ng_e2e_test_library(

‎src/material-experimental/mdc-card/_mdc-card.scss‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,34 @@
1+
@import '@material/card/mixins';
2+
@import '@material/typography/mixins';
13
@import '../mdc-helpers/mdc-helpers';
24

35
@mixin mat-card-theme-mdc($theme) {
6+
$foreground: map-get($theme, foreground);
7+
$is-dark-theme: map-get($theme, is-dark);
8+
49
@include mat-using-mdc-theme($theme) {
5-
// TODO: MDC theme styles here.
10+
@include mdc-card-without-ripple($query: $mat-theme-styles-query);
11+
12+
// Card subtitles are an Angular Material construct (not MDC), so we explicitly set their
13+
// color to secondary text here.
14+
.mat-mdc-card-subtitle {
15+
color: mat-color($foreground, secondary-text);
16+
}
617
}
718
}
819

920
@mixin mat-card-typography-mdc($config) {
1021
@include mat-using-mdc-typography($config) {
11-
// TODO: MDC typography styles here.
22+
@include mdc-card-without-ripple($query: $mat-typography-styles-query);
23+
24+
// Card subtitles and titles are an Angular Material construct (not MDC), so we explicitly
25+
// set their typographic styles here.
26+
.mat-mdc-card-title {
27+
@include mdc-typography(headline6);
28+
}
29+
30+
.mat-mdc-card-subtitle {
31+
@include mdc-typography(subtitle2);
32+
}
1233
}
1334
}

‎src/material-experimental/mdc-card/card-header.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<ng-content select="[mat-card-avatar], [matCardAvatar]"></ng-content>
2+
<div class="mat-mdc-card-header-text">
3+
<ng-content
4+
select="mat-card-title, mat-card-subtitle,
5+
[mat-card-title], [mat-card-subtitle],
6+
[matCardTitle], [matCardSubtitle]"></ng-content>
7+
</div>
8+
<ng-content></ng-content>

‎src/material-experimental/mdc-card/card-title-group.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div>
2+
<ng-content
3+
select="mat-card-title, mat-card-subtitle,
4+
[mat-card-title], [mat-card-subtitle],
5+
[matCardTitle], [matCardSubtitle]"></ng-content>
6+
</div>
7+
<ng-content select="[mat-card-image], [matCardImage],
8+
[mat-card-sm-image], [matCardImageSmall],
9+
[mat-card-md-image], [matCardImageMedium],
10+
[mat-card-lg-image], [matCardImageLarge],
11+
[mat-card-xl-image], [matCardImageXLarge]"></ng-content>
12+
<ng-content></ng-content>

‎src/material-experimental/mdc-card/card.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!-- TODO: MDC template here. -->
1+
<ng-content></ng-content>

0 commit comments

Comments
 (0)