Skip to content
This repository was archived by the owner on Oct 7, 2020. It is now read-only.

Commit 301dbf1

Browse files
trimoxtrimox
authored
Implement MDC Card Component (#26)
* feat(button): Add cardAction boolean * feat(button): Set compact to true if cardAction is true. * feat(card): Initial commit for Card. More commits incoming.. * feat(card): Implement MDC Card component. Closes #24
1 parent 81b7a5d commit 301dbf1

22 files changed

+486
-124
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import { FabModule, MenuModule } from '@angular-mdc/web';
3434
| Component | Status |
3535
| ----------------- | --------------|
3636
| button | Available |
37-
| card | WIP |
37+
| card | Available |
3838
| checkbox | Available |
3939
| dialog | TBI |
4040
| drawer | TBI |

‎src/demo-app/app/app-routing.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
33

44
import { HomeComponent } from './components/home/home.component';
55
import { ButtonDemoComponent } from './components/button-demo/button-demo.component';
6+
import { CardDemoComponent } from './components/card-demo/card-demo.component';
67
import { CheckboxDemoComponent } from './components/checkbox-demo/checkbox-demo.component';
78
import { FabDemoComponent } from './components/fab-demo/fab-demo.component';
89
import { SwitchDemoComponent } from './components/switch-demo/switch-demo.component';
@@ -26,6 +27,7 @@ export const appRoutes: Routes = [
2627
{ path: 'linear-progress-demo', component: LinearProgressDemoComponent },
2728
{ path: 'typography-demo', component: TypographyDemoComponent },
2829
{ path: 'radio-demo', component: RadioDemoComponent },
30+
{ path: 'card-demo', component: CardDemoComponent },
2931
{ path: '', component: HomeComponent, pathMatch: 'full' },
3032
{ path: '**', redirectTo: '' }
3133
];

‎src/demo-app/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { RouterModule } from '@angular/router';
66

77
import { AppComponent } from './app.component';
88
import { ButtonDemoComponent } from './components/button-demo/button-demo.component';
9+
import { CardDemoComponent } from './components/card-demo/card-demo.component';
910
import { CheckboxDemoComponent } from './components/checkbox-demo/checkbox-demo.component';
1011
import { FabDemoComponent } from './components/fab-demo/fab-demo.component';
1112
import { LinearProgressDemoComponent } from './components/linear-progress-demo/linear-progress-demo.component';
@@ -37,6 +38,7 @@ import { AppRoutingModule } from './app-routing.module';
3738
declarations: [
3839
AppComponent,
3940
ButtonDemoComponent,
41+
CardDemoComponent,
4042
CheckboxDemoComponent,
4143
FabDemoComponent,
4244
HomeComponent,

‎src/demo-app/app/components/button-demo/button-demo.component.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ <h1 mdc-typography-headline>API reference</h1>
4141
<td><pre class="prettyprint">@Input() accent: boolean</pre></td>
4242
<td>Colors the button with the accent color.</td>
4343
</tr>
44+
<tr>
45+
<td><pre class="prettyprint">@Input() cardAction: boolean</pre></td>
46+
<td>Correctly sets position of card action buttons. (Sets compact to true automatically)</td>
47+
</tr>
4448
<tr>
4549
<td><pre class="prettyprint">@Input() disabled: string</pre></td>
4650
<td>Disables the component.</td>

‎src/demo-app/app/components/card-demo/card-demo.component.html‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<div fxLayout="column" fxLayoutAlign="start start" class="mdc-padding">
2+
<h1 mdc-typography-display1>Cards</h1>
3+
<p mdc-typography-subheading2>The MDC Card component is a sheet of material that serves as an entry point to more detailed information.</p>
4+
<a href="https://github.com/material-components/material-components-web/tree/master/packages/mdc-card">Google Material Components documentation</a>
5+
<h1 mdc-typography-headline>Usage</h1>
6+
<div>
7+
<pre class="prettyprint"><![CDATA[import { CardModule } from '@angular-mdc/web';]]></pre>
8+
</div>
9+
<h1 mdc-typography-headline>Selectors - More usage guide info to come.</h1>
10+
<div>
11+
<pre class="prettyprint">mdc-card</pre>
12+
<pre class="prettyprint">mdc-card-horizontal</pre>
13+
<pre class="prettyprint">mdc-card-primary</pre>
14+
<pre class="prettyprint">mdc-card-supporting-text</pre>
15+
<pre class="prettyprint">mdc-card-title</pre>
16+
<pre class="prettyprint">mdc-card-subtitle</pre>
17+
<pre class="prettyprint">mdc-card-media</pre>
18+
<pre class="prettyprint">mdc-card-media-item</pre>
19+
<pre class="prettyprint">mdc-card-actions</pre>
20+
</div>
21+
<div fxLayout="row" fxLayout.lt-md="column">
22+
<div fxLayout="column">
23+
<h1 mdc-typography-headline>API reference</h1>
24+
<table>
25+
<thead>
26+
<tr>
27+
<th>Attribute</th>
28+
<th></th>
29+
</tr>
30+
</thead>
31+
<tbody>
32+
<tr>
33+
<td><pre class="prettyprint">@Input() darkTheme: boolean</pre></td>
34+
<td>Apply dark theme directly to the card.</td>
35+
</tr>
36+
<tr>
37+
<td><pre class="prettyprint">@Input() titleLarge: boolean</pre></td>
38+
<td>An option to make the title larger. (default is true)</td>
39+
</tr>
40+
<tr>
41+
<td><pre class="prettyprint">@Input() vertical: boolean</pre></td>
42+
<td>Option to lay actions out vertically instead of horizontally.</td>
43+
</tr>
44+
</tbody>
45+
</table>
46+
</div>
47+
</div>
48+
<h1 mdc-typography-headline>Examples</h1>
49+
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutWrap fxLayoutGap="40px" fxLayoutAlign="start start">
50+
<mdc-card>
51+
<mdc-card-primary>
52+
<h1 mdc-card-title>Title</h1>
53+
<h2 mdc-card-subtitle>Subtitle</h2>
54+
</mdc-card-primary>
55+
<mdc-card-actions>
56+
<button mdc-button [cardAction]="true">Action 1</button>
57+
<button mdc-button [cardAction]="true">Action 2</button>
58+
</mdc-card-actions>
59+
</mdc-card>
60+
61+
<mdc-card class="demo-card">
62+
<mdc-card-primary>
63+
<h1 mdc-card-title>Title</h1>
64+
<h2 mdc-card-subtitle>Subtitle</h2>
65+
</mdc-card-primary>
66+
<mdc-card-supporting-text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</mdc-card-supporting-text>
67+
<mdc-card-actions>
68+
<button mdc-button [cardAction]="true">Action 1</button>
69+
<button mdc-button [cardAction]="true">Action 2</button>
70+
</mdc-card-actions>
71+
</mdc-card>
72+
73+
<mdc-card [darkTheme]="true" [ngClass]="{'mdc-theme--dark demo-card' : true}">
74+
<mdc-card-primary>
75+
<h1 mdc-card-title [titleLarge]="true">Title</h1>
76+
<h2 mdc-card-subtitle>Subtitle</h2>
77+
</mdc-card-primary>
78+
<mdc-card-actions>
79+
<button mdc-button [cardAction]="true">Action 1</button>
80+
<button mdc-button [cardAction]="true">Action 2</button>
81+
</mdc-card-actions>
82+
</mdc-card>
83+
84+
<mdc-card class="demo-card">
85+
<mdc-card-horizontal>
86+
<mdc-card-primary>
87+
<h1 mdc-card-title>Title</h1>
88+
<h2 mdc-card-subtitle>Subtitle</h2>
89+
</mdc-card-primary>
90+
<img mdc-card-media-item [size]="2" src="https://material-components-web.appspot.com/images/1-1.jpg"/>
91+
</mdc-card-horizontal>
92+
<mdc-card-actions>
93+
<button mdc-button [cardAction]="true">Action 1</button>
94+
<button mdc-button [cardAction]="true">Action 2</button>
95+
</mdc-card-actions>
96+
</mdc-card>
97+
98+
<mdc-card>
99+
<mdc-card-horizontal>
100+
<img mdc-card-media-item [size]="3" src="https://material-components-web.appspot.com/images/1-1.jpg" />
101+
<mdc-card-actions [vertical]="true">
102+
<button mdc-button [cardAction]="true">Action 1</button>
103+
<button mdc-button [cardAction]="true">Action 2</button>
104+
</mdc-card-actions>
105+
</mdc-card-horizontal>
106+
</mdc-card>
107+
108+
<mdc-card class="demo-card">
109+
<mdc-card-media [ngClass]="{'demo-card__16-9-media' : true}"></mdc-card-media>
110+
<mdc-card-primary class="test">
111+
<h1 mdc-card-title>Title</h1>
112+
<h2 mdc-card-subtitle>Subtitle</h2>
113+
</mdc-card-primary>
114+
<mdc-card-actions>
115+
<button mdc-button [cardAction]="true">Action 1</button>
116+
<button mdc-button [cardAction]="true">Action 2</button>
117+
</mdc-card-actions>
118+
</mdc-card>
119+
120+
<mdc-card class="demo-card">
121+
<mdc-card-primary>
122+
<div class="demo-card__avatar"></div>
123+
<h1 mdc-card-title>Title</h1>
124+
<h2 mdc-card-subtitle>Subtitle</h2>
125+
</mdc-card-primary>
126+
<mdc-card-media [ngClass]="{'demo-card__16-9-media' : true}"></mdc-card-media>
127+
<mdc-card-actions>
128+
<button mdc-button [cardAction]="true">Action 1</button>
129+
<button mdc-button [cardAction]="true">Action 2</button>
130+
</mdc-card-actions>
131+
</mdc-card>
132+
</div>
133+
</div>

‎src/demo-app/app/components/card-demo/card-demo.component.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {
2+
Component,
3+
OnInit
4+
} from '@angular/core';
5+
6+
@Component({
7+
selector: 'card-demo',
8+
templateUrl: './card-demo.component.html'
9+
})
10+
export class CardDemoComponent implements OnInit {
11+
ngOnInit() {
12+
let doc = <HTMLDivElement>document.body;
13+
let script = document.createElement('script');
14+
script.innerHTML = '';
15+
script.src = 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst';
16+
script.async = true;
17+
script.defer = true;
18+
doc.appendChild(script);
19+
}
20+
}

0 commit comments

Comments
 (0)