Skip to content

Commit a2858d3

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:skeleton): support standalone component (#8220)
* feat(module:skeleton): support standalone component * feat(module:skeleton): support standalone component
1 parent 960144e commit a2858d3

5 files changed

Lines changed: 100 additions & 95 deletions

File tree

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

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -21,64 +21,62 @@ import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
2121

2222
## API
2323

24-
### nz-skeleton
25-
26-
| Property | Description | Type | Default |
27-
| --- | --- | --- | --- |
28-
| `[nzActive]` | Show animation effect | `boolean` | `false` |
29-
| `[nzAvatar]` | Show avatar placeholder | `boolean \| NzSkeletonAvatar` | `false` |
30-
| `[nzLoading]` | Display the skeleton when `true` | `boolean` | - |
31-
| `[nzParagraph]` | Show the paragraph placeholder | `boolean \| NzSkeletonParagraph` | `true` |
32-
| `[nzTitle]` | Show the title placeholder | `boolean \| NzSkeletonTitle` | `true` |
33-
| `[nzRound]` | Show the paragraph and the title radius when `true` | `boolean` | `false` |
24+
### nz-skeleton:standalone
3425

26+
| Property | Description | Type | Default |
27+
| --------------- | --------------------------------------------------- | -------------------------------- | ------- |
28+
| `[nzActive]` | Show animation effect | `boolean` | `false` |
29+
| `[nzAvatar]` | Show avatar placeholder | `boolean \| NzSkeletonAvatar` | `false` |
30+
| `[nzLoading]` | Display the skeleton when `true` | `boolean` | - |
31+
| `[nzParagraph]` | Show the paragraph placeholder | `boolean \| NzSkeletonParagraph` | `true` |
32+
| `[nzTitle]` | Show the title placeholder | `boolean \| NzSkeletonTitle` | `true` |
33+
| `[nzRound]` | Show the paragraph and the title radius when `true` | `boolean` | `false` |
3534

3635
### NzSkeletonAvatar
3736

38-
| Property | Description | Type | Default |
39-
| --- | --- | --- | --- |
40-
| `size` | Set the avatar size | `number |\ 'large' \| 'small' \| 'default'` | - |
41-
| `shape` | Set the avatar shape | `'circle' \| 'square'` | - |
37+
| Property | Description | Type | Default |
38+
| -------- | -------------------- | ------------------------------------------- | ------- |
39+
| `size` | Set the avatar size | `number \| 'large' \| 'small' \| 'default'` | - |
40+
| `shape` | Set the avatar shape | `'circle' \| 'square'` | - |
4241

4342
### NzSkeletonTitle
4443

45-
| Property | Description | Type | Default |
46-
| --- | --- | --- | --- |
47-
| `width` | Set the title width | `number \| string` | - |
44+
| Property | Description | Type | Default |
45+
| -------- | ------------------- | ------------------ | ------- |
46+
| `width` | Set the title width | `number \| string` | - |
4847

4948
### NzSkeletonParagraph
5049

51-
| Property | Description | Type | Default |
52-
| --- | --- | --- | --- |
53-
| `rows` | Set the row count of the paragraph | `number` | - |
54-
| `width` | Set the width of the paragraph. When width is an Array, it can set the width of each row. Otherwise, only set the last row width | `number \| string \| Array<number \| string>` | - |
50+
| Property | Description | Type | Default |
51+
| -------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ------- |
52+
| `rows` | Set the row count of the paragraph | `number` | - |
53+
| `width` | Set the width of the paragraph. When width is an Array, it can set the width of each row. Otherwise, only set the last row width | `number \| string \| Array<number \| string>` | - |
5554

56-
### nz-skeleton-element [nzType="button"]
55+
### nz-skeleton-element [nzType="button"]:standalone
5756

58-
| Property | Description | Type | Default |
59-
| --- | --- | --- | --- |
60-
| `[nzActive]` | Show animation effect | `boolean` | `false` |
61-
| `[nzSize]` | Set the size | `'large' \| 'small' \| 'default'` | `'default'` |
62-
| `[nzShape]` | Set the shape | `'circle' \| 'round' \| 'default'` | `'default'` |
57+
| Property | Description | Type | Default |
58+
| ------------ | --------------------- | ---------------------------------- | ----------- |
59+
| `[nzActive]` | Show animation effect | `boolean` | `false` |
60+
| `[nzSize]` | Set the size | `'large' \| 'small' \| 'default'` | `'default'` |
61+
| `[nzShape]` | Set the shape | `'circle' \| 'round' \| 'default'` | `'default'` |
6362

64-
### nz-skeleton-element [nzType="avatar"]
63+
### nz-skeleton-element [nzType="avatar"]:standalone
6564

66-
| Property | Description | Type | Default |
67-
| --- | --- | --- | --- |
68-
| `[nzActive]` | Show animation effect | `boolean` | `false` |
69-
| `[nzSize]` | Set the size | `number \| 'large' \| 'small' \| 'default'` | `'default'` |
70-
| `[nzShape]` | Set the shape | `'circle' \| 'square'` | `'square'` |
65+
| Property | Description | Type | Default |
66+
| ------------ | --------------------- | ------------------------------------------- | ----------- |
67+
| `[nzActive]` | Show animation effect | `boolean` | `false` |
68+
| `[nzSize]` | Set the size | `number \| 'large' \| 'small' \| 'default'` | `'default'` |
69+
| `[nzShape]` | Set the shape | `'circle' \| 'square'` | `'square'` |
7170

72-
### nz-skeleton-element [nzType="input"]
71+
### nz-skeleton-element [nzType="input"]:standalone
7372

74-
| Property | Description | Type | Default |
75-
| --- | --- | --- | --- |
76-
| `[nzActive]` | Show animation effect | `boolean` | `false` |
77-
| `[nzSize]` | Set the size | `'large' \| 'small' \| 'default'` | `'default'` |
73+
| Property | Description | Type | Default |
74+
| ------------ | --------------------- | --------------------------------- | ----------- |
75+
| `[nzActive]` | Show animation effect | `boolean` | `false` |
76+
| `[nzSize]` | Set the size | `'large' \| 'small' \| 'default'` | `'default'` |
7877

79-
### nz-skeleton-element [nzType="image"]
78+
### nz-skeleton-element [nzType="image"]:standalone
8079

81-
| Property | Description | Type | Default |
82-
| --- | --- | --- | --- |
80+
| Property | Description | Type | Default |
81+
| ------------ | --------------------- | --------- | ------- |
8382
| `[nzActive]` | Show animation effect | `boolean` | `false` |
84-

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

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -22,63 +22,62 @@ import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
2222

2323
## API
2424

25-
### nz-skeleton
25+
### nz-skeleton:standalone
2626

27-
| 属性 | 说明 | 类型 | 默认值 |
28-
| --- | --- | --- | --- |
29-
| `[nzActive]` | 是否展示动画效果 | `boolean` | `false` |
30-
| `[nzAvatar]` | 是否显示头像占位图 | `boolean \| NzSkeletonAvatar` | `false` |
31-
| `[nzLoading]` | 为 `true` 时，显示占位图。反之则直接展示子组件 | `boolean` | - |
32-
| `[nzParagraph]` | 是否显示段落占位图 | `boolean \| NzSkeletonParagraph` | `true` |
33-
| `[nzTitle]` | 是否显示标题占位图 | `boolean \| NzSkeletonTitle` | `true` |
34-
| `[nzRound]` | 为 `true` 时，段落和标题显示圆角 | `boolean` | `false` |
27+
| 属性 | 说明 | 类型 | 默认值 |
28+
| --------------- | ---------------------------------------------- | -------------------------------- | ------- |
29+
| `[nzActive]` | 是否展示动画效果 | `boolean` | `false` |
30+
| `[nzAvatar]` | 是否显示头像占位图 | `boolean \| NzSkeletonAvatar` | `false` |
31+
| `[nzLoading]` | 为 `true` 时，显示占位图。反之则直接展示子组件 | `boolean` | - |
32+
| `[nzParagraph]` | 是否显示段落占位图 | `boolean \| NzSkeletonParagraph` | `true` |
33+
| `[nzTitle]` | 是否显示标题占位图 | `boolean \| NzSkeletonTitle` | `true` |
34+
| `[nzRound]` | 为 `true` 时，段落和标题显示圆角 | `boolean` | `false` |
3535

3636
### NzSkeletonAvatar
3737

38-
| 属性 | 说明 | 类型 | 默认值 |
39-
| --- | --- | --- | --- |
40-
| `size` | 设置头像占位图的大小 | `number \| 'large' \| 'small' \| 'default'` | - |
41-
| `shape` | 指定头像的形状 | `'circle' \| 'square'` | - |
38+
| 属性 | 说明 | 类型 | 默认值 |
39+
| ------- | -------------------- | ------------------------------------------- | ------ |
40+
| `size` | 设置头像占位图的大小 | `number \| 'large' \| 'small' \| 'default'` | - |
41+
| `shape` | 指定头像的形状 | `'circle' \| 'square'` | - |
4242

4343
### NzSkeletonTitle
4444

45-
| 属性 | 说明 | 类型 | 默认值 |
46-
| --- | --- | --- | --- |
47-
| `width` | 设置标题占位图的宽度 | `number \| string` | - |
45+
| 属性 | 说明 | 类型 | 默认值 |
46+
| ------- | -------------------- | ------------------ | ------ |
47+
| `width` | 设置标题占位图的宽度 | `number \| string` | - |
4848

4949
### NzSkeletonParagraph
5050

51-
| 属性 | 说明 | 类型 | 默认值 |
52-
| --- | --- | --- | --- |
53-
| `rows` | 设置段落占位图的行数 | `number` | - |
54-
| `width` | 设置标题占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | `number \| string \| Array<number \| string>` | - |
51+
| 属性 | 说明 | 类型 | 默认值 |
52+
| ------- | -------------------------------------------------------------------------- | --------------------------------------------- | ------ |
53+
| `rows` | 设置段落占位图的行数 | `number` | - |
54+
| `width` | 设置标题占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | `number \| string \| Array<number \| string>` | - |
5555

56+
### nz-skeleton-element [nzType="button"]:standalone
5657

57-
### nz-skeleton-element [nzType="button"]
58+
| 属性 | 说明 | 类型 | 默认值 |
59+
| ------------ | ---------------- | ---------------------------------- | ----------- |
60+
| `[nzActive]` | 是否展示动画效果 | `boolean` | `false` |
61+
| `[nzSize]` | 大小 | `'large' \| 'small' \| 'default'` | `'default'` |
62+
| `[nzShape]` | 形状 | `'circle' \| 'round' \| 'default'` | `'default'` |
5863

59-
| 属性 | 说明 | 类型 | 默认值 |
60-
| --- | --- | --- | --- |
61-
| `[nzActive]` | 是否展示动画效果 | `boolean` | `false` |
62-
| `[nzSize]` | 大小 | `'large' \| 'small' \| 'default'` | `'default'` |
63-
| `[nzShape]` | 形状 | `'circle' \| 'round' \| 'default'` | `'default'` |
64+
### nz-skeleton-element [nzType="avatar"]:standalone
6465

65-
### nz-skeleton-element [nzType="avatar"]
66+
| 属性 | 说明 | 类型 | 默认值 |
67+
| ------------ | ---------------- | ------------------------------------------- | ----------- |
68+
| `[nzActive]` | 是否展示动画效果 | `boolean` | `false` |
69+
| `[nzSize]` | 大小 | `number \| 'large' \| 'small' \| 'default'` | `'default'` |
70+
| `[nzShape]` | 形状 | `'circle' \| 'square'` | `'square'` |
6671

67-
| 属性 | 说明 | 类型 | 默认值 |
68-
| --- | --- | --- | --- |
69-
| `[nzActive]` | 是否展示动画效果 | `boolean` | `false` |
70-
| `[nzSize]` | 大小 | `number \| 'large' \| 'small' \| 'default'` | `'default'` |
71-
| `[nzShape]` | 形状 | `'circle' \| 'square'` | `'square'` |
72+
### nz-skeleton-element [nzType="input"]:standalone
7273

73-
### nz-skeleton-element [nzType="input"]
74-
75-
| 属性 | 说明 | 类型 | 默认值 |
76-
| --- | --- | --- | --- |
77-
| `[nzActive]` | 是否展示动画效果 | `boolean` | `false` |
78-
| `[nzSize]` | 大小 | `'large' \| 'small' \| 'default'` | `'default'` |
74+
| 属性 | 说明 | 类型 | 默认值 |
75+
| ------------ | ---------------- | --------------------------------- | ----------- |
76+
| `[nzActive]` | 是否展示动画效果 | `boolean` | `false` |
77+
| `[nzSize]` | 大小 | `'large' \| 'small' \| 'default'` | `'default'` |
7978

80-
### nz-skeleton-element [nzType="image"]
79+
### nz-skeleton-element [nzType="image"]:standalone
8180

82-
| 属性 | 说明 | 类型 | 默认值 |
83-
| --- | --- | --- | --- |
81+
| 属性 | 说明 | 类型 | 默认值 |
82+
| ------------ | ---------------- | --------- | ------- |
8483
| `[nzActive]` | 是否展示动画效果 | `boolean` | `false` |

‎components/skeleton/skeleton-element.component.ts‎

Lines changed: 12 additions & 5 deletions
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 { NgStyle } from '@angular/common';
67
import { ChangeDetectionStrategy, Component, Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
78

89
import { InputBoolean } from 'ng-zorro-antd/core/util';
@@ -21,7 +22,8 @@ import {
2122
class: 'ant-skeleton ant-skeleton-element',
2223
'[class.ant-skeleton-active]': 'nzActive',
2324
'[class.ant-skeleton-block]': 'nzBlock'
24-
}
25+
},
26+
standalone: true
2527
})
2628
export class NzSkeletonElementDirective {
2729
@Input() nzActive: boolean = false;
@@ -42,7 +44,8 @@ export class NzSkeletonElementDirective {
4244
[class.ant-skeleton-button-lg]="nzSize === 'large'"
4345
[class.ant-skeleton-button-sm]="nzSize === 'small'"
4446
></span>
45-
`
47+
`,
48+
standalone: true
4649
})
4750
export class NzSkeletonElementButtonComponent {
4851
@Input() nzShape: NzSkeletonButtonShape = 'default';
@@ -61,7 +64,9 @@ export class NzSkeletonElementButtonComponent {
6164
[class.ant-skeleton-avatar-sm]="nzSize === 'small'"
6265
[ngStyle]="styleMap"
6366
></span>
64-
`
67+
`,
68+
imports: [NgStyle],
69+
standalone: true
6570
})
6671
export class NzSkeletonElementAvatarComponent implements OnChanges {
6772
@Input() nzShape: NzSkeletonAvatarShape = 'circle';
@@ -88,7 +93,8 @@ export class NzSkeletonElementAvatarComponent implements OnChanges {
8893
[class.ant-skeleton-input-lg]="nzSize === 'large'"
8994
[class.ant-skeleton-input-sm]="nzSize === 'small'"
9095
></span>
91-
`
96+
`,
97+
standalone: true
9298
})
9399
export class NzSkeletonElementInputComponent {
94100
@Input() nzSize: NzSkeletonInputSize = 'default';
@@ -106,6 +112,7 @@ export class NzSkeletonElementInputComponent {
106112
/>
107113
</svg>
108114
</span>
109-
`
115+
`,
116+
standalone: true
110117
})
111118
export class NzSkeletonElementImageComponent {}

‎components/skeleton/skeleton.component.ts‎

Lines changed: 5 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 { NgForOf, NgIf } from '@angular/common';
67
import {
78
ChangeDetectionStrategy,
89
ChangeDetectorRef,
@@ -16,6 +17,7 @@ import {
1617

1718
import { toCssPixel } from 'ng-zorro-antd/core/util';
1819

20+
import { NzSkeletonElementAvatarComponent, NzSkeletonElementDirective } from './skeleton-element.component';
1921
import {
2022
NzSkeletonAvatar,
2123
NzSkeletonAvatarShape,
@@ -54,7 +56,9 @@ import {
5456
<ng-container *ngIf="!nzLoading">
5557
<ng-content></ng-content>
5658
</ng-container>
57-
`
59+
`,
60+
imports: [NzSkeletonElementDirective, NzSkeletonElementAvatarComponent, NgIf, NgForOf],
61+
standalone: true
5862
})
5963
export class NzSkeletonComponent implements OnInit, OnChanges {
6064
@Input() nzActive = false;

‎components/skeleton/skeleton.module.ts‎

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

6-
import { BidiModule } from '@angular/cdk/bidi';
7-
import { CommonModule } from '@angular/common';
86
import { NgModule } from '@angular/core';
97

108
import {
@@ -17,18 +15,17 @@ import {
1715
import { NzSkeletonComponent } from './skeleton.component';
1816

1917
@NgModule({
20-
declarations: [
21-
NzSkeletonComponent,
18+
imports: [
2219
NzSkeletonElementDirective,
20+
NzSkeletonComponent,
2321
NzSkeletonElementButtonComponent,
2422
NzSkeletonElementAvatarComponent,
2523
NzSkeletonElementImageComponent,
2624
NzSkeletonElementInputComponent
2725
],
28-
imports: [BidiModule, CommonModule],
2926
exports: [
30-
NzSkeletonComponent,
3127
NzSkeletonElementDirective,
28+
NzSkeletonComponent,
3229
NzSkeletonElementButtonComponent,
3330
NzSkeletonElementAvatarComponent,
3431
NzSkeletonElementImageComponent,

0 commit comments

Comments
 (0)