Skip to content

Commit b7c6859

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:timeline): support standalone component (#8210)
1 parent 319381a commit b7c6859

5 files changed

Lines changed: 43 additions & 39 deletions

File tree

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,24 +27,24 @@ import { NzTimelineModule } from 'ng-zorro-antd/timeline';
2727
</nz-timeline>
2828
```
2929

30-
### nz-timeline
30+
### nz-timeline:standalone
3131

3232
Timeline
3333

34-
| Property | Description | Type | Default |
35-
| -------- | ----------- | ---- | ------- |
36-
| `[nzPending]` | Set the last ghost node's existence or its content | `string\|boolean\|TemplateRef<void>` | `false` |
37-
| `[nzPendingDot]` | Set the dot of the last ghost node when pending is true | `string\|TemplateRef<void>` | `<span nz-icon nzType="loading"></span>` |
38-
| `[nzReverse]` | Reverse nodes or not | `boolean` | `false` |
39-
| `[nzMode]` | By sending `alternate` the timeline will distribute the nodes to the left and right | `'left' \| 'alternate' \| 'right' \| 'custom'` | - |
34+
| Property | Description | Type | Default |
35+
| ---------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------- |
36+
| `[nzPending]` | Set the last ghost node's existence or its content | `string\|boolean\|TemplateRef<void>` | `false` |
37+
| `[nzPendingDot]` | Set the dot of the last ghost node when pending is true | `string\|TemplateRef<void>` | `<span nz-icon nzType="loading"></span>` |
38+
| `[nzReverse]` | Reverse nodes or not | `boolean` | `false` |
39+
| `[nzMode]` | By sending `alternate` the timeline will distribute the nodes to the left and right | `'left' \| 'alternate' \| 'right' \| 'custom'` | - |
4040

41-
### nz-timeline-item
41+
### nz-timeline-item:standalone
4242

4343
Node of timeline
4444

45-
| Property | Description | Type | Default |
46-
| -------- | ----------- | ---- | ------- |
47-
| `[nzColor]` | Set the circle's color to `'blue' \| 'red' \| 'green' \| 'gray'`| `string` | `blue` |
48-
| `[nzDot]` | Customize timeline dot | `string \| TemplateRef<void>` | - |
49-
| `[nzPosition]` | Customize position, only works when `nzMode` is `custom` | `'left' \| 'right'` | - |
50-
| `[nzLabel]` | Set the label | `string \| TemplateRef<void>` | - |
45+
| Property | Description | Type | Default |
46+
| -------------- | ---------------------------------------------------------------- | ----------------------------- | ------- |
47+
| `[nzColor]` | Set the circle's color to `'blue' \| 'red' \| 'green' \| 'gray'` | `string` | `blue` |
48+
| `[nzDot]` | Customize timeline dot | `string \| TemplateRef<void>` | - |
49+
| `[nzPosition]` | Customize position, only works when `nzMode` is `custom` | `'left' \| 'right'` | - |
50+
| `[nzLabel]` | Set the label | `string \| TemplateRef<void>` | - |

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,24 @@ import { NzTimelineModule } from 'ng-zorro-antd/timeline';
2828
</nz-timeline>
2929
```
3030

31-
### nz-timeline
31+
### nz-timeline:standalone
3232

3333
时间轴。
3434

35-
| 参数 | 说明 | 类型 | 默认值 |
36-
| --- | --- | --- | --- |
37-
| `[nzPending]` | 指定最后一个幽灵节点是否存在或内容 | `string \| boolean \| TemplateRef<void>` | `false` |
38-
| `[nzPendingDot]` | 当最后一个幽灵节点存在時，指定其时间图点 | `string \| TemplateRef<void>` | `<span nz-icon nzType="loading"></span>` |
39-
| `[nzReverse]` | 节点排序 | `boolean` | `false` |
40-
| `[nzMode]` | 可以改变时间轴和内容的相对位置 | `'left' \| 'alternate' \| 'right' \| 'custom'` | - |
35+
| 参数 | 说明 | 类型 | 默认值 |
36+
| ---------------- | ---------------------------------------- | ---------------------------------------------- | ---------------------------------------- |
37+
| `[nzPending]` | 指定最后一个幽灵节点是否存在或内容 | `string \| boolean \| TemplateRef<void>` | `false` |
38+
| `[nzPendingDot]` | 当最后一个幽灵节点存在時，指定其时间图点 | `string \| TemplateRef<void>` | `<span nz-icon nzType="loading"></span>` |
39+
| `[nzReverse]` | 节点排序 | `boolean` | `false` |
40+
| `[nzMode]` | 可以改变时间轴和内容的相对位置 | `'left' \| 'alternate' \| 'right' \| 'custom'` | - |
4141

42-
### nz-timeline-item
42+
### nz-timeline-item:standalone
4343

4444
时间轴的每一个节点。
4545

46-
| 参数 | 说明 | 类型 | 默认值 |
47-
| --- | --- | --- | --- |
48-
| `[nzColor]` | 指定圆圈颜色 `'blue' \| 'red' \| 'green' \| 'gray'` | `string` | blue |
49-
| `[nzDot]` | 自定义时间轴点 | `string \| TemplateRef<void>` | - |
50-
| `[nzPosition]` | 自定义节点位置，仅当 `nzMode` 为 `custom` 时有效 | `'left' \| 'right'` | - |
51-
| `[nzLabel]` | 设置标签 | `string \| TemplateRef<void>` | - |
46+
| 参数 | 说明 | 类型 | 默认值 |
47+
| -------------- | --------------------------------------------------- | ----------------------------- | ------ |
48+
| `[nzColor]` | 指定圆圈颜色 `'blue' \| 'red' \| 'green' \| 'gray'` | `string` | blue |
49+
| `[nzDot]` | 自定义时间轴点 | `string \| TemplateRef<void>` | - |
50+
| `[nzPosition]` | 自定义节点位置，仅当 `nzMode` 为 `custom` 时有效 | `'left' \| 'right'` | - |
51+
| `[nzLabel]` | 设置标签 | `string \| TemplateRef<void>` | - |

‎components/timeline/timeline-item.component.ts‎

Lines changed: 6 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 { NgIf } from '@angular/common';
67
import {
78
ChangeDetectionStrategy,
89
ChangeDetectorRef,
@@ -15,6 +16,8 @@ import {
1516
ViewEncapsulation
1617
} from '@angular/core';
1718

19+
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
20+
1821
import { TimelineService } from './timeline.service';
1922
import { NzTimelineItemColor, NzTimelinePosition, TimelineTimeDefaultColors } from './typings';
2023

@@ -56,7 +59,9 @@ function isDefaultColor(color?: string): boolean {
5659
</div>
5760
</li>
5861
</ng-template>
59-
`
62+
`,
63+
imports: [NgIf, NzOutletModule],
64+
standalone: true
6065
})
6166
export class NzTimelineItemComponent implements OnChanges {
6267
@ViewChild('template', { static: false }) template!: TemplateRef<void>;

‎components/timeline/timeline.component.ts‎

Lines changed: 7 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, NgTemplateOutlet } from '@angular/common';
78
import {
89
AfterContentInit,
910
ChangeDetectionStrategy,
@@ -24,6 +25,9 @@ import {
2425
import { Subject } from 'rxjs';
2526
import { takeUntil } from 'rxjs/operators';
2627

28+
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
29+
import { NzIconModule } from 'ng-zorro-antd/icon';
30+
2731
import { NzTimelineItemComponent } from './timeline-item.component';
2832
import { TimelineService } from './timeline.service';
2933
import { NzTimelineMode, NzTimelinePosition } from './typings';
@@ -72,7 +76,9 @@ import { NzTimelineMode, NzTimelinePosition } from './typings';
7276
</ng-template>
7377
<!-- Grasp items -->
7478
<ng-content></ng-content>
75-
`
79+
`,
80+
imports: [NgIf, NgTemplateOutlet, NgForOf, NzOutletModule, NzIconModule],
81+
standalone: true
7682
})
7783
export class NzTimelineComponent implements AfterContentInit, OnChanges, OnDestroy, OnInit {
7884
@ContentChildren(NzTimelineItemComponent) listOfItems!: QueryList<NzTimelineItemComponent>;

‎components/timeline/timeline.module.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,13 @@
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 { PlatformModule } from '@angular/cdk/platform';
8-
import { CommonModule } from '@angular/common';
96
import { NgModule } from '@angular/core';
107

11-
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
12-
import { NzIconModule } from 'ng-zorro-antd/icon';
13-
148
import { NzTimelineItemComponent } from './timeline-item.component';
159
import { NzTimelineComponent } from './timeline.component';
1610

1711
@NgModule({
18-
declarations: [NzTimelineItemComponent, NzTimelineComponent],
19-
exports: [NzTimelineItemComponent, NzTimelineComponent],
20-
imports: [BidiModule, CommonModule, PlatformModule, NzIconModule, NzOutletModule]
12+
imports: [NzTimelineItemComponent, NzTimelineComponent],
13+
exports: [NzTimelineItemComponent, NzTimelineComponent]
2114
})
2215
export class NzTimelineModule {}

0 commit comments

Comments
 (0)