Skip to content

Commit 0902a4b

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:card): component support standalone (#8273)
* feat(module:card): support standalone component * feat(module:card): support standalone component
1 parent c5df26f commit 0902a4b

8 files changed

Lines changed: 81 additions & 69 deletions

‎components/card/card-grid.directive.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
1414
host: {
1515
class: 'ant-card-grid',
1616
'[class.ant-card-hoverable]': 'nzHoverable'
17-
}
17+
},
18+
standalone: true
1819
})
1920
export class NzCardGridDirective {
2021
static ngAcceptInputType_nzHoverable: BooleanInput;

‎components/card/card-loading.component.ts‎

Lines changed: 4 additions & 1 deletion
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 { NgClass, NgForOf } from '@angular/common';
67
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
78

89
@Component({
@@ -24,7 +25,9 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
2425
preserveWhitespaces: false,
2526
changeDetection: ChangeDetectionStrategy.OnPush,
2627
encapsulation: ViewEncapsulation.None,
27-
host: { class: 'ant-card-loading-content' }
28+
host: { class: 'ant-card-loading-content' },
29+
imports: [NgForOf, NgClass],
30+
standalone: true
2831
})
2932
export class NzCardLoadingComponent {
3033
listOfLoading: string[][] = [

‎components/card/card-meta.component.ts‎

Lines changed: 6 additions & 1 deletion
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, NgTemplateOutlet } from '@angular/common';
67
import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
78

9+
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
10+
811
@Component({
912
selector: 'nz-card-meta',
1013
exportAs: 'nzCardMeta',
@@ -24,7 +27,9 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
2427
</div>
2528
</div>
2629
`,
27-
host: { class: 'ant-card-meta' }
30+
host: { class: 'ant-card-meta' },
31+
imports: [NgIf, NgTemplateOutlet, NzOutletModule],
32+
standalone: true
2833
})
2934
export class NzCardMetaComponent {
3035
@Input() nzTitle: string | TemplateRef<void> | null = null;

‎components/card/card-tab.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, ViewEncapsu
1414
<ng-template>
1515
<ng-content></ng-content>
1616
</ng-template>
17-
`
17+
`,
18+
standalone: true
1819
})
1920
export class NzCardTabComponent {
2021
@ViewChild(TemplateRef, { static: true }) template!: TemplateRef<void>;

‎components/card/card.component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55

66
import { Direction, Directionality } from '@angular/cdk/bidi';
7+
import { NgForOf, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
78
import {
89
ChangeDetectionStrategy,
910
ChangeDetectorRef,
@@ -22,10 +23,12 @@ import { Subject } from 'rxjs';
2223
import { takeUntil } from 'rxjs/operators';
2324

2425
import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
26+
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
2527
import { BooleanInput, NgStyleInterface, NzSizeDSType } from 'ng-zorro-antd/core/types';
2628
import { InputBoolean } from 'ng-zorro-antd/core/util';
2729

2830
import { NzCardGridDirective } from './card-grid.directive';
31+
import { NzCardLoadingComponent } from './card-loading.component';
2932
import { NzCardTabComponent } from './card-tab.component';
3033

3134
const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
@@ -77,7 +80,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
7780
'[class.ant-card-type-inner]': 'nzType === "inner"',
7881
'[class.ant-card-contain-tabs]': '!!listOfNzCardTabComponent',
7982
'[class.ant-card-rtl]': `dir === 'rtl'`
80-
}
83+
},
84+
imports: [NgIf, NzOutletModule, NgTemplateOutlet, NgStyle, NzCardLoadingComponent, NgForOf],
85+
standalone: true
8186
})
8287
export class NzCardComponent implements OnDestroy, OnInit {
8388
readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

‎components/card/card.module.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,16 @@
44
*/
55

66
import { BidiModule } from '@angular/cdk/bidi';
7-
import { CommonModule } from '@angular/common';
87
import { NgModule } from '@angular/core';
98

10-
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
11-
129
import { NzCardGridDirective } from './card-grid.directive';
1310
import { NzCardLoadingComponent } from './card-loading.component';
1411
import { NzCardMetaComponent } from './card-meta.component';
1512
import { NzCardTabComponent } from './card-tab.component';
1613
import { NzCardComponent } from './card.component';
1714

1815
@NgModule({
19-
imports: [CommonModule, NzOutletModule],
20-
declarations: [NzCardComponent, NzCardGridDirective, NzCardMetaComponent, NzCardLoadingComponent, NzCardTabComponent],
16+
imports: [NzCardComponent, NzCardGridDirective, NzCardMetaComponent, NzCardLoadingComponent, NzCardTabComponent],
2117
exports: [
2218
BidiModule,
2319
NzCardComponent,

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

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -22,37 +22,37 @@ import { NzCardModule } from 'ng-zorro-antd/card';
2222
<nz-card nzTitle="card title">card content</nz-card>
2323
```
2424

25-
### nz-card
26-
27-
| Property | Description | Type | Default | Global Config |
28-
| -------- | ----------- | ---- | ------- | ------------- |
29-
| `[nzActions]` | The action list, shows at the bottom of the Card. | `Array<TemplateRef<void>>` | - |
30-
| `[nzBodyStyle]` | Inline style to apply to the card content | `{ [key: string]: string }` | - |
31-
| `[nzBorderless]` | Remove border around the card | `boolean` | `false` | ✅ |
32-
| `[nzCover]` | Card cover | `TemplateRef<void>` | - |
33-
| `[nzExtra]` | Content to render in the top-right corner of the card | `string\|TemplateRef<void>` | - |
34-
| `[nzHoverable]` | Lift up when hovering card | `boolean` | `false` | ✅ |
35-
| `[nzLoading]` | Shows a loading indicator while the contents of the card are being fetched | `boolean` | `false` |
36-
| `[nzTitle]` | Card title | `string\|TemplateRef<void>` | - |
37-
| `[nzType]` | Card style type, can be set to `inner` or not set | `'inner'` | - |
38-
| `[nzSize]` | Size of card | `'default'\|'small'` | `'default'` | ✅ |
39-
40-
41-
### nz-card-meta
42-
43-
| Property | Description | Type | Default |
44-
| -------- | ----------- | ---- | ------- |
45-
| `[nzAvatar]` | avatar or icon | `TemplateRef<void>` | - |
46-
| `[nzDescription]` | description content | `string\|TemplateRef<void>` | - |
47-
| `[nzTitle]` | title content | `string\|TemplateRef<void>` | - |
48-
49-
### [nz-card-grid]
50-
51-
| Property | Description | Type | Default | Global Config |
52-
| -------- | ----------- | ---- | ------- | ------------- |
53-
| `[nzHoverable]` | Lift up when hovering card | `boolean` | `true` | - |
25+
### nz-card:standalone
26+
27+
| Property | Description | Type | Default | Global Config |
28+
| ---------------- | -------------------------------------------------------------------------- | --------------------------- | ----------- | ------------- |
29+
| `[nzActions]` | The action list, shows at the bottom of the Card. | `Array<TemplateRef<void>>` | - |
30+
| `[nzBodyStyle]` | Inline style to apply to the card content | `{ [key: string]: string }` | - |
31+
| `[nzBorderless]` | Remove border around the card | `boolean` | `false` | ✅ |
32+
| `[nzCover]` | Card cover | `TemplateRef<void>` | - |
33+
| `[nzExtra]` | Content to render in the top-right corner of the card | `string\|TemplateRef<void>` | - |
34+
| `[nzHoverable]` | Lift up when hovering card | `boolean` | `false` | ✅ |
35+
| `[nzLoading]` | Shows a loading indicator while the contents of the card are being fetched | `boolean` | `false` |
36+
| `[nzTitle]` | Card title | `string\|TemplateRef<void>` | - |
37+
| `[nzType]` | Card style type, can be set to `inner` or not set | `'inner'` | - |
38+
| `[nzSize]` | Size of card | `'default'\|'small'` | `'default'` | ✅ |
39+
40+
### nz-card-meta:standalone
41+
42+
| Property | Description | Type | Default |
43+
| ----------------- | ------------------- | --------------------------- | ------- |
44+
| `[nzAvatar]` | avatar or icon | `TemplateRef<void>` | - |
45+
| `[nzDescription]` | description content | `string\|TemplateRef<void>` | - |
46+
| `[nzTitle]` | title content | `string\|TemplateRef<void>` | - |
47+
48+
### [nz-card-grid]:standalone
49+
50+
| Property | Description | Type | Default | Global Config |
51+
| --------------- | -------------------------- | --------- | ------- | ------------- |
52+
| `[nzHoverable]` | Lift up when hovering card | `boolean` | `true` | - |
5453

5554
Area for grid style card
5655

57-
### nz-card-tab
56+
### nz-card-tab:standalone
57+
5858
Area for tab card

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

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -23,36 +23,37 @@ import { NzCardModule } from 'ng-zorro-antd/card';
2323
<nz-card nzTitle="卡片标题">卡片内容</nz-card>
2424
```
2525

26-
### nz-card
27-
28-
| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
29-
| --- | --- | --- | --- | --- |
30-
| `[nzActions]` | 卡片操作组，位置在卡片底部 | `Array<TemplateRef<void>>` | - |
31-
| `[nzBodyStyle]` | 内容区域自定义样式 | `{ [key: string]: string }` | - |
32-
| `[nzBorderless]` | 是否移除边框 | `boolean` | `false` | ✅ |
33-
| `[nzCover]` | 卡片封面 | `TemplateRef<void>` | - |
34-
| `[nzExtra]` | 卡片右上角的操作区域 | `string\|TemplateRef<void>` | - |
35-
| `[nzHoverable]` | 鼠标移过时可浮起 | `boolean` | `false` | ✅ |
36-
| `[nzLoading]` | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | `boolean` | `false` |
37-
| `[nzTitle]` | 卡片标题 | `string\|TemplateRef<void>` | - |
38-
| `[nzType]` | 卡片类型，可设置为 `inner` 或 不设置 | `'inner'` | - |
39-
| `[nzSize]` | 卡片的尺寸 | `'default'\|'small'` | `'default'` | ✅ |
40-
41-
### nz-card-meta
42-
43-
| 参数 | 说明 | 类型 | 默认值 |
44-
| -------- | ----------- | ---- | ------- |
45-
| `[nzAvatar]` | 头像/图标 | `TemplateRef<void>` | - |
46-
| `[nzDescription]` | 描述内容 | `string \| TemplateRef<void>` | - |
47-
| `[nzTitle]` | 标题内容 | `string \| TemplateRef<void>` | - |
48-
49-
50-
### [nz-card-grid]
51-
| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
52-
| --- | --- | --- | --- | --- |
53-
| `[nzHoverable]` | 鼠标移过时可浮起 | `boolean` | `true` | - |
26+
### nz-card:standalone
27+
28+
| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
29+
| ---------------- | --------------------------------------------------- | --------------------------- | ----------- | ------------ |
30+
| `[nzActions]` | 卡片操作组，位置在卡片底部 | `Array<TemplateRef<void>>` | - |
31+
| `[nzBodyStyle]` | 内容区域自定义样式 | `{ [key: string]: string }` | - |
32+
| `[nzBorderless]` | 是否移除边框 | `boolean` | `false` | ✅ |
33+
| `[nzCover]` | 卡片封面 | `TemplateRef<void>` | - |
34+
| `[nzExtra]` | 卡片右上角的操作区域 | `string\|TemplateRef<void>` | - |
35+
| `[nzHoverable]` | 鼠标移过时可浮起 | `boolean` | `false` | ✅ |
36+
| `[nzLoading]` | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | `boolean` | `false` |
37+
| `[nzTitle]` | 卡片标题 | `string\|TemplateRef<void>` | - |
38+
| `[nzType]` | 卡片类型，可设置为 `inner` 或 不设置 | `'inner'` | - |
39+
| `[nzSize]` | 卡片的尺寸 | `'default'\|'small'` | `'default'` | ✅ |
40+
41+
### nz-card-meta:standalone
42+
43+
| 参数 | 说明 | 类型 | 默认值 |
44+
| ----------------- | --------- | ----------------------------- | ------ |
45+
| `[nzAvatar]` | 头像/图标 | `TemplateRef<void>` | - |
46+
| `[nzDescription]` | 描述内容 | `string \| TemplateRef<void>` | - |
47+
| `[nzTitle]` | 标题内容 | `string \| TemplateRef<void>` | - |
48+
49+
### [nz-card-grid]:standalone
50+
51+
| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
52+
| --------------- | ---------------- | --------- | ------ | ------------ |
53+
| `[nzHoverable]` | 鼠标移过时可浮起 | `boolean` | `true` | - |
5454

5555
分隔卡片内容区域
5656

57-
### nz-card-tab
57+
### nz-card-tab:standalone
58+
5859
分隔页签标题区域

0 commit comments

Comments
 (0)