Skip to content

Commit c5df26f

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:dropdown): support standalone component #8254 (#8255)
* feat(module:dropdown): support standalone component * feat(module:dropdown): support standalone component
1 parent 1491fb3 commit c5df26f

File tree

8 files changed

+64
-64
lines changed

8 files changed

+64
-64
lines changed

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

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,27 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
1717

1818
## API
1919

20-
### [nz-dropdown]
21-
22-
| Property | Description | Type | Default |
23-
| -------- | ----------- | ---- | ------- |
24-
| `[nzDropdownMenu]` | Dropdown menu | `NzDropdownMenuComponent` | - |
25-
| `[nzDisabled]` | whether the dropdown menu is disabled | `boolean` | - |
26-
| `[nzPlacement]` | placement of pop menu | `'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'` | `'bottomLeft'` |
27-
| `[nzTrigger]` | the trigger mode which executes the drop-down action | `'click' \| 'hover'` | `'hover'` |
28-
| `[nzClickHide]` | whether hide menu when click | `boolean` | `true` |
29-
| `[nzVisible]` | whether the dropdown menu is visible, double binding | `boolean` | - |
30-
| `[nzOverlayClassName]` | Class name of the dropdown root element | `string` | - |
31-
| `[nzOverlayStyle]` | Style of the dropdown root element | `object` | - |
32-
| `(nzVisibleChange)` | a callback function takes an argument: `nzVisible`, is executed when the visible state is changed | `EventEmitter<boolean>` | - |
20+
### [nz-dropdown]:standalone
21+
22+
| Property | Description | Type | Default |
23+
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | -------------- |
24+
| `[nzDropdownMenu]` | Dropdown menu | `NzDropdownMenuComponent` | - |
25+
| `[nzDisabled]` | whether the dropdown menu is disabled | `boolean` | - |
26+
| `[nzPlacement]` | placement of pop menu | `'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'` | `'bottomLeft'` |
27+
| `[nzTrigger]` | the trigger mode which executes the drop-down action | `'click' \| 'hover'` | `'hover'` |
28+
| `[nzClickHide]` | whether hide menu when click | `boolean` | `true` |
29+
| `[nzVisible]` | whether the dropdown menu is visible, double binding | `boolean` | - |
30+
| `[nzOverlayClassName]` | Class name of the dropdown root element | `string` | - |
31+
| `[nzOverlayStyle]` | Style of the dropdown root element | `object` | - |
32+
| `(nzVisibleChange)` | a callback function takes an argument: `nzVisible`, is executed when the visible state is changed | `EventEmitter<boolean>` | - |
3333

3434
You should use [nz-menu](/components/menu/en) in `nz-dropdown`. The menu items and dividers are also available by using `nz-menu-item` and `nz-menu-divider`.
3535

3636
> Note: `[nz-menu]` of `nz-dropdown` is unselectable by default, you can make it selectable via `<ul nz-menu nzSelectable>`.
3737
>
3838
> The `nzMode` of `[nz-menu]` inside `nz-dropdown-menu` can only be the default value `vertical`.
3939
40-
### nz-dropdown-menu
40+
### nz-dropdown-menu:standalone
4141

4242
Wrap Dropdown Menu and pass to `[nz-dropdown]` and `NzContextMenuService`, you can export it via Template Syntax `nzDropdownMenu`
4343

@@ -58,7 +58,7 @@ Wrap Dropdown Menu and pass to `[nz-dropdown]` and `NzContextMenuService`, you c
5858

5959
Create dropdown with contextmenu, the detail can be found in the example above
6060

61-
| Property | Description | Arguments | Return Value |
62-
| --- | --- | --- | --- |
63-
| create | create dropdown | `($event:MouseEvent \| {x:number, y:number}, menu:NzDropdownMenuComponent)` | `EmbeddedViewRef<any>` |
64-
| close | close dropdown | - | - |
61+
| Property | Description | Arguments | Return Value |
62+
| -------- | --------------- | --------------------------------------------------------------------------- | ---------------------- |
63+
| create | create dropdown | `($event:MouseEvent \| {x:number, y:number}, menu:NzDropdownMenuComponent)` | `EmbeddedViewRef<any>` |
64+
| close | close dropdown | - | - |

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

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,27 +18,27 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
1818

1919
## API
2020

21-
### [nz-dropdown]
22-
23-
| 参数 | 说明 | 类型 | 默认值 |
24-
| --- | --- | --- | --- |
25-
| `[nzDropdownMenu]` | Dropdown 下拉菜单组件 | `NzDropdownMenuComponent` | - |
26-
| `[nzDisabled]` | 菜单是否禁用 | `boolean` | - |
27-
| `[nzPlacement]` | 菜单弹出位置 | `'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'` | `'bottomLeft'` |
28-
| `[nzTrigger]` | 触发下拉的行为 | `'click' \| 'hover'` | `'hover'` |
29-
| `[nzClickHide]` | 点击后是否隐藏菜单 | `boolean` | `true` |
30-
| `[nzVisible]` | 菜单是否显示，可双向绑定 | `boolean` | - |
31-
| `[nzOverlayClassName]` | 下拉根元素的类名称 | `string` | - |
32-
| `[nzOverlayStyle]` | 下拉根元素的样式 | `object` | - |
33-
| `(nzVisibleChange)` | 菜单显示状态改变时调用，参数为 nzVisible | `EventEmitter<boolean>` | - |
21+
### [nz-dropdown]:standalone
22+
23+
| 参数 | 说明 | 类型 | 默认值 |
24+
| ---------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------- | -------------- |
25+
| `[nzDropdownMenu]` | Dropdown 下拉菜单组件 | `NzDropdownMenuComponent` | - |
26+
| `[nzDisabled]` | 菜单是否禁用 | `boolean` | - |
27+
| `[nzPlacement]` | 菜单弹出位置 | `'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'` | `'bottomLeft'` |
28+
| `[nzTrigger]` | 触发下拉的行为 | `'click' \| 'hover'` | `'hover'` |
29+
| `[nzClickHide]` | 点击后是否隐藏菜单 | `boolean` | `true` |
30+
| `[nzVisible]` | 菜单是否显示，可双向绑定 | `boolean` | - |
31+
| `[nzOverlayClassName]` | 下拉根元素的类名称 | `string` | - |
32+
| `[nzOverlayStyle]` | 下拉根元素的样式 | `object` | - |
33+
| `(nzVisibleChange)` | 菜单显示状态改变时调用，参数为 nzVisible | `EventEmitter<boolean>` | - |
3434

3535
菜单使用 [nz-menu](/components/menu/zh)，还包括菜单项 `[nz-menu-item]`，分割线 `[nz-menu-divider]`。
3636

3737
> 注意：`nz-dropdown` 下的 `[nz-menu]` 默认不可选中。如果需要菜单可选中，可以指定 `<ul nz-menu nzSelectable>`.
3838
>
3939
> `nz-dropdown-menu` 内 `[nz-menu]` 的 `nzMode` 只可以是默认值 `vertical`。
4040
41-
### nz-dropdown-menu
41+
### nz-dropdown-menu:standalone
4242

4343
用于包裹菜单项，可以通过 `nzDropdownMenu` 模板变量导出后传入 `[nz-dropdown]` 和 `NzContextMenuService`。
4444

@@ -59,7 +59,7 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
5959

6060
用于右键弹出下拉菜单，具体参见示例
6161

62-
| 方法/属性 | 说明 | 参数 | 返回 |
63-
| --- | --- | --- | --- |
64-
| create | 创建右键菜单 | `($event:MouseEvent \| {x:number, y:number}, menu:NzDropdownMenuComponent)` | `EmbeddedViewRef<any>` |
65-
| close | 关闭右键菜单 | - | - |
62+
| 方法/属性 | 说明 | 参数 | 返回 |
63+
| --------- | ------------ | --------------------------------------------------------------------------- | ---------------------- |
64+
| create | 创建右键菜单 | `($event:MouseEvent \| {x:number, y:number}, menu:NzDropdownMenuComponent)` | `EmbeddedViewRef<any>` |
65+
| close | 关闭右键菜单 | - | - |

‎components/dropdown/dropdown-a.directive.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { Directive } from '@angular/core';
99
selector: 'a[nz-dropdown]',
1010
host: {
1111
class: 'ant-dropdown-link'
12-
}
12+
},
13+
standalone: true
1314
})
1415
export class NzDropDownADirective {
1516
constructor() {}

‎components/dropdown/dropdown-button.directive.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import { AfterViewInit, Directive, ElementRef, Host, Optional, Renderer2 } from
88
import { NzButtonGroupComponent } from 'ng-zorro-antd/button';
99

1010
@Directive({
11-
selector: '[nz-button][nz-dropdown]'
11+
selector: '[nz-button][nz-dropdown]',
12+
standalone: true
1213
})
1314
export class NzDropdownButtonDirective implements AfterViewInit {
1415
constructor(

‎components/dropdown/dropdown-menu.component.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
import { AnimationEvent } from '@angular/animations';
77
import { Direction, Directionality } from '@angular/cdk/bidi';
8+
import { NgClass, NgStyle } from '@angular/common';
89
import {
910
AfterContentInit,
1011
ChangeDetectionStrategy,
@@ -26,7 +27,7 @@ import { BehaviorSubject, Subject } from 'rxjs';
2627
import { takeUntil } from 'rxjs/operators';
2728

2829
import { slideMotion } from 'ng-zorro-antd/core/animation';
29-
import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
30+
import { NzNoAnimationDirective, NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
3031
import { IndexableObject, NzSafeAny } from 'ng-zorro-antd/core/types';
3132
import { MenuService, NzIsMenuInsideDropDownToken } from 'ng-zorro-antd/menu';
3233

@@ -64,7 +65,9 @@ export type NzPlacementType = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 't
6465
`,
6566
preserveWhitespaces: false,
6667
encapsulation: ViewEncapsulation.None,
67-
changeDetection: ChangeDetectionStrategy.OnPush
68+
changeDetection: ChangeDetectionStrategy.OnPush,
69+
imports: [NgClass, NgStyle, NzNoAnimationModule],
70+
standalone: true
6871
})
6972
export class NzDropdownMenuComponent implements AfterContentInit, OnDestroy, OnInit {
7073
mouseState$ = new BehaviorSubject<boolean>(false);

‎components/dropdown/dropdown.directive.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ const listOfPositions = [
4444
exportAs: 'nzDropdown',
4545
host: {
4646
class: 'ant-dropdown-trigger'
47-
}
47+
},
48+
standalone: true
4849
})
4950
export class NzDropDownDirective implements AfterViewInit, OnDestroy, OnChanges {
5051
readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

‎components/dropdown/dropdown.module.ts

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

12-
import { NzButtonModule } from 'ng-zorro-antd/button';
13-
import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
14-
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
15-
import { NzOverlayModule } from 'ng-zorro-antd/core/overlay';
16-
import { NzIconModule } from 'ng-zorro-antd/icon';
178
import { NzMenuModule } from 'ng-zorro-antd/menu';
189

1910
import { NzContextMenuServiceModule } from './context-menu.service.module';
@@ -24,19 +15,12 @@ import { NzDropDownDirective } from './dropdown.directive';
2415

2516
@NgModule({
2617
imports: [
27-
BidiModule,
28-
CommonModule,
29-
OverlayModule,
30-
NzButtonModule,
31-
NzMenuModule,
32-
NzIconModule,
33-
NzNoAnimationModule,
34-
PlatformModule,
35-
NzOverlayModule,
36-
NzContextMenuServiceModule,
37-
NzOutletModule
18+
NzDropDownDirective,
19+
NzDropDownADirective,
20+
NzDropdownMenuComponent,
21+
NzDropdownButtonDirective,
22+
NzContextMenuServiceModule
3823
],
39-
declarations: [NzDropDownDirective, NzDropDownADirective, NzDropdownMenuComponent, NzDropdownButtonDirective],
4024
exports: [NzMenuModule, NzDropDownDirective, NzDropDownADirective, NzDropdownMenuComponent, NzDropdownButtonDirective]
4125
})
4226
export class NzDropDownModule {}

‎components/tabs/tab-nav-operation.component.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ import {
1919

2020
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
2121
import { NzSafeAny } from 'ng-zorro-antd/core/types';
22-
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
22+
import { NzDropDownDirective, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
2323
import { NzIconModule } from 'ng-zorro-antd/icon';
24+
import { NzMenuModule } from 'ng-zorro-antd/menu';
2425

2526
import { NzTabAddButtonComponent } from './tab-add-button.component';
2627
import { NzTabNavItemDirective } from './tab-nav-item.directive';
@@ -72,7 +73,16 @@ import { NzTabNavItemDirective } from './tab-nav-item.directive';
7273
class: 'ant-tabs-nav-operations',
7374
'[class.ant-tabs-nav-operations-hidden]': 'items.length === 0'
7475
},
75-
imports: [NzDropDownModule, NzIconModule, NgIf, NgForOf, NzOutletModule, NzTabAddButtonComponent],
76+
imports: [
77+
NzIconModule,
78+
NgIf,
79+
NgForOf,
80+
NzOutletModule,
81+
NzTabAddButtonComponent,
82+
NzDropdownMenuComponent,
83+
NzMenuModule,
84+
NzDropDownDirective
85+
],
7686
standalone: true
7787
})
7888
export class NzTabNavOperationComponent implements OnDestroy {

0 commit comments

Comments
 (0)