sync ant-design demo

NG-ZORRO · Aug 23, 2018 · d2c0eec · d2c0eec
1 parent 433a294
commit d2c0eec
Show file tree

Hide file tree

Showing 16 changed files with 141 additions and 114 deletions.
diff --git a/components/list/demo/loadmore.ts b/components/list/demo/loadmore.ts
@@ -3,36 +3,38 @@ import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { NzMessageService } from 'ng-zorro-antd';
 
+const count = 5;
 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"
+    [nzDataSource]="list"
     [nzItemLayout]="'horizontal'"
-    [nzLoading]="loading"
+    [nzLoading]="initLoading"
     [nzRenderItem]="item"
     [nzLoadMore]="loadMore">
     <ng-template #item let-item>
-      <nz-list-item [nzContent]="'content'" [nzActions]="[editAction,moreAction]">
-        <ng-template #editAction><a (click)="edit(item)">edit</a></ng-template>
-        <ng-template #moreAction><a (click)="edit(item)">more</a></ng-template>
-        <nz-list-item-meta
+      <nz-list-item [nzContent]="item.loading?'':'content'" [nzActions]="item.loading?[]:[editAction,moreAction]">
+        <nz-skeleton [nzAvatar]="true" [nzActive]="true" [nzTitle]="false" [nzLoading]="item.loading">
+          <ng-template #editAction><a (click)="edit(item)">edit</a></ng-template>
+          <ng-template #moreAction><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>
+              <a href="https://ng.ant.design">{{item.name.last}}</a>
             </ng-template>
-        </nz-list-item-meta>
+          </nz-list-item-meta>
+        </nz-skeleton>
       </nz-list-item>
     </ng-template>
     <ng-template #loadMore>
-      <div *ngIf="showLoadingMore" class="loadmore">
+      <div 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>
@@ -50,33 +52,36 @@ const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,
   ` ]
 })
 export class NzDemoListLoadmoreComponent implements OnInit {
-  loading = true; // bug
+  initLoading = true; // bug
   loadingMore = false;
-  showLoadingMore = true;
   data = [];
+  list = [];
 
   constructor(private http: HttpClient, private msg: NzMessageService) {}
 
   ngOnInit(): void {
-      this.getData((res: any) => {
-        this.data = res.results;
-        this.loading = false;
-      });
+    this.getData((res: any) => {
+      this.data = res.results;
+      this.list = res.results;
+      this.initLoading = false;
+    });
   }
 
   getData(callback: (res: any) => void): void {
-      this.http.get(fakeDataUrl).subscribe((res: any) => callback(res));
+    this.http.get(fakeDataUrl).subscribe((res: any) => callback(res));
   }
 
   onLoadMore(): void {
     this.loadingMore = true;
+    this.list = this.data.concat([...Array(count)].fill({}).map(() => ({ loading: true, name: {} })));
     this.http.get(fakeDataUrl).subscribe((res: any) => {
       this.data = this.data.concat(res.results);
+      this.list = [...this.data];
       this.loadingMore = false;
     });
   }
 
   edit(item: any): void {
-      this.msg.success(item.email);
+    this.msg.success(item.email);
   }
 }
diff --git a/components/skeleton/demo/active.md b/components/skeleton/demo/active.md
@@ -0,0 +1,13 @@
+---
+order: 1
+title:
+  zh-CN: 动画效果
+  en-US: Active Animation
+---
+ ## zh-CN
+
+ 显示动画效果。
+
+ ## en-US
+
+ Display active animation.
diff --git a/components/skeleton/demo/active.ts b/components/skeleton/demo/active.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-skeleton-active',
+  template: `
+    <nz-skeleton [nzActive]="true"></nz-skeleton>
+  `
+})
+export class NzDemoSkeletonActiveComponent { }
diff --git a/components/skeleton/demo/basic.md b/components/skeleton/demo/basic.md
@@ -1,14 +1,14 @@
 ---
-order: 1
+order: 0
 title:
-  zh-CN: 基础列表样例
-  en-US: Basic List Sample
+  zh-CN: 基本
+  en-US: Basic
 ---
 
 ## zh-CN
 
-在基础列表组件中使用加载占位符。
+最简单的用法。
 
 ## en-US
 
-Use skeleton in basic list component.
+Basic usage.
diff --git a/components/skeleton/demo/basic.ts b/components/skeleton/demo/basic.ts
@@ -3,31 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-skeleton-basic',
   template: `
-    <nz-switch [(ngModel)]="loading"></nz-switch>
-    <nz-list [nzDataSource]="listData" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
-      <ng-template #item let-item>
-        <nz-list-item>
-          <nz-skeleton [nzLoading]="loading" [nzAvatar]="true" [nzTitle]="false">
-            <nz-list-item-meta
-              [nzTitle]="nzTitle"
-              nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-              [nzDescription]="item.description">
-              <ng-template #nzTitle>
-                <a href="https://ng.ant.design">{{item.title}}</a>
-              </ng-template>
-            </nz-list-item-meta>
-          </nz-skeleton>
-        </nz-list-item>
-      </ng-template>
-    </nz-list>
+    <nz-skeleton></nz-skeleton>
   `
 })
-export class NzDemoSkeletonBasicComponent {
-  loading = true;
-  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.'
-    };
-  });
-}
+export class NzDemoSkeletonBasicComponent { }
diff --git a/components/skeleton/demo/card.md b/components/skeleton/demo/card.md
diff --git a/components/skeleton/demo/card.ts b/components/skeleton/demo/card.ts
diff --git a/components/skeleton/demo/children.md b/components/skeleton/demo/children.md
@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 包含子组件
+  en-US: Contains sub component
+---
+
+ ## zh-CN
+
+ 加载占位图包含子组件。
+
+ ## en-US
+
+ Skeleton contains sub component.
diff --git a/components/skeleton/demo/children.ts b/components/skeleton/demo/children.ts
@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-skeleton-children',
+  template: `
+    <div class="article">
+      <nz-skeleton [nzLoading]="loading">
+        <h4>Ant Design, a design language</h4>
+        <p>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.</p>
+      </nz-skeleton>
+      <button nz-button (click)="showSkeleton()" [disabled]="loading">
+        Show Skeleton
+      </button>
+    </div>
+  `,
+  styles  : [
+    `
+      .article h4 {
+        margin-bottom: 16px;
+      }
+      .article button {
+        margin-top: 16px;
+      }
+    `
+  ]
+})
+export class NzDemoSkeletonChildrenComponent {
+  loading = false;
+
+  showSkeleton(): void {
+    this.loading = true;
+    setTimeout(() => {
+      this.loading = false;
+    }, 3000);
+  }
+}
diff --git a/components/skeleton/demo/list.ts b/components/skeleton/demo/list.ts
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
     <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">
+          <nz-skeleton [nzLoading]="loading" [nzActive]="true">
             <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>

diff --git a/components/skeleton/doc/index.en-US.md b/components/skeleton/doc/index.en-US.md
@@ -15,6 +15,7 @@ Provide a placeholder at the place which need waiting for loading.
 ## API
 
 ### nz-skeleton
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | `[nzActive]` | Show animation effect | boolean | false |
@@ -25,17 +26,20 @@ Provide a placeholder at the place which need waiting for loading.
 
 
 ### NzSkeletonAvatar
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | `size` | Set the size of avatar | Enum{ 'large', 'small', 'default' } | - |
 | `shape` | Set the shape of avatar | Enum{ 'circle', 'square' } | - |
 
 ### NzSkeletonTitle
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | `width` | Set the width of title | number ｜ string | - |
 
 ### NzSkeletonParagraph
+
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | `rows` | Set the row count of paragraph | number | - |

diff --git a/components/skeleton/doc/index.zh-CN.md b/components/skeleton/doc/index.zh-CN.md
@@ -10,13 +10,14 @@ cols: 1
 
 ## 何时使用
 
-- 网络较慢，需要长时间等待加载处理的情况下
-- 图文信息内容较多的列表/卡片中
+- 网络较慢，需要长时间等待加载处理的情况下。
+- 图文信息内容较多的列表/卡片中。
 
 
 ## API
 
 ### nz-skeleton
+
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzActive]` | 是否展示动画效果 | boolean | false |
@@ -26,17 +27,20 @@ cols: 1
 | `[nzTitle]` | 是否显示标题占位图 | boolean ｜ NzSkeletonTitle | true |
 
 ### NzSkeletonAvatar
+
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `size` | 设置头像占位图的大小 | Enum{ 'large', 'small', 'default' } | - |
 | `shape` | 指定头像的形状 | Enum{ 'circle', 'square' } | - |
 
 ### NzSkeletonTitle
+
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `width` | 设置标题占位图的宽度 | number ｜ string | - |
 
 ### NzSkeletonParagraph
+
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `rows` | 设置段落占位图的行数 | number | - |

diff --git a/components/skeleton/nz-skeleton.component.html b/components/skeleton/nz-skeleton.component.html
@@ -2,13 +2,13 @@
   <div class="ant-skeleton-header">
     <span *ngIf="!!nzAvatar" 
       class="ant-skeleton-avatar" 
-      [ngClass]="avartarClassMap">
+      [ngClass]="avatarClassMap">
     </span>
   </div>
   <div class="ant-skeleton-content">
     <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 rowsList;let i=index" [style.width]="toCSSUnit(widthList[i])">
       </li>
     </ul>
   </div>