Skip to content

Commit d21f8a1

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:layout): support standalone component (#8245)
1 parent 6210fa0 commit d21f8a1

File tree

9 files changed

+48
-42
lines changed

9 files changed

+48
-42
lines changed

‎components/layout/content.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsul
1111
preserveWhitespaces: false,
1212
changeDetection: ChangeDetectionStrategy.OnPush,
1313
encapsulation: ViewEncapsulation.None,
14-
template: ` <ng-content></ng-content> `
14+
template: ` <ng-content></ng-content> `,
15+
standalone: true
1516
})
1617
export class NzContentComponent {
1718
constructor(private elementRef: ElementRef, private renderer: Renderer2) {

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ The first level navigation is inclined left near a logo, and the secondary menu
3232

3333
## Visualization rules
3434

35-
Style of a navigation should conform to the its level.
35+
Style of a navigation should conform to the its level.
3636

3737
- **Emphasis by colorblock**
3838

@@ -74,22 +74,22 @@ The first level navigation is inclined left near a logo, and the secondary menu
7474
</nz-layout>
7575
```
7676

77-
### nz-sider
77+
### nz-sider:standalone
7878

7979
The sidebar.
8080

81-
| Property | Description | Type | Default |
82-
| -------- | ----------- | ---- | ------- |
83-
| `[nzBreakpoint]` | breakpoints of the responsive layout | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | - |
84-
| `[nzCollapsedWidth]` | width of the collapsed sidebar, by setting to `0` a special `trigger` will appear | `number` | `64` |
85-
| `[nzCollapsible]` | whether can be collapsed | `boolean` | `false` |
86-
| `[nzCollapsed]` | the collapsed status can be double binding | `boolean` | `false` |
87-
| `[nzReverseArrow]` | reverse direction of arrow, for a sider that expands from the right | `boolean` | `false` |
88-
| `[nzTrigger]` | specify the customized `trigger`, set to `null` to hide the `trigger` | `string \| TemplateRef<void>` | - |
89-
| `[nzZeroTrigger]` | specify the customized trigger when `nzCollapsedWidth` setting to `0` | `TemplateRef<void>` | - |
90-
| `[nzWidth]` | width of the sidebar | `number \| string` | `200` |
91-
| `[nzTheme]` | color theme of the sidebar | `'light' \| 'dark'` | `dark` |
92-
| `(nzCollapsedChange)` | the callback function | `EventEmitter<boolean>` | - |
81+
| Property | Description | Type | Default |
82+
| --------------------- | --------------------------------------------------------------------------------- | ----------------------------------------------- | ------- |
83+
| `[nzBreakpoint]` | breakpoints of the responsive layout | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | - |
84+
| `[nzCollapsedWidth]` | width of the collapsed sidebar, by setting to `0` a special `trigger` will appear | `number` | `64` |
85+
| `[nzCollapsible]` | whether can be collapsed | `boolean` | `false` |
86+
| `[nzCollapsed]` | the collapsed status can be double binding | `boolean` | `false` |
87+
| `[nzReverseArrow]` | reverse direction of arrow, for a sider that expands from the right | `boolean` | `false` |
88+
| `[nzTrigger]` | specify the customized `trigger`, set to `null` to hide the `trigger` | `string \| TemplateRef<void>` | - |
89+
| `[nzZeroTrigger]` | specify the customized trigger when `nzCollapsedWidth` setting to `0` | `TemplateRef<void>` | - |
90+
| `[nzWidth]` | width of the sidebar | `number \| string` | `200` |
91+
| `[nzTheme]` | color theme of the sidebar | `'light' \| 'dark'` | `dark` |
92+
| `(nzCollapsedChange)` | the callback function | `EventEmitter<boolean>` | - |
9393

9494
#### breakpoint width
9595

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -75,22 +75,22 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
7575
</nz-layout>
7676
```
7777

78-
### nz-sider
78+
### nz-sider:standalone
7979

8080
侧边栏。
8181

82-
| 参数 | 说明 | 类型 | 默认值 |
83-
| --- | --- | --- | --- |
84-
| `[nzBreakpoint]` | 触发响应式布局的断点 | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | - |
85-
| `[nzCollapsedWidth]` | 收缩宽度，设置为 0 会出现特殊 `trigger` | `number` | `64` |
86-
| `[nzCollapsible]` | 是否可收起 | `boolean` | `false` |
87-
| `[nzCollapsed]` | 当前收起状态，可双向绑定 | `boolean` | `false` |
88-
| `[nzReverseArrow]` | 翻转折叠提示箭头的方向，当 `Sider` 在右边时可以使用 | `boolean` | `false` |
89-
| `[nzTrigger]` | 自定义 `trigger`，设置为 `null` 时隐藏 `trigger` | `TemplateRef<void>` | - |
90-
| `[nzZeroTrigger]` | 自定义 `nzCollapsedWidth` 为 0 时的 特殊`trigger` | `TemplateRef<void>` | - |
91-
| `[nzWidth]` | 宽度 | `number \| string` | `200` |
92-
| `[nzTheme]` | 主题颜色 | `'light' \| 'dark'` | `dark` |
93-
| `(nzCollapsedChange)` | 展开-收起时的回调函数 | `EventEmitter<boolean>` | - |
82+
| 参数 | 说明 | 类型 | 默认值 |
83+
| --------------------- | --------------------------------------------------- | ----------------------------------------------- | ------- |
84+
| `[nzBreakpoint]` | 触发响应式布局的断点 | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | - |
85+
| `[nzCollapsedWidth]` | 收缩宽度，设置为 0 会出现特殊 `trigger` | `number` | `64` |
86+
| `[nzCollapsible]` | 是否可收起 | `boolean` | `false` |
87+
| `[nzCollapsed]` | 当前收起状态，可双向绑定 | `boolean` | `false` |
88+
| `[nzReverseArrow]` | 翻转折叠提示箭头的方向，当 `Sider` 在右边时可以使用 | `boolean` | `false` |
89+
| `[nzTrigger]` | 自定义 `trigger`，设置为 `null` 时隐藏 `trigger` | `TemplateRef<void>` | - |
90+
| `[nzZeroTrigger]` | 自定义 `nzCollapsedWidth` 为 0 时的 特殊`trigger` | `TemplateRef<void>` | - |
91+
| `[nzWidth]` | 宽度 | `number \| string` | `200` |
92+
| `[nzTheme]` | 主题颜色 | `'light' \| 'dark'` | `dark` |
93+
| `(nzCollapsedChange)` | 展开-收起时的回调函数 | `EventEmitter<boolean>` | - |
9494

9595
#### breakpoint width
9696

‎components/layout/footer.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsul
1111
preserveWhitespaces: false,
1212
encapsulation: ViewEncapsulation.None,
1313
changeDetection: ChangeDetectionStrategy.OnPush,
14-
template: ` <ng-content></ng-content> `
14+
template: ` <ng-content></ng-content> `,
15+
standalone: true
1516
})
1617
export class NzFooterComponent {
1718
constructor(public elementRef: ElementRef, private renderer: Renderer2) {

‎components/layout/header.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsul
1111
changeDetection: ChangeDetectionStrategy.OnPush,
1212
encapsulation: ViewEncapsulation.None,
1313
preserveWhitespaces: false,
14-
template: ` <ng-content></ng-content> `
14+
template: ` <ng-content></ng-content> `,
15+
standalone: true
1516
})
1617
export class NzHeaderComponent {
1718
constructor(public elementRef: ElementRef, private renderer: Renderer2) {

‎components/layout/layout.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ import { NzSiderComponent } from './sider.component';
3030
class: 'ant-layout',
3131
'[class.ant-layout-rtl]': `dir === 'rtl'`,
3232
'[class.ant-layout-has-sider]': 'listOfNzSiderComponent.length > 0'
33-
}
33+
},
34+
standalone: true
3435
})
3536
export class NzLayoutComponent implements OnDestroy, OnInit {
3637
@ContentChildren(NzSiderComponent) listOfNzSiderComponent!: QueryList<NzSiderComponent>;

‎components/layout/layout.module.ts

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

12-
import { NzIconModule } from 'ng-zorro-antd/icon';
13-
148
import { NzContentComponent } from './content.component';
159
import { NzFooterComponent } from './footer.component';
1610
import { NzHeaderComponent } from './header.component';
@@ -19,15 +13,14 @@ import { NzSiderTriggerComponent } from './sider-trigger.component';
1913
import { NzSiderComponent } from './sider.component';
2014

2115
@NgModule({
22-
declarations: [
16+
imports: [
2317
NzLayoutComponent,
2418
NzHeaderComponent,
2519
NzContentComponent,
2620
NzFooterComponent,
2721
NzSiderComponent,
2822
NzSiderTriggerComponent
2923
],
30-
exports: [NzLayoutComponent, NzHeaderComponent, NzContentComponent, NzFooterComponent, NzSiderComponent],
31-
imports: [BidiModule, CommonModule, NzIconModule, LayoutModule, PlatformModule]
24+
exports: [NzLayoutComponent, NzHeaderComponent, NzContentComponent, NzFooterComponent, NzSiderComponent]
3225
})
3326
export class NzLayoutModule {}

‎components/layout/sider-trigger.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 { NgIf, NgTemplateOutlet } from '@angular/common';
67
import {
78
ChangeDetectionStrategy,
89
Component,
@@ -14,6 +15,7 @@ import {
1415
} from '@angular/core';
1516

1617
import { NzBreakpointKey } from 'ng-zorro-antd/core/services';
18+
import { NzIconModule } from 'ng-zorro-antd/icon';
1719

1820
@Component({
1921
selector: '[nz-sider-trigger]',
@@ -42,7 +44,9 @@ import { NzBreakpointKey } from 'ng-zorro-antd/core/services';
4244
'[class.ant-layout-sider-zero-width-trigger]': 'isZeroTrigger',
4345
'[class.ant-layout-sider-zero-width-trigger-right]': 'isZeroTrigger && nzReverseArrow',
4446
'[class.ant-layout-sider-zero-width-trigger-left]': 'isZeroTrigger && !nzReverseArrow'
45-
}
47+
},
48+
imports: [NgIf, NgTemplateOutlet, NzIconModule],
49+
standalone: true
4650
})
4751
export class NzSiderTriggerComponent implements OnChanges, OnInit {
4852
@Input() nzCollapsed = false;

‎components/layout/sider.component.ts

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

66
import { Platform } from '@angular/cdk/platform';
7+
import { NgIf } from '@angular/common';
78
import {
89
AfterContentInit,
910
ChangeDetectionStrategy,
@@ -28,6 +29,8 @@ import { BooleanInput } from 'ng-zorro-antd/core/types';
2829
import { InputBoolean, inNextTick, toCssPixel } from 'ng-zorro-antd/core/util';
2930
import { NzMenuDirective } from 'ng-zorro-antd/menu';
3031

32+
import { NzSiderTriggerComponent } from './sider-trigger.component';
33+
3134
@Component({
3235
selector: 'nz-sider',
3336
exportAs: 'nzSider',
@@ -63,7 +66,9 @@ import { NzMenuDirective } from 'ng-zorro-antd/menu';
6366
'[style.maxWidth]': 'widthSetting',
6467
'[style.minWidth]': 'widthSetting',
6568
'[style.width]': 'widthSetting'
66-
}
69+
},
70+
imports: [NgIf, NzSiderTriggerComponent],
71+
standalone: true
6772
})
6873
export class NzSiderComponent implements OnInit, OnDestroy, OnChanges, AfterContentInit {
6974
static ngAcceptInputType_nzReverseArrow: BooleanInput;

0 commit comments

Comments
 (0)