add list demo

components/skeleton/demo/basic.md

@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 1
 title:
   zh-CN: 基础列表样例
   en-US: Basic List Sample

components/skeleton/demo/basic.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'nz-demo-skeleton-basic',
@@ -7,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
     <nz-list [nzDataSource]="listData" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
       <ng-template #item let-item>
         <nz-list-item>
-          <nz-skeleton [nzAvatar]="true" [nzTitle]="true" [nzLoading]="loading">
+          <nz-skeleton [nzLoading]="loading" [nzAvatar]="true" [nzTitle]="false">
             <nz-list-item-meta
               [nzTitle]="nzTitle"
               nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
@@ -20,23 +20,14 @@ import { Component, OnInit } from '@angular/core';
         </nz-list-item>
       </ng-template>
     </nz-list>
-  `,
-  styles: [`
-    .skeleton-demo {
-      border: 1px solid #f4f4f4;
-    }
-  `]
+  `
 })
-export class NzDemoSkeletonBasicComponent implements OnInit {
-  listData = [];
+export class NzDemoSkeletonBasicComponent {
   loading = true;
-
-  ngOnInit(): void {
-    for (let i = 0; i < 9; i++) {
-      this.listData.push({
-        title: `ant design ${i}`,
-        description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.'
-      });
-    }
-  }
+  listData = new Array(8).fill({}).map((i, index) => {
+    return {
+      title: `ant design ${index}`,
+      description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.'
+    };
+  });
 }

components/skeleton/demo/card.md

@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 0
 title:
   zh-CN: 卡片样例
   en-US: Card Sample

components/skeleton/demo/card.ts

@@ -5,9 +5,9 @@ import { Component } from '@angular/core';
   template: `
     <nz-switch [(ngModel)]="loading"></nz-switch>
     <nz-card
-      style="width: 300;margin-top: 16px"
+      style="width: 300px;margin-top: 16px"
       [nzActions]="[actionSetting,actionEdit,actionEllipsis]">
-      <nz-skeleton [nzLoading]="loading">
+      <nz-skeleton [nzLoading]="loading" [nzAvatar]="true">
         <nz-card-meta [nzAvatar]="avatarTemplate" nzTitle="Card title" nzDescription="This is the description"></nz-card-meta>
       </nz-skeleton>
     </nz-card>

components/skeleton/demo/list.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 列表样例
+  en-US: List Sample
+---
+
+## zh-CN
+
+在列表组件中使用加载占位符。
+
+## en-US
+
+Use skeleton in list component.

components/skeleton/demo/list.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-skeleton-list',
+  template: `
+    <nz-switch [(ngModel)]="loading"></nz-switch>
+    <nz-list [nzDataSource]="listData" [nzRenderItem]="item" [nzItemLayout]="'vertical'">
+      <ng-template #item let-item>
+        <nz-list-item [nzContent]="loading?'':item.content" [nzActions]="loading?[]:[starAction,likeAction,msgAction]" [nzExtra]="loading?'':extra">
+          <nz-skeleton [nzLoading]="loading">
+            <ng-template #starAction><i class="anticon anticon-star-o" style="margin-right: 8px;"></i> 156</ng-template>
+            <ng-template #likeAction><i class="anticon anticon-like-o" style="margin-right: 8px;"></i> 156</ng-template>
+            <ng-template #msgAction><i class="anticon anticon-message" style="margin-right: 8px;"></i> 2</ng-template>
+            <nz-list-item-meta
+              [nzAvatar]="item.avatar"
+              [nzTitle]="nzTitle"
+              [nzDescription]="item.description">
+              <ng-template #nzTitle><a href="{{item.href}}">{{item.title}}</a></ng-template>
+            </nz-list-item-meta>
+            <ng-template #extra>
+              <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png">
+            </ng-template>
+          </nz-skeleton>
+        </nz-list-item>
+      </ng-template>
+    </nz-list>
+  `
+})
+export class NzDemoSkeletonListComponent {
+  loading = true;
+  listData = new Array(3).fill({}).map((i, index) => {
+    return {
+      href: 'http://ng.ant.design',
+      title: `ant design part ${index}`,
+      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+      description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
+      content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
+    };
+  });
+}

components/skeleton/nz-skeleton.component.html

@@ -6,9 +6,9 @@
     </span>
   </div>
   <div class="ant-skeleton-content">
-    <h3 *ngIf="!!nzTitle" class="ant-skeleton-title" [style.width]="toCSSUnit(_title.width)"></h3>
+    <h3 *ngIf="!!nzTitle" class="ant-skeleton-title" [style.width]="toCSSUnit(title.width)"></h3>
     <ul *ngIf="!!nzParagraph" class="ant-skeleton-paragraph">
-      <li *ngFor="let row of getRowsList(_paragraph.rows);let i=index" [style.width]="toCSSUnit(_widthList[i])">
+      <li *ngFor="let row of getRowsList(paragraph.rows);let i=index" [style.width]="toCSSUnit(widthList[i])">
       </li>
     </ul>
   </div>

components/skeleton/nz-skeleton.component.ts

@@ -5,16 +5,16 @@ import { NzSkeletonAvatar, NzSkeletonParagraph, NzSkeletonTitle } from './nz-ske
   selector: 'nz-skeleton',
   templateUrl: './nz-skeleton.component.html',
   host: {
-    '[class.ant-skeleton]': 'true'
+    '[class.ant-skeleton]': 'true',
+    '[class.ant-skeleton-with-avatar]': '!!nzAvatar'
   }
 })
 export class NzSkeletonComponent implements OnInit, OnChanges {
+  title: NzSkeletonTitle = {};
+  avatar: NzSkeletonAvatar = {};
+  paragraph: NzSkeletonParagraph = {};
+  widthList: Array<number | string> = [];
   avartarClassMap;
-  private _title: NzSkeletonTitle = {};
-  private _avatar: NzSkeletonAvatar = {};
-  private _paragraph: NzSkeletonParagraph = {};
-  private _widthList: Array<number | string> = [];
-  private prefixCls = 'ant-skeleton';
 
   @Input() nzLoading = true;
   @Input() nzTitle: NzSkeletonTitle | boolean = true;
@@ -62,7 +62,7 @@ export class NzSkeletonComponent implements OnInit, OnChanges {
     return {};
   }
 
-  toCSSUnit(value: number | string = ''): number | string  {
+  toCSSUnit(value: number | string = ''): string {
     if (typeof value === 'number') {
       return `${value}px`;
     } else if (typeof value === 'string') {
@@ -75,7 +75,7 @@ export class NzSkeletonComponent implements OnInit, OnChanges {
   }
 
   getWidthList(): Array<number | string> {
-    const { width, rows } = this._paragraph;
+    const { width, rows } = this.paragraph;
     let widthList = [];
     if (width && Array.isArray(width)) {
       widthList = width;
@@ -88,27 +88,27 @@ export class NzSkeletonComponent implements OnInit, OnChanges {
 
   updateClassMap(): void {
     this.avartarClassMap = {
-      [ `${this.prefixCls}-avatar-lg` ]     : this._avatar.size === 'large',
-      [ `${this.prefixCls}-avatar-sm ` ]    : this._avatar.size === 'small',
-      [ `${this.prefixCls}-avatar-circle` ] : this._avatar.shape === 'circle',
-      [ `${this.prefixCls}-avatar-square ` ]: this._avatar.shape === 'square'
+      [ `ant-skeleton-avatar-lg` ]     : this.avatar.size === 'large',
+      [ `ant-skeleton-avatar-sm ` ]    : this.avatar.size === 'small',
+      [ `ant-skeleton-avatar-circle` ] : this.avatar.shape === 'circle',
+      [ `ant-skeleton-avatar-square ` ]: this.avatar.shape === 'square'
     };
   }
 
   updateProps(): void {
-    this._title = {
+    this.title = {
       ...this.getTitleBasicProps(!!this.nzAvatar, !!this.nzParagraph),
       ...this.getProps(this.nzTitle)
     };
-    this._avatar = {
+    this.avatar = {
       ...this.getAvatarBasicProps(!!this.nzTitle, !!this.nzParagraph),
       ...this.getProps(this.nzAvatar)
     };
-    this._paragraph = {
+    this.paragraph = {
       ...this.getParagraphBasicProps(!!this.nzAvatar, !!this.nzTitle),
       ...this.getProps(this.nzParagraph)
     };
-    this._widthList = this.getWidthList();
+    this.widthList = this.getWidthList();
   }
 
   ngOnInit(): void {

components/skeleton/nz-skeleton.spec.ts

@@ -53,6 +53,7 @@ describe('skeleton', () => {
       testComp.nzParagraph = false;
       fixture.detectChanges();
       expect(dl.nativeElement.querySelector('.ant-skeleton-avatar-square')).toBeTruthy();
+      expect(dl.nativeElement.querySelector('.ant-skeleton-with-avatar')).toBeTruthy();
       testComp.nzParagraph = true;
       fixture.detectChanges();
       expect(dl.nativeElement.querySelector('.ant-skeleton-avatar-circle')).toBeTruthy();