From d2c0eecec3fdfaf6a167e1b4bc7523a14e6f07db Mon Sep 17 00:00:00 2001 From: wenqi73 <1264578441@qq.com> Date: Sat, 4 Aug 2018 00:58:07 +0800 Subject: [PATCH] sync ant-design demo --- components/list/demo/loadmore.ts | 41 +++++++++++-------- components/skeleton/demo/active.md | 13 ++++++ components/skeleton/demo/active.ts | 9 ++++ components/skeleton/demo/basic.md | 10 ++--- components/skeleton/demo/basic.ts | 28 +------------ components/skeleton/demo/card.md | 14 ------- components/skeleton/demo/card.ts | 30 -------------- components/skeleton/demo/children.md | 14 +++++++ components/skeleton/demo/children.ts | 36 ++++++++++++++++ components/skeleton/demo/list.ts | 2 +- components/skeleton/doc/index.en-US.md | 4 ++ components/skeleton/doc/index.zh-CN.md | 8 +++- .../skeleton/nz-skeleton.component.html | 4 +- components/skeleton/nz-skeleton.component.ts | 20 ++++----- components/skeleton/nz-skeleton.spec.ts | 18 ++++++-- components/skeleton/style/index.less | 4 +- 16 files changed, 141 insertions(+), 114 deletions(-) create mode 100644 components/skeleton/demo/active.md create mode 100644 components/skeleton/demo/active.ts delete mode 100644 components/skeleton/demo/card.md delete mode 100644 components/skeleton/demo/card.ts create mode 100644 components/skeleton/demo/children.md create mode 100644 components/skeleton/demo/children.ts diff --git a/components/list/demo/loadmore.ts b/components/list/demo/loadmore.ts index 1080b202e55..dbb19273057 100644 --- a/components/list/demo/loadmore.ts +++ b/components/list/demo/loadmore.ts @@ -3,6 +3,7 @@ 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({ @@ -10,29 +11,30 @@ const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email, template: ` - - edit - more - + + edit + more + - {{item.name.last}} + {{item.name.last}} - + + -
+
-
@@ -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 new file mode 100644 index 00000000000..679ff6ae680 --- /dev/null +++ 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. \ No newline at end of file diff --git a/components/skeleton/demo/active.ts b/components/skeleton/demo/active.ts new file mode 100644 index 00000000000..cdf52a5d172 --- /dev/null +++ b/components/skeleton/demo/active.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-skeleton-active', + template: ` + + ` +}) +export class NzDemoSkeletonActiveComponent { } diff --git a/components/skeleton/demo/basic.md b/components/skeleton/demo/basic.md index 41d61a35ec7..06be1a9e12a 100644 --- 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. \ No newline at end of file +Basic usage. \ No newline at end of file diff --git a/components/skeleton/demo/basic.ts b/components/skeleton/demo/basic.ts index 85542c1b89d..a8f24b1da7d 100644 --- 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: ` - - - - - - - - {{item.title}} - - - - - - + ` }) -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 deleted file mode 100644 index 6b0f5880b1a..00000000000 --- a/components/skeleton/demo/card.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -order: 0 -title: - zh-CN: 卡片样例 - en-US: Card Sample ---- - -## zh-CN - -在卡片组件中使用加载占位符。 - -## en-US - -Use skeleton in card component. \ No newline at end of file diff --git a/components/skeleton/demo/card.ts b/components/skeleton/demo/card.ts deleted file mode 100644 index b004bbe1123..00000000000 --- a/components/skeleton/demo/card.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'nz-demo-skeleton-card', - template: ` - - - - - - - - - - - - - - - - - - - ` -}) -export class NzDemoSkeletonCardComponent { - loading = true; -} diff --git a/components/skeleton/demo/children.md b/components/skeleton/demo/children.md new file mode 100644 index 00000000000..a2ee03a358c --- /dev/null +++ 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 new file mode 100644 index 00000000000..d8fbca3f938 --- /dev/null +++ b/components/skeleton/demo/children.ts @@ -0,0 +1,36 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-skeleton-children', + template: ` +
+ +

Ant Design, a design language

+

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.

+ + +
+ `, + 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 index c5a067b957c..e119431fdfe 100644 --- a/components/skeleton/demo/list.ts +++ b/components/skeleton/demo/list.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; - + 156 156 2 diff --git a/components/skeleton/doc/index.en-US.md b/components/skeleton/doc/index.en-US.md index cd73ed7b476..5e42e544966 100644 --- 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 index a7303ec6c01..24cb031f712 100644 --- 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 index c6db0c56723..07d08595ba4 100644 --- a/components/skeleton/nz-skeleton.component.html +++ b/components/skeleton/nz-skeleton.component.html @@ -2,13 +2,13 @@
+ [ngClass]="avatarClassMap">

    -
  • +
diff --git a/components/skeleton/nz-skeleton.component.ts b/components/skeleton/nz-skeleton.component.ts index 4c4451f032f..9913d9b5f7b 100644 --- a/components/skeleton/nz-skeleton.component.ts +++ b/components/skeleton/nz-skeleton.component.ts @@ -11,11 +11,12 @@ import { NzSkeletonAvatar, NzSkeletonParagraph, NzSkeletonTitle } from './nz-ske } }) export class NzSkeletonComponent implements OnInit, OnChanges { - title: NzSkeletonTitle = {}; - avatar: NzSkeletonAvatar = {}; - paragraph: NzSkeletonParagraph = {}; + title: NzSkeletonTitle; + avatar: NzSkeletonAvatar; + paragraph: NzSkeletonParagraph; + avatarClassMap; + rowsList: number[] = []; widthList: Array = []; - avartarClassMap; @Input() nzActive = false; @Input() nzLoading = true; @@ -25,7 +26,7 @@ export class NzSkeletonComponent implements OnInit, OnChanges { getTitleBasicProps(hasAvatar: boolean, hasParagraph: boolean): NzSkeletonTitle { if (!hasAvatar && hasParagraph) { - return { width: '40%' }; + return { width: '38%' }; } if (hasAvatar && hasParagraph) { return { width: '50%' }; @@ -46,7 +47,7 @@ export class NzSkeletonComponent implements OnInit, OnChanges { if (hasAvatar && hasTitle) { basicProps.width = '100%'; } else { - basicProps.width = '60%'; + basicProps.width = '61%'; } // Rows if (!hasAvatar && hasTitle) { @@ -72,10 +73,6 @@ export class NzSkeletonComponent implements OnInit, OnChanges { } } - getRowsList(value: number): number[] { - return [...Array(value)]; - } - getWidthList(): Array { const { width, rows } = this.paragraph; let widthList = []; @@ -89,7 +86,7 @@ export class NzSkeletonComponent implements OnInit, OnChanges { } updateClassMap(): void { - this.avartarClassMap = { + this.avatarClassMap = { [ `ant-skeleton-avatar-lg` ] : this.avatar.size === 'large', [ `ant-skeleton-avatar-sm ` ] : this.avatar.size === 'small', [ `ant-skeleton-avatar-circle` ] : this.avatar.shape === 'circle', @@ -110,6 +107,7 @@ export class NzSkeletonComponent implements OnInit, OnChanges { ...this.getParagraphBasicProps(!!this.nzAvatar, !!this.nzTitle), ...this.getProps(this.nzParagraph) }; + this.rowsList = [...Array(this.paragraph.rows)]; this.widthList = this.getWidthList(); } diff --git a/components/skeleton/nz-skeleton.spec.ts b/components/skeleton/nz-skeleton.spec.ts index 21145c2b448..23bdc8084ec 100644 --- a/components/skeleton/nz-skeleton.spec.ts +++ b/components/skeleton/nz-skeleton.spec.ts @@ -7,6 +7,7 @@ describe('skeleton', () => { let fixture: ComponentFixture; let testComp: NzTestSkeletonComponent; let dl: DebugElement; + beforeEach(() => { TestBed.configureTestingModule({ imports: [NzSkeletonModule], @@ -18,6 +19,15 @@ describe('skeleton', () => { fixture.detectChanges(); }); + describe('#nzActive', () => { + it('should active work', () => { + expect(dl.nativeElement.querySelector('.ant-skeleton-active')).toBeFalsy(); + testComp.nzActive = true; + fixture.detectChanges(); + expect(dl.nativeElement.querySelector('.ant-skeleton-active')).toBeTruthy(); + }); + }); + describe('#nzTitle', () => { it('should basic width prop work', () => { expect(dl.nativeElement.querySelector('.ant-skeleton-title')).toBeFalsy(); @@ -25,7 +35,7 @@ describe('skeleton', () => { testComp.nzAvatar = false; testComp.nzParagraph = true; fixture.detectChanges(); - expect(dl.nativeElement.querySelector('.ant-skeleton-title').style.width).toBe('40%'); + expect(dl.nativeElement.querySelector('.ant-skeleton-title').style.width).toBe('38%'); testComp.nzAvatar = true; fixture.detectChanges(); expect(dl.nativeElement.querySelector('.ant-skeleton-title').style.width).toBe('50%'); @@ -47,7 +57,7 @@ describe('skeleton', () => { }); describe('#nzAvatar', () => { - it('should basic avartar props work', () => { + it('should basic avatar props work', () => { testComp.nzTitle = true; testComp.nzAvatar = true; testComp.nzParagraph = false; @@ -89,7 +99,7 @@ describe('skeleton', () => { paragraphs = dl.nativeElement.querySelectorAll('.ant-skeleton-paragraph > li'); expect(paragraphs.length).toBe(3); expect(paragraphs[1].style.width).toBe(''); - expect(paragraphs[2].style.width).toBe('60%'); + expect(paragraphs[2].style.width).toBe('61%'); }); it('should width type is string or number work', () => { testComp.nzParagraph = { width: 100 }; @@ -124,6 +134,7 @@ describe('skeleton', () => { selector: 'nz-test-skeleton', template: ` { ` }) export class NzTestSkeletonComponent { + nzActive; nzAvatar; nzTitle; nzParagraph; diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less index 5ff6eef4a58..c68b61cf6db 100644 --- a/components/skeleton/style/index.less +++ b/components/skeleton/style/index.less @@ -105,9 +105,9 @@ @keyframes ~"@{skeleton-prefix-cls}-loading" { 0% { - background-position: 0 50%; + background-position: 100% 50%; } 100% { - background-position: 100% 50%; + background-position: 0 50%; } } \ No newline at end of file