feat(module:skeleton): add nzRound prop and skeleton-element image (#…

…5710)
NG-ZORRO · Sep 10, 2020 · aa2ea54 · aa2ea54
1 parent 0d1f027
commit aa2ea54
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 74 deletions.
diff --git a/components/skeleton/demo/children.md b/components/skeleton/demo/children.md
@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 4
 title:
   zh-CN: 包含子组件
   en-US: Contains sub component
@@ -10,5 +10,5 @@ title:
  加载占位图包含子组件。
 
  ## en-US
- 
+
  Skeleton contains sub component.
diff --git a/components/skeleton/demo/element.md b/components/skeleton/demo/element.md
@@ -1,14 +1,14 @@
 ---
-order: 2
+order: 3
 title:
-  zh-CN: 骨架按钮、头像和输入框。
-  en-US: Skeleton button, avatar and input
+  zh-CN: 按钮/头像/输入框/图像
+  en-US: Button/Avatar/Input/Image
 ---
 
 ## zh-CN
 
-骨架按钮、头像和输入框。
+骨架按钮、头像、输入框和图像。
 
 ## en-US
 
-Skeleton button, avatar and input.
+Skeleton button, avatar, input and image.
diff --git a/components/skeleton/demo/element.ts b/components/skeleton/demo/element.ts
@@ -10,82 +10,76 @@ import {
 @Component({
   selector: 'nz-demo-skeleton-element',
   template: `
+    <nz-space nzSize="middle">
+      <nz-space-item>
+        <nz-skeleton-element
+          nzType="button"
+          [nzActive]="elementActive"
+          [nzSize]="elementSize"
+          [nzShape]="buttonShape"
+        ></nz-skeleton-element>
+      </nz-space-item>
+      <nz-space-item>
+        <nz-skeleton-element
+          nzType="avatar"
+          [nzActive]="elementActive"
+          [nzSize]="elementSize"
+          [nzShape]="avatarShape"
+        ></nz-skeleton-element>
+      </nz-space-item>
+      <nz-space-item>
+        <nz-skeleton-element nzType="input" [nzActive]="elementActive" [nzSize]="elementSize" style="width:200px"></nz-skeleton-element>
+      </nz-space-item>
+    </nz-space>
+    <br />
+    <br />
+    <nz-skeleton-element nzType="image" [nzActive]="elementActive"></nz-skeleton-element>
+    <nz-divider></nz-divider>
     <div nz-row nzAlign="middle" [nzGutter]="8">
-      <div nz-col nzSpan="5">
-        ButtonActive:
-        <nz-switch [(ngModel)]="buttonActive"></nz-switch>
-      </div>
-      <div nz-col nzSpan="9">
-        ButtonSize:
-        <nz-radio-group [(ngModel)]="buttonSize">
+      <div nz-col nzSpan="10">
+        Size:
+        <nz-radio-group [(ngModel)]="elementSize">
           <label nz-radio-button nzValue="default">Default</label>
           <label nz-radio-button nzValue="large">Large</label>
           <label nz-radio-button nzValue="small">Small</label>
         </nz-radio-group>
       </div>
-      <div nz-col nzSpan="9">
-        ButtonShape:
-        <nz-radio-group [(ngModel)]="buttonShape">
-          <label nz-radio-button nzValue="default">Default</label>
-          <label nz-radio-button nzValue="circle">Circle</label>
-          <label nz-radio-button nzValue="round">Round</label>
-        </nz-radio-group>
+      <div nz-col nzSpan="5">
+        Active:
+        <nz-switch [(ngModel)]="elementActive"></nz-switch>
       </div>
     </div>
     <br />
-    <nz-skeleton-element nzType="button" [nzActive]="buttonActive" [nzSize]="buttonSize" [nzShape]="buttonShape"></nz-skeleton-element>
-    <br />
     <br />
     <div nz-row nzAlign="middle" [nzGutter]="8">
-      <div nz-col nzSpan="5">
-        AvatarActive:
-        <nz-switch [(ngModel)]="avatarActive"></nz-switch>
-      </div>
-      <div nz-col nzSpan="9">
-        AvatarSize:
-        <nz-radio-group [(ngModel)]="avatarSize">
+      <div nz-col nzSpan="10">
+        Button Shape:
+        <nz-radio-group [(ngModel)]="buttonShape">
           <label nz-radio-button nzValue="default">Default</label>
-          <label nz-radio-button nzValue="large">Large</label>
-          <label nz-radio-button nzValue="small">Small</label>
+          <label nz-radio-button nzValue="circle">Circle</label>
+          <label nz-radio-button nzValue="round">Round</label>
         </nz-radio-group>
       </div>
-      <div nz-col nzSpan="9">
-        AvatarShape:
+      <div nz-col nzSpan="10">
+        Avatar Shape:
         <nz-radio-group [(ngModel)]="avatarShape">
           <label nz-radio-button nzValue="circle">Circle</label>
           <label nz-radio-button nzValue="square">Square</label>
         </nz-radio-group>
       </div>
     </div>
-    <br />
-    <nz-skeleton-element nzType="avatar" [nzActive]="avatarActive" [nzSize]="avatarSize" [nzShape]="avatarShape"></nz-skeleton-element>
-    <br />
-    <br />
-    <div nz-row nzAlign="middle" [nzGutter]="8">
-      <div nz-col nzSpan="5">
-        InputActive:
-        <nz-switch [(ngModel)]="inputActive"></nz-switch>
-      </div>
-      <div nz-col nzSpan="9">
-        InputSize:
-        <nz-radio-group [(ngModel)]="inputSize">
-          <label nz-radio-button nzValue="default">Default</label>
-          <label nz-radio-button nzValue="large">Large</label>
-          <label nz-radio-button nzValue="small">Small</label>
-        </nz-radio-group>
-      </div>
-    </div>
-    <br />
-    <nz-skeleton-element nzType="input" [nzActive]="inputActive" [nzSize]="inputSize" style="width:300px"></nz-skeleton-element>
   `
 })
 export class NzDemoSkeletonElementComponent {
   buttonActive = false;
   avatarActive = false;
   inputActive = false;
+  imageActive = false;
   buttonSize: NzSkeletonButtonSize = 'default';
   avatarSize: NzSkeletonAvatarSize = 'default';
   inputSize: NzSkeletonInputSize = 'default';
+  elementActive = false;
   buttonShape: NzSkeletonButtonShape = 'default';
   avatarShape: NzSkeletonAvatarShape = 'circle';
+  elementSize: NzSkeletonInputSize = 'default';
 }
diff --git a/components/skeleton/demo/list.md b/components/skeleton/demo/list.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 title:
   zh-CN: 列表样例
   en-US: List Sample

diff --git a/components/skeleton/demo/module b/components/skeleton/demo/module
@@ -4,5 +4,16 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
 
-export const moduleList = [ NzSkeletonModule, NzListModule, NzSwitchModule, NzIconModule, NzButtonModule, NzRadioModule ];
+export const moduleList = [
+    NzSkeletonModule,
+    NzListModule,
+    NzSwitchModule,
+    NzIconModule,
+    NzButtonModule,
+    NzRadioModule,
+    NzDividerModule,
+    NzSpaceModule
+];
diff --git a/components/skeleton/doc/index.en-US.md b/components/skeleton/doc/index.en-US.md
@@ -30,6 +30,7 @@ import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
 | `[nzLoading]` | Display the skeleton when `true` | `boolean` | - |
 | `[nzParagraph]` | Show paragraph placeholder | `boolean \| NzSkeletonParagraph` | `true` |
 | `[nzTitle]` | Show title placeholder | `boolean \| NzSkeletonTitle` | `true` |
+| `[nzRound]` | Show paragraph and title radius when `true` | `boolean` | `false` |
 
 
 ### NzSkeletonAvatar
@@ -74,3 +75,10 @@ import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
 | --- | --- | --- | --- |
 | `[nzActive]` | Show animation effect | `boolean` | `false` |
 | `[nzSize]` | Set the size | `'large' \| 'small' \| 'default'` | `'default'` |
+
+### nz-skeleton-element [nzType="image"]
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `[nzActive]` | Show animation effect | `boolean` | `false` |
+
diff --git a/components/skeleton/doc/index.zh-CN.md b/components/skeleton/doc/index.zh-CN.md
@@ -31,6 +31,7 @@ import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
 | `[nzLoading]` | 为 `true` 时，显示占位图。反之则直接展示子组件 | `boolean` | - |
 | `[nzParagraph]` | 是否显示段落占位图 | `boolean \| NzSkeletonParagraph` | `true` |
 | `[nzTitle]` | 是否显示标题占位图 | `boolean \| NzSkeletonTitle` | `true` |
+| `[nzRound]` | 为 true 时，段落和标题显示圆角 | `boolean` | `false` |
 
 ### NzSkeletonAvatar
 
@@ -75,3 +76,9 @@ import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
 | --- | --- | --- | --- |
 | `[nzActive]` | 是否展示动画效果 | `boolean` | `false` |
 | `[nzSize]` | 大小 | `'large' \| 'small' \| 'default'` | `'default'` |
+
+### nz-skeleton-element [nzType="image"]
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `[nzActive]` | 是否展示动画效果 | `boolean` | `false` |
diff --git a/components/skeleton/skeleton-element.component.ts b/components/skeleton/skeleton-element.component.ts
@@ -22,21 +22,20 @@ import {
 })
 export class NzSkeletonElementDirective {
   @Input() nzActive: boolean = false;
-  @Input() nzType!: 'button' | 'input' | 'avatar';
+  @Input() nzType!: 'button' | 'input' | 'avatar' | 'image';
 }
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'nz-skeleton-element[nzType="button"]',
   template: `
     <span
-      [class.ant-skeleton-button]="true"
+      class="ant-skeleton-button"
       [class.ant-skeleton-button-round]="nzShape === 'round'"
       [class.ant-skeleton-button-circle]="nzShape === 'circle'"
       [class.ant-skeleton-button-lg]="nzSize === 'large'"
       [class.ant-skeleton-button-sm]="nzSize === 'small'"
-    >
-    </span>
+    ></span>
   `
 })
 export class NzSkeletonElementButtonComponent {
@@ -49,14 +48,13 @@ export class NzSkeletonElementButtonComponent {
   selector: 'nz-skeleton-element[nzType="avatar"]',
   template: `
     <span
-      [class.ant-skeleton-avatar]="true"
+      class="ant-skeleton-avatar"
       [class.ant-skeleton-avatar-square]="nzShape === 'square'"
       [class.ant-skeleton-avatar-circle]="nzShape === 'circle'"
       [class.ant-skeleton-avatar-lg]="nzSize === 'large'"
       [class.ant-skeleton-avatar-sm]="nzSize === 'small'"
       [ngStyle]="styleMap"
-    >
-    </span>
+    ></span>
   `
 })
 export class NzSkeletonElementAvatarComponent implements OnChanges {
@@ -83,13 +81,28 @@ export class NzSkeletonElementAvatarComponent implements OnChanges {
   selector: 'nz-skeleton-element[nzType="input"]',
   template: `
     <span
-      [class.ant-skeleton-input]="true"
+      class="ant-skeleton-input"
       [class.ant-skeleton-input-lg]="nzSize === 'large'"
       [class.ant-skeleton-input-sm]="nzSize === 'small'"
-    >
-    </span>
+    ></span>
   `
 })
 export class NzSkeletonElementInputComponent {
   @Input() nzSize: NzSkeletonInputSize = 'default';
 }
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'nz-skeleton-element[nzType="image"]',
+  template: `
+    <span class="ant-skeleton-image">
+      <svg class="ant-skeleton-image-svg" viewBox="0 0 1098 1024" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z"
+          class="ant-skeleton-image-path"
+        />
+      </svg>
+    </span>
+  `
+})
+export class NzSkeletonElementImageComponent {}
diff --git a/components/skeleton/skeleton.component.ts b/components/skeleton/skeleton.component.ts
@@ -26,7 +26,8 @@ import { NzSkeletonAvatar, NzSkeletonAvatarShape, NzSkeletonAvatarSize, NzSkelet
   exportAs: 'nzSkeleton',
   host: {
     '[class.ant-skeleton-with-avatar]': '!!nzAvatar',
-    '[class.ant-skeleton-active]': 'nzActive'
+    '[class.ant-skeleton-active]': 'nzActive',
+    '[class.ant-skeleton-round]': '!!nzRound'
   },
   template: `
     <ng-container *ngIf="nzLoading">
@@ -48,6 +49,7 @@ import { NzSkeletonAvatar, NzSkeletonAvatarShape, NzSkeletonAvatarSize, NzSkelet
 export class NzSkeletonComponent implements OnInit, OnChanges {
   @Input() nzActive = false;
   @Input() nzLoading = true;
+  @Input() nzRound = false;
   @Input() nzTitle: NzSkeletonTitle | boolean = true;
   @Input() nzAvatar: NzSkeletonAvatar | boolean = false;
   @Input() nzParagraph: NzSkeletonParagraph | boolean = true;

diff --git a/components/skeleton/skeleton.module.ts b/components/skeleton/skeleton.module.ts
@@ -9,6 +9,7 @@ import {
   NzSkeletonElementAvatarComponent,
   NzSkeletonElementButtonComponent,
   NzSkeletonElementDirective,
+  NzSkeletonElementImageComponent,
   NzSkeletonElementInputComponent
 } from './skeleton-element.component';
 import { NzSkeletonComponent } from './skeleton.component';
@@ -19,6 +20,7 @@ import { NzSkeletonComponent } from './skeleton.component';
     NzSkeletonElementDirective,
     NzSkeletonElementButtonComponent,
     NzSkeletonElementAvatarComponent,
+    NzSkeletonElementImageComponent,
     NzSkeletonElementInputComponent
   ],
   imports: [CommonModule],
@@ -27,6 +29,7 @@ import { NzSkeletonComponent } from './skeleton.component';
     NzSkeletonElementDirective,
     NzSkeletonElementButtonComponent,
     NzSkeletonElementAvatarComponent,
+    NzSkeletonElementImageComponent,
     NzSkeletonElementInputComponent
   ]
 })