Skip to content

Commit b3d8315

Browse files
mmalerbajelbourn
mmalerba
authored and
jelbourn
committed
demo(mdc-list): Add a demo page for the MDC-based list (#18604)
* 3.3. Add a demo page for the MDC-based list. * WIP: css * fix lint * update MDC to version with fix * fix some CSS styles (cherry picked from commit 9343d08)
1 parent 144cb41 commit b3d8315

22 files changed

+837
-530
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@
164164
/src/dev-app/mdc-checkbox/** @mmalerba
165165
/src/dev-app/mdc-chips/** @mmalerba
166166
/src/dev-app/mdc-input/** @devversion @mmalerba
167+
/src/dev-app/mdc-list/** @mmalerba
167168
/src/dev-app/mdc-menu/** @crisbeto
168169
/src/dev-app/mdc-progress-bar/** @crisbeto
169170
/src/dev-app/mdc-radio/** @mmalerba

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"@types/youtube": "^0.0.38",
5656
"@webcomponents/custom-elements": "^1.1.0",
5757
"core-js": "^2.6.9",
58-
"material-components-web": "5.0.0",
58+
"material-components-web": "^6.0.0-canary.265ecbad5.0",
5959
"rxjs": "^6.5.3",
6060
"systemjs": "0.19.43",
6161
"tslib": "^1.10.0",

‎packages.bzl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
33
# version for the placeholders.
44
ANGULAR_PACKAGE_VERSION = "^9.0.0 || ^10.0.0-0"
5-
MDC_PACKAGE_VERSION = "^4.0.0"
5+
MDC_PACKAGE_VERSION = "^6.0.0-canary.265ecbad5.0"
66
TSLIB_PACKAGE_VERSION = "^1.9.0"
77

88
VERSION_PLACEHOLDER_REPLACEMENTS = {

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ ng_module(
4848
"//src/dev-app/mdc-checkbox",
4949
"//src/dev-app/mdc-chips",
5050
"//src/dev-app/mdc-input",
51+
"//src/dev-app/mdc-list",
5152
"//src/dev-app/mdc-menu",
5253
"//src/dev-app/mdc-progress-bar",
5354
"//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
@@ -75,6 +75,7 @@ export class DevAppLayout {
7575
{name: 'MDC Checkbox', route: '/mdc-checkbox'},
7676
{name: 'MDC Chips', route: '/mdc-chips'},
7777
{name: 'MDC Input', route: '/mdc-input'},
78+
{name: 'MDC List', route: '/mdc-list'},
7879
{name: 'MDC Menu', route: '/mdc-menu'},
7980
{name: 'MDC Radio', route: '/mdc-radio'},
8081
{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
@@ -68,6 +68,7 @@ export const DEV_APP_ROUTES: Routes = [
6868
},
6969
{path: 'mdc-chips', loadChildren: 'mdc-chips/mdc-chips-demo-module#MdcChipsDemoModule'},
7070
{path: 'mdc-input', loadChildren: 'mdc-input/mdc-input-demo-module#MdcInputDemoModule'},
71+
{path: 'mdc-list', loadChildren: 'mdc-list/mdc-list-demo-module#MdcListDemoModule'},
7172
{path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
7273
{path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
7374
{

‎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-experimental/mdc-list",
16+
"//src/material/icon",
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>

0 commit comments

Comments
 (0)