Skip to content

Commit 1f3010f

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:list): support standalone component (#8244)
1 parent c2120b2 commit 1f3010f

9 files changed

+143
-91
lines changed

‎components/list/doc/index.en-US.md

+31-33
Original file line numberDiff line numberDiff line change
@@ -18,53 +18,52 @@ import { NzListModule } from 'ng-zorro-antd/list';
1818

1919
## API
2020

21-
### nz-list
21+
### nz-list:standalone
2222

23-
| Property | Description | Type | Default
24-
| --- | --- | --- | --- |
25-
| `[nzBordered]` | Toggles rendering of the border around the list | `boolean` | `false` |
26-
| `[nzFooter]` | List footer renderer | `string \| TemplateRef<void>` | - |
27-
| `[nzHeader]` | List header renderer | `string \| TemplateRef<void>` | - |
28-
| `[nzItemLayout]` | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | `'vertical' \| 'horizontal'` | `'horizontal'` |
29-
| `[nzLoading]` | Shows a loading indicator while the contents of the list are being fetched | `boolean` | `false` |
30-
| `[nzSize]` | Size of list | `'large' \| 'small' \| 'default'` | `'default'` |
31-
| `[nzSplit]` | Toggles rendering of the split under the list item | `boolean` | `true` |
23+
| Property | Description | Type | Default |
24+
| ---------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -------------- |
25+
| `[nzBordered]` | Toggles rendering of the border around the list | `boolean` | `false` |
26+
| `[nzFooter]` | List footer renderer | `string \| TemplateRef<void>` | - |
27+
| `[nzHeader]` | List header renderer | `string \| TemplateRef<void>` | - |
28+
| `[nzItemLayout]` | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | `'vertical' \| 'horizontal'` | `'horizontal'` |
29+
| `[nzLoading]` | Shows a loading indicator while the contents of the list are being fetched | `boolean` | `false` |
30+
| `[nzSize]` | Size of list | `'large' \| 'small' \| 'default'` | `'default'` |
31+
| `[nzSplit]` | Toggles rendering of the split under the list item | `boolean` | `true` |
3232

33-
### nz-list-empty
33+
### nz-list-empty:standalone
3434

3535
Empty content component for the list.
3636

37-
| Property | Description | Type | Default
38-
| --- | --- | --- | --- |
39-
| `[nzNoResult]` | Empty content | `string \| TemplateRef<void>` | - |
37+
| Property | Description | Type | Default |
38+
| -------------- | ------------- | ----------------------------- | ------- |
39+
| `[nzNoResult]` | Empty content | `string \| TemplateRef<void>` | - |
4040

41-
### nz-list[nzGrid]
41+
### nz-list[nzGrid]:standalone
4242

4343
Use grid layout for the list.
4444

45-
46-
### nz-list-header
45+
### nz-list-header:standalone
4746

4847
Header component for the list.
4948

50-
### nz-list-footer
49+
### nz-list-footer:standalone
5150

5251
Footer component for the list.
5352

54-
### nz-list-pagination
53+
### nz-list-pagination:standalone
5554

5655
Pagination component for the list.
5756

58-
### nz-list-load-more
57+
### nz-list-load-more:standalone
5958

6059
Load more component for the list.
6160

6261
---
6362

64-
### nz-list-item
63+
### nz-list-item:standalone
6564

66-
| Property | Description | Type | Default
67-
| --- | --- | --- | --- |
65+
| Property | Description | Type | Default |
66+
| ------------ | ---------------------------------------- | --------- | ------- |
6867
| `[nzNoFlex]` | Whether it's not `flex` layout rendering | `boolean` | `false` |
6968

7069
#### ul[nz-list-item-actions]
@@ -81,13 +80,13 @@ Extra content for the list items.
8180

8281
---
8382

84-
### nz-list-item-meta
83+
### nz-list-item-meta:standalone
8584

86-
| Property | Description | Type | Default
87-
| --- | --- | --- | --- |
88-
| `[nzAvatar]` | The avatar of list item | `string \| TemplateRef<void>` | - |
89-
| `[nzDescription]` | The description of list item | `string \| TemplateRef<void>` | - |
90-
| `[nzTitle]` | The title of list item | `string \| TemplateRef<void>` | - |
85+
| Property | Description | Type | Default |
86+
| ----------------- | ---------------------------- | ----------------------------- | ------- |
87+
| `[nzAvatar]` | The avatar of list item | `string \| TemplateRef<void>` | - |
88+
| `[nzDescription]` | The description of list item | `string \| TemplateRef<void>` | - |
89+
| `[nzTitle]` | The title of list item | `string \| TemplateRef<void>` | - |
9190

9291
#### nz-list-item-meta-title
9392

@@ -101,7 +100,6 @@ Description component for the list items meta part.
101100

102101
Avatar component for the list items meta part.
103102

104-
| Property | Description | Type | Default | Global Config |
105-
| -------- | ----------- | ---- | ------- | ------------- |
106-
| `[nzSrc]` | The address of the image for an image avatar | `string` | - |
107-
103+
| Property | Description | Type | Default | Global Config |
104+
| --------- | -------------------------------------------- | -------- | ------- | ------------- |
105+
| `[nzSrc]` | The address of the image for an image avatar | `string` | - |

‎components/list/doc/index.zh-CN.md

+31-31
Original file line numberDiff line numberDiff line change
@@ -19,52 +19,52 @@ import { NzListModule } from 'ng-zorro-antd/list';
1919

2020
## API
2121

22-
### nz-list
22+
### nz-list:standalone
2323

24-
| 参数 | 说明 | 类型 | 默认值 |
25-
| --- | --- | --- | --- |
26-
| `[nzBordered]` | 是否展示边框 | `boolean` | `false` |
27-
| `[nzFooter]` | 列表底部 | `string \| TemplateRef<void>` | - |
28-
| `[nzHeader]` | 列表头部 | `string \| TemplateRef<void>` | - |
29-
| `[nzItemLayout]` | 设置 `nz-list-item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | `'vertical' \| 'horizontal'` | `'horizontal'` |
30-
| `[nzLoading]` | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | `boolean` | `false` |
31-
| `[nzSize]` | list 的尺寸 | `'large' \| 'small' \| 'default'` | `'default'` |
32-
| `[nzSplit]` | 是否展示分割线 | `boolean` | `true` |
24+
| 参数 | 说明 | 类型 | 默认值 |
25+
| ---------------- | -------------------------------------------------------------------- | --------------------------------- | -------------- |
26+
| `[nzBordered]` | 是否展示边框 | `boolean` | `false` |
27+
| `[nzFooter]` | 列表底部 | `string \| TemplateRef<void>` | - |
28+
| `[nzHeader]` | 列表头部 | `string \| TemplateRef<void>` | - |
29+
| `[nzItemLayout]` | 设置 `nz-list-item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | `'vertical' \| 'horizontal'` | `'horizontal'` |
30+
| `[nzLoading]` | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | `boolean` | `false` |
31+
| `[nzSize]` | list 的尺寸 | `'large' \| 'small' \| 'default'` | `'default'` |
32+
| `[nzSplit]` | 是否展示分割线 | `boolean` | `true` |
3333

34-
### nz-list-empty
34+
### nz-list-empty:standalone
3535

3636
列表空内容组件
3737

38-
| 参数 | 说明 | 类型 | 默认值 |
39-
| --- | --- | --- | --- |
40-
| `[nzNoResult]` | 空内容显示内容 | `string \| TemplateRef<void>` | - |
38+
| 参数 | 说明 | 类型 | 默认值 |
39+
| -------------- | -------------- | ----------------------------- | ------ |
40+
| `[nzNoResult]` | 空内容显示内容 | `string \| TemplateRef<void>` | - |
4141

42-
### nz-list[nzGrid]
42+
### nz-list[nzGrid]:standalone
4343

4444
使用栅格布局
4545

46-
### nz-list-header
46+
### nz-list-header:standalone
4747

4848
列表头部位置组件
4949

50-
### nz-list-footer
50+
### nz-list-footer:standalone
5151

5252
列表脚部位置组件
5353

54-
### nz-list-pagination
54+
### nz-list-pagination:standalone
5555

5656
列表分页位置组件
5757

58-
### nz-list-load-more
58+
### nz-list-load-more:standalone
5959

6060
列表加载更多位置组件
6161

6262
---
6363

64-
### nz-list-item
64+
### nz-list-item:standalone
6565

66-
| 参数 | 说明 | 类型 | 默认值 |
67-
| --- | --- | --- | --- |
66+
| 参数 | 说明 | 类型 | 默认值 |
67+
| ------------ | ---------------------- | --------- | ------- |
6868
| `[nzNoFlex]` | 是否非 `flex` 布局渲染 | `boolean` | `false` |
6969

7070
### ul[nz-list-item-actions]
@@ -81,13 +81,13 @@ import { NzListModule } from 'ng-zorro-antd/list';
8181

8282
列表项扩展内容位置组件
8383

84-
### nz-list-item-meta
84+
### nz-list-item-meta:standalone
8585

86-
| 参数 | 说明 | 类型 | 默认值 |
87-
| --- | --- | --- | --- |
88-
| `[nzAvatar]` | 列表元素的图标 | `string \| TemplateRef<void>` | - |
89-
| `[nzDescription]` | 列表元素的描述内容 | `string \| TemplateRef<void>` | - |
90-
| `[nzTitle]` | 列表元素的标题 | `string \| TemplateRef<void>` | - |
86+
| 参数 | 说明 | 类型 | 默认值 |
87+
| ----------------- | ------------------ | ----------------------------- | ------ |
88+
| `[nzAvatar]` | 列表元素的图标 | `string \| TemplateRef<void>` | - |
89+
| `[nzDescription]` | 列表元素的描述内容 | `string \| TemplateRef<void>` | - |
90+
| `[nzTitle]` | 列表元素的标题 | `string \| TemplateRef<void>` | - |
9191

9292
### nz-list-item-meta-title
9393

@@ -101,6 +101,6 @@ import { NzListModule } from 'ng-zorro-antd/list';
101101

102102
列表项元信息头像部分组件
103103

104-
| 参数 | 说明 | 类型 | 默认值 |
105-
| --- | --- | --- | --- |
106-
| `[nzSrc]` | 图片类头像的资源地址 | `string` | - |
104+
| 参数 | 说明 | 类型 | 默认值 |
105+
| --------- | -------------------- | -------- | ------ |
106+
| `[nzSrc]` | 图片类头像的资源地址 | `string` | - |

‎components/list/list-cell.ts

+15-6
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,18 @@
55

66
import { ChangeDetectionStrategy, Component, Directive, Input, TemplateRef } from '@angular/core';
77

8+
import { NzEmptyModule } from 'ng-zorro-antd/empty';
9+
810
@Component({
911
selector: 'nz-list-empty',
1012
exportAs: 'nzListHeader',
1113
changeDetection: ChangeDetectionStrategy.OnPush,
1214
template: ` <nz-embed-empty [nzComponentName]="'list'" [specificContent]="nzNoResult"></nz-embed-empty> `,
1315
host: {
1416
class: 'ant-list-empty-text'
15-
}
17+
},
18+
imports: [NzEmptyModule],
19+
standalone: true
1620
})
1721
export class NzListEmptyComponent {
1822
@Input() nzNoResult?: string | TemplateRef<void>;
@@ -25,7 +29,8 @@ export class NzListEmptyComponent {
2529
template: ` <ng-content></ng-content> `,
2630
host: {
2731
class: 'ant-list-header'
28-
}
32+
},
33+
standalone: true
2934
})
3035
export class NzListHeaderComponent {}
3136

@@ -36,7 +41,8 @@ export class NzListHeaderComponent {}
3641
template: ` <ng-content></ng-content> `,
3742
host: {
3843
class: 'ant-list-footer'
39-
}
44+
},
45+
standalone: true
4046
})
4147
export class NzListFooterComponent {}
4248

@@ -47,20 +53,23 @@ export class NzListFooterComponent {}
4753
template: ` <ng-content></ng-content> `,
4854
host: {
4955
class: 'ant-list-pagination'
50-
}
56+
},
57+
standalone: true
5158
})
5259
export class NzListPaginationComponent {}
5360

5461
@Directive({
5562
selector: 'nz-list-load-more',
56-
exportAs: 'nzListLoadMoreDirective'
63+
exportAs: 'nzListLoadMoreDirective',
64+
standalone: true
5765
})
5866
export class NzListLoadMoreDirective {}
5967

6068
@Directive({
6169
selector: 'nz-list[nzGrid]',
6270
host: {
6371
class: 'ant-list-grid'
64-
}
72+
},
73+
standalone: true
6574
})
6675
export class NzListGridDirective {}

‎components/list/list-item-cell.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6+
import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
67
import {
78
ChangeDetectionStrategy,
89
ChangeDetectorRef,
@@ -28,15 +29,17 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
2829
template: ` <ng-content></ng-content> `,
2930
host: {
3031
class: 'ant-list-item-extra'
31-
}
32+
},
33+
standalone: true
3234
})
3335
export class NzListItemExtraComponent {}
3436

3537
@Component({
3638
selector: 'nz-list-item-action',
3739
exportAs: 'nzListItemAction',
3840
changeDetection: ChangeDetectionStrategy.OnPush,
39-
template: ` <ng-template><ng-content></ng-content></ng-template> `
41+
template: ` <ng-template><ng-content></ng-content></ng-template> `,
42+
standalone: true
4043
})
4144
export class NzListItemActionComponent {
4245
@ViewChild(TemplateRef) templateRef?: TemplateRef<void>;
@@ -55,7 +58,9 @@ export class NzListItemActionComponent {
5558
host: {
5659
class: 'ant-list-item-action'
5760
},
58-
providers: [NzDestroyService]
61+
providers: [NzDestroyService],
62+
imports: [NgForOf, NgTemplateOutlet, NgIf],
63+
standalone: true
5964
})
6065
export class NzListItemActionsComponent implements OnChanges {
6166
@Input() nzActions: Array<TemplateRef<void>> = [];

‎components/list/list-item-meta-cell.ts

+10-3
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6+
import { NgIf } from '@angular/common';
67
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
78

9+
import { NzAvatarModule } from 'ng-zorro-antd/avatar';
10+
811
@Component({
912
selector: 'nz-list-item-meta-title',
1013
exportAs: 'nzListItemMetaTitle',
@@ -13,7 +16,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
1316
<ng-content></ng-content>
1417
</h4>
1518
`,
16-
changeDetection: ChangeDetectionStrategy.OnPush
19+
changeDetection: ChangeDetectionStrategy.OnPush,
20+
standalone: true
1721
})
1822
export class NzListItemMetaTitleComponent {}
1923

@@ -25,7 +29,8 @@ export class NzListItemMetaTitleComponent {}
2529
<ng-content></ng-content>
2630
</div>
2731
`,
28-
changeDetection: ChangeDetectionStrategy.OnPush
32+
changeDetection: ChangeDetectionStrategy.OnPush,
33+
standalone: true
2934
})
3035
export class NzListItemMetaDescriptionComponent {}
3136

@@ -38,7 +43,9 @@ export class NzListItemMetaDescriptionComponent {}
3843
<ng-content *ngIf="!nzSrc"></ng-content>
3944
</div>
4045
`,
41-
changeDetection: ChangeDetectionStrategy.OnPush
46+
changeDetection: ChangeDetectionStrategy.OnPush,
47+
imports: [NzAvatarModule, NgIf],
48+
standalone: true
4249
})
4350
export class NzListItemMetaAvatarComponent {
4451
@Input() nzSrc?: string;

0 commit comments

Comments
 (0)