feat(module:list): add nz-list component

components/index.less

@@ -36,5 +36,6 @@
 @import "./table/style/index";
 @import "./divider/style/index";
 @import "./form/style/index";
+@import "./list/style/index";
 
-@import "./core/style/index";
+@import "./core/style/index";

components/index.ts

@@ -18,6 +18,7 @@ import { NzGridModule } from './grid/nz-grid.module';
 import { NzInputNumberModule } from './input-number/nz-input-number.module';
 import { NzInputModule } from './input/nz-input.module';
 import { NzLayoutModule } from './layout/nz-layout.module';
+import { NzListModule } from './list/nz-list.module';
 import { NzLocaleModule } from './locale/nz-locale.module';
 import { NzMenuModule } from './menu/nz-menu.module';
 import { NzMessageModule } from './message/nz-message.module';
@@ -41,6 +42,7 @@ import { NzToolTipModule } from './tooltip/nz-tooltip.module';
 import { NzTransferModule } from './transfer/nz-transfer.module';
 
 export * from './locale/index';
+export * from './list/index';
 
 import { NzMessageService } from './message/nz-message.service';
 import { NzNotificationService } from './notification/nz-notification.service';
@@ -93,7 +95,8 @@ export { NZ_NOTIFICATION_CONFIG } from './notification/nz-notification-config';
     NzCollapseModule,
     NzTableModule,
     NzDividerModule,
-    NzFormModule
+    NzFormModule,
+    NzListModule
   ]
 })
 export class NgZorroAntdModule {

components/list/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 基础列表 
+  en-US: Basic list
+---
+
+## zh-CN
+
+基础列表。
+
+## en-US
+
+Basic list.

components/list/demo/basic.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-list-basic',
+  template: `
+  <nz-list [nzDataSource]="data" [nzItemLayout]="'horizontal'">
+    <ng-template #item let-item>
+      <nz-list-item>
+        <nz-list-item-meta
+          [nzTitle]="nzTitle"
+          nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+          nzDescription="Ant Design, a design language for background applications, is refined by Ant UED Team">
+          <ng-template #nzTitle>
+            <a href="https://ng.ant.design">{{item.title}}</a>
+          </ng-template>
+        </nz-list-item-meta>
+      </nz-list-item>
+    </ng-template>
+  </nz-list>
+  `
+})
+export class NzDemoListBasicComponent {
+  data = [
+    {
+      title: 'Ant Design Title 1'
+    },
+    {
+      title: 'Ant Design Title 2'
+    },
+    {
+      title: 'Ant Design Title 3'
+    },
+    {
+      title: 'Ant Design Title 4'
+    }
+  ];
+}

components/list/demo/grid.md

@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 栅格列表 
+  en-US: Grid
+---
+
+## zh-CN
+
+可以通过设置 `nz-list` 的 `grid` 属性来实现栅格列表，`column` 可设置期望显示的列数。
+
+## en-US
+
+Creating a grid list by setting the `grid` property of List

components/list/demo/grid.ts

@@ -0,0 +1,36 @@
+// tslint:disable
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-list-grid',
+  template: `
+  <nz-list [nzDataSource]="data" [nzGrid]="{gutter: 16, span: 6}">
+    <ng-template #item let-item>
+      <nz-list-item [nzContent]="nzContent">
+        <ng-template #nzContent>
+          <nz-card>
+            <ng-template #title>{{item.title}}</ng-template>
+            <ng-template #body>Card content</ng-template>
+          </nz-card>
+        </ng-template>
+      </nz-list-item>
+    </ng-template>
+  </nz-list>
+  `
+})
+export class NzDemoListGridComponent {
+  data = [
+    {
+      title: 'Title 1',
+    },
+    {
+      title: 'Title 2',
+    },
+    {
+      title: 'Title 3',
+    },
+    {
+      title: 'Title 4',
+    },
+  ];
+}

components/list/demo/loadmore.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 加载更多
+  en-US: Load more
+---
+
+## zh-CN
+
+可通过 `loadMore` 属性实现加载更多功能。
+
+## en-US
+
+Load more list with `loadMore` property.

components/list/demo/loadmore.ts

@@ -0,0 +1,80 @@
+// tslint:disable
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { NzMessageService } from 'ng-zorro-antd';
+
+const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
+
+@Component({
+  selector: 'nz-demo-list-loadmore',
+  template: `
+  <nz-list
+    class="demo-loadmore-list"
+    [nzDataSource]="data"
+    [nzItemLayout]="'horizontal'"
+    [nzLoading]="loading">
+    <ng-template #item let-item>
+      <nz-list-item [nzContent]="'content'">
+        <ng-template #action><a (click)="edit(item)">edit</a></ng-template>
+        <ng-template #action><a (click)="edit(item)">more</a></ng-template>
+        <nz-list-item-meta
+            [nzTitle]="nzTitle"
+            nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+            nzDescription="Ant Design, a design language for background applications, is refined by Ant UED Team">
+            <ng-template #nzTitle>
+                <a href="https://ng.ant.design">{{item.name.last}}</a>
+            </ng-template>
+        </nz-list-item-meta>
+      </nz-list-item>
+    </ng-template>
+    <ng-template #loadMore>
+      <div *ngIf="showLoadingMore" class="loadmore">
+        <button nz-button *ngIf="!loadingMore" (click)="onLoadMore()">loading more</button>
+        <nz-spin *ngIf="loadingMore" [nzSpinning]="loadingMore"></nz-spin>
+      </div>
+    </ng-template>
+  </nz-list>
+  `,
+  styles: [ `
+  :host ::ng-deep .demo-loadmore-list {
+    min-height: 350px;
+  }
+  :host ::ng-deep .loadmore {
+    text-align: center;
+    margin-top: 12px;
+    height: 32px;
+    line-height: 32px;
+  }
+  ` ]
+})
+export class NzDemoListLoadmoreComponent implements OnInit {
+  loading = true; // bug
+  loadingMore = false;
+  showLoadingMore = true;
+  data = [];
+
+  constructor(private http: HttpClient, private msg: NzMessageService) {}
+
+  ngOnInit() {
+      this.getData((res: any) => {
+        this.data = res.results;
+        this.loading = false;
+      });
+  }
+
+  getData(callback: (res: any) => void) {
+      this.http.get(fakeDataUrl).subscribe((res: any) => callback(res));
+  }
+
+  onLoadMore() {
+    this.loadingMore = true;
+    this.http.get(fakeDataUrl).subscribe((res: any) => {
+      this.data = this.data.concat(res.results);
+      this.loadingMore = false;
+    });
+  }
+
+  edit(item: any) {
+      this.msg.success(item.email);
+  }
+}

components/list/demo/resposive.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 响应式的栅格列表 
+  en-US: Responsive grid list
+---
+
+## zh-CN
+
+响应式的栅格列表。尺寸与 [Layout Grid](https://ant.design/components/grid-cn/#Col) 保持一致。
+
+## en-US
+
+Responsive grid list. The size property is as same as [Layout Grid](https://ant.design/components/grid/#Col).

components/list/demo/resposive.ts

@@ -0,0 +1,42 @@
+// tslint:disable
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-list-resposive',
+  template: `
+  <nz-list [nzDataSource]="data" [nzGrid]="{gutter: 16, xs: 24, sm: 12, md: 6, lg: 6, xl: 4 }">
+    <ng-template #item let-item>
+      <nz-list-item [nzContent]="nzContent">
+        <ng-template #nzContent>
+          <nz-card>
+            <ng-template #title>{{item.title}}</ng-template>
+            <ng-template #body>Card content</ng-template>
+          </nz-card>
+        </ng-template>
+      </nz-list-item>
+    </ng-template>
+  </nz-list>
+  `
+})
+export class NzDemoListResposiveComponent {
+  data = [
+    {
+      title: 'Title 1',
+    },
+    {
+      title: 'Title 2',
+    },
+    {
+      title: 'Title 3',
+    },
+    {
+      title: 'Title 4',
+    },
+    {
+      title: 'Title 5',
+    },
+    {
+      title: 'Title 6',
+    },
+  ];
+}

components/list/demo/simple.md

@@ -0,0 +1,22 @@
+---
+order: 0
+title:
+  zh-CN: 简单列表
+  en-US: Simple list
+---
+
+## zh-CN
+
+列表拥有大、中、小三种尺寸。
+
+通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
+
+可通过设置 `nzHeader` 和 `nzFooter`，来自定义列表头部和尾部。
+
+## en-US
+
+Ant Design supports a default list size as well as a large and small size.
+
+If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.
+
+Customizing the nzHeader and nzFooter of list by setting `nzHeader` and `nzFooter` property.

components/list/demo/simple.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-list-simple',
+  template: `
+  <h3 [ngStyle]="{'margin-bottom.px': 16 }">Default Size</h3>
+  <nz-list [nzDataSource]="data" nzBordered
+           [nzHeader]="'Header'" [nzFooter]="'Footer'">
+    <ng-template #item let-item><nz-list-item [nzContent]="item"></nz-list-item></ng-template>
+  </nz-list>
+  <h3 [ngStyle]="{'margin': '16px 0' }">Small Size</h3>
+  <nz-list [nzDataSource]="data" nzBordered nzSize="small"
+           [nzHeader]="'Header'" [nzFooter]="'Footer'">
+    <ng-template #item let-item><nz-list-item [nzContent]="item"></nz-list-item></ng-template>
+  </nz-list>
+  <h3 [ngStyle]="{'margin': '16px 0' }">Large Size</h3>
+  <nz-list [nzDataSource]="data" nzBordered nzSize="large"
+           [nzHeader]="'Header'" [nzFooter]="'Footer'">
+    <ng-template #item let-item><nz-list-item [nzContent]="item"></nz-list-item></ng-template>
+  </nz-list>
+  `
+})
+export class NzDemoListSimpleComponent {
+  data = [
+    'Racing car sprays burning fuel into crowd.',
+    'Japanese princess to wed commoner.',
+    'Australian walks 100km after outback crash.',
+    'Man charged over missing wedding girl.',
+    'Los Angeles battles huge wildfires.'
+  ];
+}

components/list/demo/vertical.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 竖排列表样式
+  en-US: Vertical
+---
+
+## zh-CN
+
+通过设置 `nzItemLayout` 属性为 `vertical` 可实现竖排列表样式。
+
+## en-US
+
+Setting `nzItemLayout` property with `vertical` to create a vertical list.