From aa2ea54eba8e4f68c23240ca88f84682f7cf6552 Mon Sep 17 00:00:00 2001 From: Junhan Yang <50307523+yangjunhan@users.noreply.github.com> Date: Thu, 10 Sep 2020 15:40:45 +0800 Subject: [PATCH] feat(module:skeleton): add nzRound prop and skeleton-element image (#5710) --- components/skeleton/demo/children.md | 4 +- components/skeleton/demo/element.md | 10 +-- components/skeleton/demo/element.ts | 88 +++++++++---------- components/skeleton/demo/list.md | 2 +- components/skeleton/demo/module | 13 ++- components/skeleton/doc/index.en-US.md | 8 ++ components/skeleton/doc/index.zh-CN.md | 7 ++ .../skeleton/skeleton-element.component.ts | 33 ++++--- components/skeleton/skeleton.component.ts | 4 +- components/skeleton/skeleton.module.ts | 3 + components/skeleton/skeleton.spec.ts | 52 +++++++++-- components/skeleton/style/index.less | 2 +- 12 files changed, 152 insertions(+), 74 deletions(-) diff --git a/components/skeleton/demo/children.md b/components/skeleton/demo/children.md index bd6dcb61dd0..f08df0b76d7 100644 --- 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 index 7b6bb298e52..3987af4fbe1 100644 --- 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. \ No newline at end of file +Skeleton button, avatar, input and image. \ No newline at end of file diff --git a/components/skeleton/demo/element.ts b/components/skeleton/demo/element.ts index f637563c6c7..7575b2c3f6c 100644 --- a/components/skeleton/demo/element.ts +++ b/components/skeleton/demo/element.ts @@ -10,82 +10,76 @@ import { @Component({ selector: 'nz-demo-skeleton-element', template: ` + + + + + + + + + + + +
+
+ +
-
- ButtonActive: - -
-
- ButtonSize: - +
+ Size: +
-
- ButtonShape: - - - - - +
+ Active: +

- -

-
- AvatarActive: - -
-
- AvatarSize: - +
+ Button Shape: + - - + +
-
- AvatarShape: +
+ Avatar Shape:
-
- -
-
-
-
- InputActive: - -
-
- InputSize: - - - - - -
-
-
- ` }) 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 index 5767637cf79..7d6fabcafb6 100644 --- 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 index 2e18a602a7c..3ebab5e2cae 100644 --- 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 index 4ee9f5618f5..edd009ed4d6 100644 --- 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 index 1a3b89de6be..9ff2b64659c 100644 --- 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 index 389af187ec4..fa533d2b795 100644 --- a/components/skeleton/skeleton-element.component.ts +++ b/components/skeleton/skeleton-element.component.ts @@ -22,7 +22,7 @@ import { }) export class NzSkeletonElementDirective { @Input() nzActive: boolean = false; - @Input() nzType!: 'button' | 'input' | 'avatar'; + @Input() nzType!: 'button' | 'input' | 'avatar' | 'image'; } @Component({ @@ -30,13 +30,12 @@ export class NzSkeletonElementDirective { selector: 'nz-skeleton-element[nzType="button"]', template: ` - + > ` }) export class NzSkeletonElementButtonComponent { @@ -49,14 +48,13 @@ export class NzSkeletonElementButtonComponent { selector: 'nz-skeleton-element[nzType="avatar"]', template: ` - + > ` }) export class NzSkeletonElementAvatarComponent implements OnChanges { @@ -83,13 +81,28 @@ export class NzSkeletonElementAvatarComponent implements OnChanges { selector: 'nz-skeleton-element[nzType="input"]', template: ` - + > ` }) export class NzSkeletonElementInputComponent { @Input() nzSize: NzSkeletonInputSize = 'default'; } + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'nz-skeleton-element[nzType="image"]', + template: ` + + + + + + ` +}) +export class NzSkeletonElementImageComponent {} diff --git a/components/skeleton/skeleton.component.ts b/components/skeleton/skeleton.component.ts index 0b6b37d11b6..73aa3c27078 100644 --- 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: ` @@ -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 index ac7be2287de..33d7190eafb 100644 --- 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 ] }) diff --git a/components/skeleton/skeleton.spec.ts b/components/skeleton/skeleton.spec.ts index d58d3e940ec..150d422d3a3 100644 --- a/components/skeleton/skeleton.spec.ts +++ b/components/skeleton/skeleton.spec.ts @@ -140,6 +140,15 @@ describe('skeleton', () => { expect(paragraphs[3].style.width).toBe(''); }); }); + + describe('#nzRound', () => { + it('should round work', () => { + expect(dl.nativeElement.querySelector('.ant-skeleton-round')).toBeFalsy(); + testComp.nzRound = true; + fixture.detectChanges(); + expect(dl.nativeElement.querySelector('.ant-skeleton-round')).toBeTruthy(); + }); + }); }); describe('skeleton element', () => { @@ -163,6 +172,9 @@ describe('skeleton element', () => { testComp.nzActive = true; fixture.detectChanges(); expect(dl.nativeElement.querySelector('.ant-skeleton-active')).toBeTruthy(); + testComp.useSuite = 4; + fixture.detectChanges(); + expect(dl.nativeElement.querySelector('.ant-skeleton-active')).toBeTruthy(); }); it('should nzSize work', () => { @@ -196,13 +208,30 @@ describe('skeleton element', () => { fixture.detectChanges(); expect(dl.nativeElement.querySelector('.ant-skeleton-button-round')).toBeTruthy(); }); + + it('should image svg work', () => { + fixture.detectChanges(); + expect(dl.nativeElement.querySelector('svg')).toBeNull(); + testComp.useSuite = 4; + fixture.detectChanges(); + expect(dl.nativeElement.querySelector('svg')).toBeTruthy(); + }); }); @Component({ - template: ` ` + template: ` + + ` }) export class NzTestSkeletonComponent { nzActive: boolean = false; + nzRound: boolean = false; nzAvatar: NzSkeletonAvatar | boolean = false; nzTitle: NzSkeletonTitle | boolean = false; nzParagraph: NzSkeletonParagraph | boolean = false; @@ -211,11 +240,22 @@ export class NzTestSkeletonComponent { @Component({ template: ` - - - - - + + + + ` }) diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less index 6528289d4b4..b051216d0c0 100644 --- a/components/skeleton/style/index.less +++ b/components/skeleton/style/index.less @@ -262,4 +262,4 @@ } } -@import './rtl'; +@import './rtl'; \ No newline at end of file