Skip to content

Commit 38255cc

Browse files
mmalerbammalerba
committed
3.3. Add a demo page for the MDC-based list.
1 parent 2ec7254 commit 38255cc

File tree

16 files changed

+297
-11
lines changed

16 files changed

+297
-11
lines changed

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ ng_module(
4747
"//src/dev-app/mdc-checkbox",
4848
"//src/dev-app/mdc-chips",
4949
"//src/dev-app/mdc-input",
50+
"//src/dev-app/mdc-list",
5051
"//src/dev-app/mdc-menu",
5152
"//src/dev-app/mdc-progress-bar",
5253
"//src/dev-app/mdc-radio",

‎src/dev-app/dev-app/dev-app-layout.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export class DevAppLayout {
7474
{name: 'MDC Checkbox', route: '/mdc-checkbox'},
7575
{name: 'MDC Chips', route: '/mdc-chips'},
7676
{name: 'MDC Input', route: '/mdc-input'},
77+
{name: 'MDC List', route: '/mdc-list'},
7778
{name: 'MDC Menu', route: '/mdc-menu'},
7879
{name: 'MDC Radio', route: '/mdc-radio'},
7980
{name: 'MDC Progress Bar', route: '/mdc-progress-bar'},

‎src/dev-app/dev-app/routes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export const DEV_APP_ROUTES: Routes = [
6464
},
6565
{path: 'mdc-chips', loadChildren: 'mdc-chips/mdc-chips-demo-module#MdcChipsDemoModule'},
6666
{path: 'mdc-input', loadChildren: 'mdc-input/mdc-input-demo-module#MdcInputDemoModule'},
67+
{path: 'mdc-list', loadChildren: 'mdc-list/mdc-list-demo-module#MdcListDemoModule'},
6768
{path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
6869
{path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
6970
{

‎src/dev-app/list/list-demo.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,11 +162,11 @@ <h3 mat-subheader>Dogs</h3>
162162
<button mat-raised-button (click)="groceries.deselectAll()">Deselect all</button>
163163
</p>
164164
</div>
165-
165+
166166
<div>
167167
<h2>Single Selection list</h2>
168168

169-
<mat-selection-list #favorite
169+
<mat-selection-list #favorite
170170
[(ngModel)]="favoriteOptions"
171171
[multiple]="false"
172172
color="primary">

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("//tools:defaults.bzl", "ng_module", "sass_binary")
4+
5+
ng_module(
6+
name = "mdc-list",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"mdc-list-demo.html",
10+
":mdc_list_demo_scss",
11+
],
12+
deps = [
13+
"//src/material-experimental/mdc-button",
14+
"//src/material-experimental/mdc-checkbox",
15+
"//src/material/icon",
16+
"//src/material-experimental/mdc-list",
17+
"@npm//@angular/router",
18+
],
19+
)
20+
21+
sass_binary(
22+
name = "mdc_list_demo_scss",
23+
src = "mdc-list-demo.scss",
24+
)

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {CommonModule} from '@angular/common';
10+
import {NgModule} from '@angular/core';
11+
import {FormsModule} from '@angular/forms';
12+
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
13+
import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
14+
import {MatListModule} from '@angular/material-experimental/mdc-list';
15+
import {MatIconModule} from '@angular/material/icon';
16+
import {RouterModule} from '@angular/router';
17+
import {MdcListDemo} from './mdc-list-demo';
18+
19+
@NgModule({
20+
imports: [
21+
CommonModule,
22+
FormsModule,
23+
MatButtonModule,
24+
MatCheckboxModule,
25+
MatIconModule,
26+
MatListModule,
27+
RouterModule.forChild([{path: '', component: MdcListDemo}]),
28+
],
29+
declarations: [MdcListDemo],
30+
})
31+
export class MdcListDemoModule {
32+
}

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

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
2+
<h1>mat-list demo</h1>
3+
4+
<button mat-raised-button (click)="thirdLine=!thirdLine">Show third line</button>
5+
6+
<div class="demo-list">
7+
<div>
8+
<h2>Normal lists</h2>
9+
10+
<mat-list>
11+
<h3 mat-subheader>Items</h3>
12+
<mat-list-item *ngFor="let item of items">
13+
{{item}}
14+
</mat-list-item>
15+
</mat-list>
16+
17+
<mat-list>
18+
<mat-list-item *ngFor="let contact of contacts">
19+
<h3 mat-line>{{contact.name}}</h3>
20+
<p mat-line *ngIf="thirdLine">extra line</p>
21+
<p mat-line class="demo-secondary-text">{{contact.headline}}</p>
22+
</mat-list-item>
23+
</mat-list>
24+
25+
<mat-list>
26+
<h3 mat-subheader>Today</h3>
27+
<mat-list-item *ngFor="let message of messages; last as last">
28+
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
29+
<h4 mat-line>{{message.from}}</h4>
30+
<p mat-line>
31+
<span>{{message.subject}} -- </span>
32+
<span class="demo-secondary-text">{{message.message}}</span>
33+
</p>
34+
<mat-divider inset *ngIf="!last"></mat-divider>
35+
</mat-list-item>
36+
<mat-divider></mat-divider>
37+
<mat-list-item *ngFor="let message of messages">
38+
<h4 mat-line>{{message.from}}</h4>
39+
<p mat-line> {{message.subject}} </p>
40+
<p mat-line class="demo-secondary-text">{{message.message}} </p>
41+
</mat-list-item>
42+
</mat-list>
43+
</div>
44+
45+
<div>
46+
<h2>Dense lists</h2>
47+
<mat-list dense>
48+
<h3 mat-subheader>Items</h3>
49+
<mat-list-item *ngFor="let item of items">
50+
{{item}}
51+
</mat-list-item>
52+
</mat-list>
53+
54+
<mat-list dense>
55+
<mat-list-item *ngFor="let contact of contacts">
56+
<h3 mat-line>{{contact.name}}</h3>
57+
<p mat-line class="demo-secondary-text">{{contact.headline}}</p>
58+
</mat-list-item>
59+
</mat-list>
60+
61+
<mat-list dense>
62+
<h3 mat-subheader>Today</h3>
63+
<mat-list-item *ngFor="let message of messages">
64+
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
65+
<h4 mat-line>{{message.from}}</h4>
66+
<p mat-line> {{message.subject}} </p>
67+
<p mat-line class="demo-secondary-text">{{message.message}} </p>
68+
</mat-list-item>
69+
</mat-list>
70+
</div>
71+
<div>
72+
<h2>Nav lists</h2>
73+
<mat-nav-list>
74+
<a mat-list-item *ngFor="let link of links" href="http://www.google.com">
75+
{{ link.name }}
76+
</a>
77+
</mat-nav-list>
78+
<div *ngIf="infoClicked">
79+
More info!
80+
</div>
81+
<mat-nav-list>
82+
<mat-list-item *ngFor="let link of links">
83+
<a mat-line href="http://www.google.com">{{ link.name }}</a>
84+
<button mat-icon-button (click)="infoClicked=!infoClicked">
85+
<mat-icon>info</mat-icon>
86+
</button>
87+
</mat-list-item>
88+
</mat-nav-list>
89+
<mat-nav-list>
90+
<a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
91+
<mat-icon mat-list-icon>folder</mat-icon>
92+
<span mat-line>{{ link.name }}</span>
93+
<span mat-line class="demo-secondary-text"> Description </span>
94+
<mat-divider inset *ngIf="!last"></mat-divider>
95+
</a>
96+
</mat-nav-list>
97+
<mat-nav-list dense>
98+
<mat-list-item *ngFor="let link of links">
99+
<a mat-line href="http://www.google.com">{{ link.name }}</a>
100+
<button mat-icon-button (click)="infoClicked=!infoClicked">
101+
<mat-icon class="material-icons">info</mat-icon>
102+
</button>
103+
</mat-list-item>
104+
</mat-nav-list>
105+
</div>
106+
107+
<div>
108+
<h2>Action list</h2>
109+
<mat-action-list>
110+
<button mat-list-item *ngFor="let link of links" (click)="alertItem(link.name)">
111+
{{link.name}}
112+
</button>
113+
</mat-action-list>
114+
</div>
115+
116+
<div>
117+
<h2>Selection list</h2>
118+
119+
TODO: Implement MDC-based selection list.
120+
</div>
121+
</div>

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.demo-list {
2+
display: flex;
3+
flex-flow: row wrap;
4+
5+
.mat-mdc-list, .mat-mdc-nav-list, .mat-mdc-selection-list {
6+
border: 1px solid rgba(0, 0, 0, 0.12);
7+
width: 350px;
8+
margin: 20px 20px 0 0;
9+
}
10+
h2 {
11+
margin-top: 20px;
12+
}
13+
14+
.mat-icon {
15+
color: rgba(0, 0, 0, 0.12);
16+
}
17+
18+
.mat-mdc-list-icon {
19+
color: white;
20+
background: rgba(0, 0, 0, 0.3);
21+
}
22+
}
23+
24+
.demo-secondary-text {
25+
color: rgba(0, 0, 0, 0.54);
26+
}

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
11+
12+
@Component({
13+
selector: 'mdc-list-demo',
14+
templateUrl: 'mdc-list-demo.html',
15+
styleUrls: ['mdc-list-demo.css'],
16+
})
17+
export class MdcListDemo {
18+
items: string[] = [
19+
'Pepper',
20+
'Salt',
21+
'Paprika'
22+
];
23+
24+
contacts: {name: string, headline: string}[] = [
25+
{name: 'Nancy', headline: 'Software engineer'},
26+
{name: 'Mary', headline: 'TPM'},
27+
{name: 'Bobby', headline: 'UX designer'}
28+
];
29+
30+
messages: {from: string, subject: string, message: string, image: string}[] = [
31+
{
32+
from: 'Nancy',
33+
subject: 'Brunch?',
34+
message: 'Did you want to go on Sunday? I was thinking that might work.',
35+
image: 'https://angular.io/generated/images/bios/julie-ralph.jpg'
36+
},
37+
{
38+
from: 'Mary',
39+
subject: 'Summer BBQ',
40+
message: 'Wish I could come, but I have some prior obligations.',
41+
image: 'https://angular.io/generated/images/bios/juleskremer.jpg'
42+
},
43+
{
44+
from: 'Bobby',
45+
subject: 'Oui oui',
46+
message: 'Do you have Paris reservations for the 15th? I just booked!',
47+
image: 'https://angular.io/generated/images/bios/jelbourn.jpg'
48+
}
49+
];
50+
51+
links: {name: string}[] = [
52+
{name: 'Inbox'},
53+
{name: 'Outbox'},
54+
{name: 'Spam'},
55+
{name: 'Trash'}
56+
57+
];
58+
59+
thirdLine = false;
60+
infoClicked = false;
61+
selectionListDisabled = false;
62+
selectionListRippleDisabled = false;
63+
64+
selectedOptions: string[] = ['apples'];
65+
changeEventCount = 0;
66+
modelChangeEventCount = 0;
67+
68+
onSelectedOptionsChange(values: string[]) {
69+
this.selectedOptions = values;
70+
this.modelChangeEventCount++;
71+
}
72+
73+
favoriteOptions: string[] = [];
74+
75+
alertItem(msg: string) {
76+
alert(msg);
77+
}
78+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ ng_module(
2525
"@npm//@angular/core",
2626
"@npm//@angular/forms",
2727
"@npm//@material/list",
28+
"//src/material/divider",
2829
],
2930
)
3031

‎src/material-experimental/mdc-list/action-list.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import {MatListBase} from './list-base';
1212
@Component({
1313
selector: 'mat-action-list',
1414
exportAs: 'matActionList',
15-
templateUrl: 'list.html',
15+
template: '<ng-content></ng-content>',
1616
host: {
17-
'class': 'mat-mdc-action-list mat-mdc-list-base',
17+
'class': 'mat-mdc-action-list mat-mdc-list-base mdc-list',
1818
},
1919
styleUrls: ['list.css'],
2020
encapsulation: ViewEncapsulation.None,

‎src/material-experimental/mdc-list/list-item.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
TODO: Implement.
1+
<span class="mdc-list-item__text"><ng-content></ng-content></span>

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

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/material-experimental/mdc-list/list.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ export class MatListSubheaderCssMatStyler {}
4242
@Component({
4343
selector: 'mat-list',
4444
exportAs: 'matList',
45-
templateUrl: 'list.html',
45+
template: '<ng-content></ng-content>',
4646
host: {
47-
'class': 'mat-mdc-list mat-mdc-list-base',
47+
'class': 'mat-mdc-list mat-mdc-list-base mdc-list',
4848
},
4949
styleUrls: ['list.css'],
5050
encapsulation: ViewEncapsulation.None,
@@ -56,7 +56,7 @@ export class MatList extends MatListBase {}
5656
selector: 'mat-list-item, a[mat-list-item], button[mat-list-item]',
5757
exportAs: 'matListItem',
5858
host: {
59-
'class': 'mat-mdc-list-item',
59+
'class': 'mat-mdc-list-item mdc-list-item',
6060
},
6161
templateUrl: 'list-item.html',
6262
encapsulation: ViewEncapsulation.None,

‎src/material-experimental/mdc-list/module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
*/
88

99
import {NgModule} from '@angular/core';
10+
import {MatDividerModule} from '@angular/material/divider';
1011
import {MatActionList} from './action-list';
1112
import {
1213
MatList,
@@ -29,6 +30,7 @@ import {MatListOption, MatSelectionList} from './selection-list';
2930
MatListAvatarCssMatStyler,
3031
MatListIconCssMatStyler,
3132
MatListSubheaderCssMatStyler,
33+
MatDividerModule,
3234
],
3335
declarations: [
3436
MatList,

‎src/material-experimental/mdc-list/nav-list.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import {MatListBase} from './list-base';
1717
* @breaking-change 11.0.0
1818
*/
1919
exportAs: 'matNavList, matList',
20-
templateUrl: 'list.html',
20+
template: '<ng-content></ng-content>',
2121
host: {
22-
'class': 'mat-mdc-nav-list mat-mdc-list-base',
22+
'class': 'mat-mdc-nav-list mat-mdc-list-base mdc-list',
2323
},
2424
styleUrls: ['list.css'],
2525
encapsulation: ViewEncapsulation.None,

0 commit comments

Comments
 (0)