File
Implements
Metadata
| selector |
app-lists |
| styleUrls |
./lists.component.scss |
| templateUrl |
./lists.component.html |
|
folders
|
Type : any
|
Default value : [
{
name: 'Photos',
updated: new Date('1/1/16')
},
{
name: 'Recipes',
updated: new Date('1/17/16')
},
{
name: 'Work',
updated: new Date('1/28/16')
}
]
|
|
|
|
links
|
Type : string[]
|
Default value : ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']
|
|
|
|
messages
|
Type : []
|
Default value : [
{
from: '滚动头条',
subject: '热点君-- 每时每刻滚动更新，轻松纵览天下头条！',
content: '每时每刻滚动更新，轻松纵览天下头条！'
},
{
from: '读心方程式',
subject: '东广新闻台',
content:
'生活中的心理学，新闻里的小科学，读心方程式，解开你的疑惑。我们不喝鸡汤，只聊干货！节目来源上海东广新闻台《新闻实验室》栏目。'
},
{
from: '话说天下事',
subject: '天津',
content:
'天津人民广播电台新闻台《话说天下事》节目，充分利用新闻台讯信资源的强势，快速点击、精辟分析国际焦点、热点问题、广罗各类新闻。天津味儿的不止有相声，还有《话说天下事》！'
}
]
|
|
|
|
notes
|
Type : any
|
Default value : [
{
name: 'Vacation Itinerary',
updated: new Date('2/20/16')
},
{
name: 'Kitchen Remodel',
updated: new Date('1/18/16')
}
]
|
|
|
|
typesOfShoes
|
Type : string[]
|
Default value : [
'Boots',
'Clogs',
'Loafers',
'Moccasins',
'Sneakers'
]
|
|
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-lists',
templateUrl: './lists.component.html',
styleUrls: ['./lists.component.scss']
})
export class ListsComponent implements OnInit {
typesOfShoes: string[] = [
'Boots',
'Clogs',
'Loafers',
'Moccasins',
'Sneakers'
];
links: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
messages = [
{
from: '滚动头条',
subject: '热点君-- 每时每刻滚动更新，轻松纵览天下头条！',
content: '每时每刻滚动更新，轻松纵览天下头条！'
},
{
from: '读心方程式',
subject: '东广新闻台',
content:
'生活中的心理学，新闻里的小科学，读心方程式，解开你的疑惑。我们不喝鸡汤，只聊干货！节目来源上海东广新闻台《新闻实验室》栏目。'
},
{
from: '话说天下事',
subject: '天津',
content:
'天津人民广播电台新闻台《话说天下事》节目，充分利用新闻台讯信资源的强势，快速点击、精辟分析国际焦点、热点问题、广罗各类新闻。天津味儿的不止有相声，还有《话说天下事》！'
}
];
folders: any = [
{
name: 'Photos',
updated: new Date('1/1/16')
},
{
name: 'Recipes',
updated: new Date('1/17/16')
},
{
name: 'Work',
updated: new Date('1/28/16')
}
];
notes: any = [
{
name: 'Vacation Itinerary',
updated: new Date('2/20/16')
},
{
name: 'Kitchen Remodel',
updated: new Date('1/18/16')
}
];
constructor() {}
ngOnInit() {}
}
<mat-card>
<mat-card-title>Simple lists</mat-card-title>
<mat-card-content>
<mat-list>
<mat-list-item> Pepper </mat-list-item>
<mat-list-item> Salt </mat-list-item>
<mat-list-item> Paprika </mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Navigation lists</mat-card-title>
<mat-card-content>
<mat-nav-list>
<a mat-list-item *ngFor="let link of links"> {{ link }} </a>
</mat-nav-list>
<mat-nav-list>
<mat-list-item *ngFor="let link of links">
<a matLine>{{ link }}</a>
<button mat-icon-button>
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
</mat-nav-list>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Selection lists</mat-card-title>
<mat-selection-list #shoes>
<mat-list-option *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
</mat-selection-list>
<p>
Options selected: {{shoes.selectedOptions.selected.length}}
</p>
</mat-card>
<mat-card>
<mat-card-title>Multi-line lists</mat-card-title>
<mat-list>
<mat-list-item *ngFor="let message of messages">
<h3 matLine> {{message.from}} </h3>
<p matLine>
<span> {{message.subject}} </span>
<span class="demo-2"> -- {{message.content}} </span>
</p>
</mat-list-item>
</mat-list>
<mat-list>
<mat-list-item *ngFor="let message of messages">
<h3 matLine> {{message.from}} </h3>
<p matLine> {{message.subject}} </p>
<p matLine class="demo-2"> {{message.content}} </p>
</mat-list-item>
</mat-list>
</mat-card>
<mat-card>
<mat-card-title> Lists with icons</mat-card-title>
<mat-card-content>
<mat-list>
<mat-list-item *ngFor="let message of messages">
<mat-icon matListIcon>folder</mat-icon>
<h3 matLine> {{message.from}} </h3>
<p matLine>
<span> {{message.subject}} </span>
<span class="demo-2"> -- {{message.content}} </span>
</p>
</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title> Lists with avatars </mat-card-title>
<mat-card-content>
<mat-list>
<mat-list-item *ngFor="let message of messages">
<img matListAvatar src="assets/images/avatars/noavatar.png" alt="assets/images/avatars/noavatar.png">
<h3 matLine> {{message.from}} </h3>
<p matLine>
<span> {{message.subject}} </span>
<span class="demo-2"> -- {{message.content}} </span>
</p>
</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title> Dense lists </mat-card-title>
<mat-card-content>
<mat-list dense>
<mat-list-item> Pepper </mat-list-item>
<mat-list-item> Salt </mat-list-item>
<mat-list-item> Paprika </mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title> Lists with multiple sections </mat-card-title>
<mat-card-content>
<mat-list>
<h3 matSubheader>Folders</h3>
<mat-list-item *ngFor="let folder of folders">
<mat-icon matListIcon>folder</mat-icon>
<h4 matLine>{{folder.name}}</h4>
<p matLine class="demo-2"> {{folder.updated}} </p>
</mat-list-item>
<mat-divider></mat-divider>
<h3 matSubheader>Notes</h3>
<mat-list-item *ngFor="let note of notes">
<mat-icon matListIcon>note</mat-icon>
<h4 matLine>{{note.name}}</h4>
<p matLine class="demo-2"> {{note.updated}} </p>
</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
mat-card {
margin: 24px;
}
Legend
Html element with directive