From 622f9b8ab80ff045df3fae891241e7881deca701 Mon Sep 17 00:00:00 2001 From: wenqi73 <1264578441@qq.com> Date: Mon, 16 Jul 2018 17:26:05 +0800 Subject: [PATCH] add list demo --- components/skeleton/demo/basic.md | 2 +- components/skeleton/demo/basic.ts | 29 +++++--------- components/skeleton/demo/card.md | 2 +- components/skeleton/demo/card.ts | 4 +- components/skeleton/demo/list.md | 14 +++++++ components/skeleton/demo/list.ts | 40 +++++++++++++++++++ .../skeleton/nz-skeleton.component.html | 4 +- components/skeleton/nz-skeleton.component.ts | 32 +++++++-------- components/skeleton/nz-skeleton.spec.ts | 1 + 9 files changed, 87 insertions(+), 41 deletions(-) create mode 100644 components/skeleton/demo/list.md create mode 100644 components/skeleton/demo/list.ts diff --git a/components/skeleton/demo/basic.md b/components/skeleton/demo/basic.md index ecba901a68e..41d61a35ec7 100644 --- a/components/skeleton/demo/basic.md +++ b/components/skeleton/demo/basic.md @@ -1,5 +1,5 @@ --- -order: 0 +order: 1 title: zh-CN: 基础列表样例 en-US: Basic List Sample diff --git a/components/skeleton/demo/basic.ts b/components/skeleton/demo/basic.ts index 852bcc3c09b..85542c1b89d 100644 --- a/components/skeleton/demo/basic.ts +++ b/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'; - + - `, - 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.' + }; + }); } diff --git a/components/skeleton/demo/card.md b/components/skeleton/demo/card.md index a3ffec950fc..6b0f5880b1a 100644 --- a/components/skeleton/demo/card.md +++ b/components/skeleton/demo/card.md @@ -1,5 +1,5 @@ --- -order: 1 +order: 0 title: zh-CN: 卡片样例 en-US: Card Sample diff --git a/components/skeleton/demo/card.ts b/components/skeleton/demo/card.ts index 5a15d0ed3d2..d094a8ffaa8 100644 --- a/components/skeleton/demo/card.ts +++ b/components/skeleton/demo/card.ts @@ -5,9 +5,9 @@ import { Component } from '@angular/core'; template: ` - + diff --git a/components/skeleton/demo/list.md b/components/skeleton/demo/list.md new file mode 100644 index 00000000000..2142dee87ab --- /dev/null +++ b/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. \ No newline at end of file diff --git a/components/skeleton/demo/list.ts b/components/skeleton/demo/list.ts new file mode 100644 index 00000000000..888eeed810b --- /dev/null +++ b/components/skeleton/demo/list.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-skeleton-list', + template: ` + + + + + + 156 + 156 + 2 + + {{item.title}} + + + logo + + + + + + ` +}) +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.' + }; + }); +} diff --git a/components/skeleton/nz-skeleton.component.html b/components/skeleton/nz-skeleton.component.html index ffb06b4456e..c6db0c56723 100644 --- a/components/skeleton/nz-skeleton.component.html +++ b/components/skeleton/nz-skeleton.component.html @@ -6,9 +6,9 @@
-

+

diff --git a/components/skeleton/nz-skeleton.component.ts b/components/skeleton/nz-skeleton.component.ts index 991923001d3..6c64abf84ff 100644 --- a/components/skeleton/nz-skeleton.component.ts +++ b/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 = []; avartarClassMap; - private _title: NzSkeletonTitle = {}; - private _avatar: NzSkeletonAvatar = {}; - private _paragraph: NzSkeletonParagraph = {}; - private _widthList: Array = []; - 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 { - 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 { diff --git a/components/skeleton/nz-skeleton.spec.ts b/components/skeleton/nz-skeleton.spec.ts index 9d5ef1b2918..21145c2b448 100644 --- a/components/skeleton/nz-skeleton.spec.ts +++ b/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();