diff --git a/components/list/demo/basic.ts b/components/list/demo/basic.ts index 13d9e6dea61..87857736f19 100644 --- a/components/list/demo/basic.ts +++ b/components/list/demo/basic.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-list-basic', template: ` - + + diff --git a/components/list/demo/infinite-load.ts b/components/list/demo/infinite-load.ts index 94d33649d6c..f6c04ef0da3 100644 --- a/components/list/demo/infinite-load.ts +++ b/components/list/demo/infinite-load.ts @@ -14,7 +14,7 @@ const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email, [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false"> - + + [nzLoading]="loading" + [nzRenderItem]="item" + [nzLoadMore]="loadMore"> - - edit - more + + edit + more + diff --git a/components/list/demo/simple.ts b/components/list/demo/simple.ts index e8e783db0c9..cdc05e7fb2c 100644 --- a/components/list/demo/simple.ts +++ b/components/list/demo/simple.ts @@ -5,17 +5,20 @@ import { Component } from '@angular/core'; template: `

Default Size

+ [nzHeader]="'Header'" [nzFooter]="'Footer'" + [nzRenderItem]="item">

Small Size

+ [nzHeader]="'Header'" [nzFooter]="'Footer'" + [nzRenderItem]="item">

Large Size

+ [nzHeader]="'Header'" [nzFooter]="'Footer'" + [nzRenderItem]="item"> ` diff --git a/components/list/demo/vertical.ts b/components/list/demo/vertical.ts index 6af8bc45114..c9166ea760d 100644 --- a/components/list/demo/vertical.ts +++ b/components/list/demo/vertical.ts @@ -3,12 +3,16 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-list-vertical', template: ` - + - - 156 - 156 - 2 + + 156 + 156 + 2 >` | - | +| nzExtra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right. | `TemplateRef` | - | ### nz-list-item-meta diff --git a/components/list/doc/index.zh-CN.md b/components/list/doc/index.zh-CN.md index 17266af07af..1dd9ae04ccc 100644 --- a/components/list/doc/index.zh-CN.md +++ b/components/list/doc/index.zh-CN.md @@ -19,15 +19,15 @@ cols: 1 | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | nzDataSource | 列表数据源 | `any[]` | - | -| item | 自定义列表项 | `TemplateRef` | - | +| nzRenderItem | 自定义列表项 | `TemplateRef` | - | | nzBordered | 是否展示边框 | boolean | false | | nzFooter | 列表底部 | `string,TemplateRef` | - | | nzGrid | 列表栅格配置 | object | - | | nzHeader | 列表头部 | `string,TemplateRef` | - | | nzItemLayout | 设置 `nz-list-item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | | nzLoading | 当卡片内容还在加载中时,可以用 `loading` 展示一个占位 | boolean | false | -| loadMore | 加载更多 | `TemplateRef` | - | -| pagination | 对应的 `pagination` 配置 | `TemplateRef` | - | +| nzLoadMore | 加载更多 | `TemplateRef` | - | +| nzPagination | 对应的 `pagination` 配置 | `TemplateRef` | - | | nzSize | list 的尺寸 | `default,small,large` | `default` | | nzSplit | 是否展示分割线 | boolean | true | @@ -49,8 +49,8 @@ cols: 1 | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | nzContent | 内容项 | `string,TemplateRef` | - | -| action | 列表操作组,根据 `nzItemLayout` 的不同, 位置在卡片底部或者最右侧。 | `TemplateRef` | - | -| extra | 额外内容, 通常用在 `nzItemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | `TemplateRef` | - | +| nzActions | 列表操作组,根据 `nzItemLayout` 的不同, 位置在卡片底部或者最右侧。 | `Array>` | - | +| nzExtra | 额外内容, 通常用在 `nzItemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | `TemplateRef` | - | ### nz-list-item-meta diff --git a/components/list/list.spec.ts b/components/list/list.spec.ts index 67d7ebfc164..b13e648c81e 100644 --- a/components/list/list.spec.ts +++ b/components/list/list.spec.ts @@ -172,7 +172,10 @@ describe('list', () => { [nzLoading]="nzLoading" [nzSize]="nzSize" [nzSplit]="nzSplit" - [nzGrid]="nzGrid"> + [nzGrid]="nzGrid" + [nzRenderItem]="item" + [nzLoadMore]="loadMore" + [nzPagination]="pagination"> - + 156 logo diff --git a/components/list/nz-list-item.component.ts b/components/list/nz-list-item.component.ts index 0e3d09b6aa9..1cbed99e652 100644 --- a/components/list/nz-list-item.component.ts +++ b/components/list/nz-list-item.component.ts @@ -11,10 +11,10 @@ import { NzListItemMetaComponent } from './nz-list-item-meta.component'; -
    -
  • +
      +
    • - +
    @@ -23,9 +23,9 @@ import { NzListItemMetaComponent } from './nz-list-item-meta.component'; -
    +
    -
    +
    `, preserveWhitespaces: false, host: { @@ -33,7 +33,7 @@ import { NzListItemMetaComponent } from './nz-list-item-meta.component'; } }) export class NzListItemComponent { - @ContentChildren('action') actions: QueryList; + @Input() nzActions: Array> = []; @ContentChildren(NzListItemMetaComponent) metas: QueryList; isCon = false; @@ -51,5 +51,5 @@ export class NzListItemComponent { this.isCon = !!value; } - @ContentChild('extra') extra: TemplateRef; + @Input() nzExtra: TemplateRef; } diff --git a/components/list/nz-list.component.ts b/components/list/nz-list.component.ts index b413b371bc0..336c28a0d51 100644 --- a/components/list/nz-list.component.ts +++ b/components/list/nz-list.component.ts @@ -12,7 +12,7 @@ import { ListSize, NzListGrid } from './interface'; @@ -24,7 +24,7 @@ import { ListSize, NzListGrid } from './interface';
    @@ -59,9 +59,9 @@ export class NzListComponent implements OnChanges { _isHeader = false; _header = ''; - _headerTpl: TemplateRef; + _headerTpl: TemplateRef; @Input() - set nzHeader(value: string | TemplateRef) { + set nzHeader(value: string | TemplateRef) { if (value instanceof TemplateRef) { this._header = null; this._headerTpl = value; @@ -74,9 +74,9 @@ export class NzListComponent implements OnChanges { _isFooter = false; _footer = ''; - _footerTpl: TemplateRef; + _footerTpl: TemplateRef; @Input() - set nzFooter(value: string | TemplateRef) { + set nzFooter(value: string | TemplateRef) { if (value instanceof TemplateRef) { this._footer = null; this._footerTpl = value; @@ -89,7 +89,7 @@ export class NzListComponent implements OnChanges { @Input() nzItemLayout: 'vertical' | 'horizontal' = 'horizontal'; - @ContentChild('item') nzItem: TemplateRef; + @Input() nzRenderItem: TemplateRef; private _loading = false; @Input() @@ -100,8 +100,8 @@ export class NzListComponent implements OnChanges { return this._loading; } - @ContentChild('loadMore') nzLoadMore: TemplateRef; - @ContentChild('pagination') nzPagination: TemplateRef; + @Input() nzLoadMore: TemplateRef; + @Input() nzPagination: TemplateRef; @Input() nzSize: ListSize = 'default';