diff --git a/devui/menu/demo/auto-expand/auto-expand.component.html b/devui/menu/demo/auto-expand/auto-expand.component.html index f1e4902b..7ba3adae 100644 --- a/devui/menu/demo/auto-expand/auto-expand.component.html +++ b/devui/menu/demo/auto-expand/auto-expand.component.html @@ -1,8 +1,8 @@
-
+
-
+
{{ m.name }}
diff --git a/devui/menu/demo/basic/basic.component.html b/devui/menu/demo/basic/basic.component.html index 8a937707..042f8985 100644 --- a/devui/menu/demo/basic/basic.component.html +++ b/devui/menu/demo/basic/basic.component.html @@ -1,8 +1,8 @@
-
+
-
+
{{ m.name }}
diff --git a/devui/menu/demo/custom-node/custom-node.component.html b/devui/menu/demo/custom-node/custom-node.component.html index 349508a4..525b5a01 100644 --- a/devui/menu/demo/custom-node/custom-node.component.html +++ b/devui/menu/demo/custom-node/custom-node.component.html @@ -1,9 +1,9 @@
-
+
-->
-
+
{{ m.name }}
diff --git a/devui/menu/demo/loop/loop-menu/loop-menu.component.ts b/devui/menu/demo/loop/loop-menu/loop-menu.component.ts index 801cbb46..a82d9934 100644 --- a/devui/menu/demo/loop/loop-menu/loop-menu.component.ts +++ b/devui/menu/demo/loop/loop-menu/loop-menu.component.ts @@ -2,18 +2,18 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { MenuItemClickType, MenuItemType } from 'ng-devui/menu'; @Component({ - selector: 'loop-menu', + selector: 'd-loop-menu', template: ` -
+
-
diff --git a/devui/menu/demo/loop/loop-menu/loop-sub-menu.component.ts b/devui/menu/demo/loop/loop-menu/loop-sub-menu.component.ts index 0b8864e1..88c0c554 100644 --- a/devui/menu/demo/loop/loop-menu/loop-sub-menu.component.ts +++ b/devui/menu/demo/loop/loop-menu/loop-sub-menu.component.ts @@ -2,16 +2,16 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnI import { MenuItemType } from 'ng-devui/menu'; @Component({ - selector: 'loop-sub-menu', + selector: 'd-loop-sub-menu', template: `
- + -
+
{{ item.name }}
diff --git a/devui/menu/demo/loop/loop.component.html b/devui/menu/demo/loop/loop.component.html index 73d2c766..f6d8fa8e 100644 --- a/devui/menu/demo/loop/loop.component.html +++ b/devui/menu/demo/loop/loop.component.html @@ -1,4 +1,4 @@
{{ collapsed ? 'open' : 'close' }} - +
diff --git a/devui/menu/demo/open-close/open-close.component.html b/devui/menu/demo/open-close/open-close.component.html index 9d3c44ab..e86c5e5b 100644 --- a/devui/menu/demo/open-close/open-close.component.html +++ b/devui/menu/demo/open-close/open-close.component.html @@ -1,9 +1,9 @@
{{ collapsed ? 'open' : 'close' }} -
+
-
+
-
+
{{ m.name }}
diff --git a/devui/menu/doc/api-cn.md b/devui/menu/doc/api-cn.md index 6b79dc98..6cfd009c 100644 --- a/devui/menu/doc/api-cn.md +++ b/devui/menu/doc/api-cn.md @@ -9,22 +9,22 @@ import { MenuModule } from 'ng-devui/menu'; 在页面中使用: ```html -
-
+
+
menu item 1
-
-
+
+
sub menu item 1
-
+
sub menu item 2
-
+
menu item 3
@@ -33,20 +33,20 @@ import { MenuModule } from 'ng-devui/menu'; ## Menu -### d-menu 参数 +### dMenu 参数 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo |全局配置项| | :----------------: | :----------------: | :---------------------------------------------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------- | | collapsed | `boolean` | false | 是否收起 | [展开收起](demo#open-close) | -### d-menu 事件 +### dMenu 事件 | 事件 | 类型 | 说明 | 跳转 Demo | | :--------------: | :-----------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------- | | menuItemClick | [MenuItemClickType](#menutype定义) | 可选,menu item点击事件,参数是d-menu-item自身的指令和原生MouseEvent | [基本用法](demo#basic-usage) | | [基本用法](demo#basic-usage) | -### d-sub-menu 参数 +### dSubMenu 参数 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo |全局配置项| | :----------------: | :----------------: | :---------------------------------------------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------- | @@ -56,13 +56,13 @@ import { MenuModule } from 'ng-devui/menu'; | disabled | `boolean` | false | 是否禁用 | | | icon | `string` | '' | 图标 | | -### d-sub-menu 事件 +### dSubMenu 事件 | 事件 | 类型 | 说明 | 跳转 Demo | | :--------------: | :-----------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------- | | openChange | `boolean` | 展开收起事件 | | | -### d-menu-item 参数 +### dMenuItem 参数 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo |全局配置项| | :----------------: | :----------------: | :---------------------------------------------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------- | @@ -70,7 +70,7 @@ import { MenuModule } from 'ng-devui/menu'; | noStyle | `boolean` | false | 是否移除所有预制样式 | | | disabled | `boolean` | false | 是否禁用 | | -### d-menu-item 事件 +### dMenuItem 事件 | 事件 | 类型 | 说明 | 跳转 Demo | | :--------------: | :-----------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------- | diff --git a/devui/menu/doc/api-en.md b/devui/menu/doc/api-en.md index 9b6dac81..fa8b46ae 100644 --- a/devui/menu/doc/api-en.md +++ b/devui/menu/doc/api-en.md @@ -9,22 +9,22 @@ import { MenuModule } from 'ng-devui/menu'; On the page: ```html -
-
+
+
menu item 1
-
-
+
+
sub menu item 1
-
+
sub menu item 2
-
+
menu item 3
@@ -33,20 +33,20 @@ On the page: ## Menu -### d-menu Parameter +### dMenu Parameter | Parameter | Type | Default | Description | Jump to Demo |Global Config| | :----------------: | :----------------: | :---------------------------------------------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------- | | collapsed | `boolean` | false | whether to disable collapse | [Open Close](demo#open-close) | -### d-menu Event +### dMenu Event | Event | Type | Description | Jump to Demo | | :--------------: | :-----------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------- | -| menuItemClick | [MenuItemClickType](#menutypeDefinition) | Click Event on the menu item, and the Parameter is the instruction and native MouseEvent of the d-menu item itself | [Basic usage](demo#basic-usage) | | [Basic usage](demo#basic-usage) | +| menuItemClick | [MenuItemClickType](#menutypeDefinition) | Click Event on the menu item, and the Parameter is the instruction and native MouseEvent of the dMenu item itself | [Basic usage](demo#basic-usage) | | [Basic usage](demo#basic-usage) | -### d-sub-menu Parameter +### dSubMenu Parameter | Parameter | Type | Default | Description | Jump to Demo |Global Config| | :----------------: | :----------------: | :---------------------------------------------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------- | @@ -56,13 +56,13 @@ On the page: | disabled | `boolean` | false | whether to disable interactive | | | icon | `string` | '' | Icon | | -### d-sub-menu Event +### dSubMenu Event | Event | Type | Description | Jump to Demo | | :--------------: | :-----------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------- | | openChange | `boolean` | Open close change Event | | | -### d-menu-item Parameter +### dMenuItem Parameter | Parameter | Type | Default | Description | Jump to Demo |Global Config| | :----------------: | :----------------: | :---------------------------------------------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------- | @@ -70,7 +70,7 @@ On the page: | noStyle | `boolean` | false | whether to remove all prefabricated Styles | | | disabled | `boolean` | false | whether to disable interactive | | -### d-menu-item Event +### dMenuItem Event | Event | Type | Description | Jump to Demo | | :--------------: | :-----------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------- | diff --git a/devui/menu/menu-item.directive.ts b/devui/menu/menu-item.directive.ts index 4489e58b..030445d0 100644 --- a/devui/menu/menu-item.directive.ts +++ b/devui/menu/menu-item.directive.ts @@ -14,21 +14,18 @@ import { MenuHoverTypes } from './type'; import { HostListener } from '@angular/core'; import { MenuComponent } from './menu.component'; import { SubMenuService } from './submenu.service'; +import { log } from 'console'; @Directive({ - selector: '[d-menu-item]', + selector: '[dMenuItem]', exportAs: 'dMenuItem', - host: { - '[class.devui-menu-item]': 'true', - '(mouseenter)': "hostHover('enter')", - '(mouseleave)': "hostHover('leave')", - } }) export class MenuItemDirective implements OnInit, OnChanges { @Input() subMenuHost = false; @HostBinding('class.no-style') @Input() noStyle = false; @HostBinding('class.disabled') @Input() disabled = false; @HostBinding('class.active') @Input() active = false; + @HostBinding('class.devui-menu-item') menuItemClass = true; @Output() itemClick = new EventEmitter(); @Output() titleHover = new EventEmitter(); @@ -43,6 +40,14 @@ export class MenuItemDirective implements OnInit, OnChanges { optional: true }); + @HostListener('mouseenter', ['$event']) hostMouseEenter(event: MouseEvent) { + this.hostHover('enter'); + } + + @HostListener('mouseleave', ['$event']) hostMouseLeave(event: MouseEvent) { + this.hostHover('leave'); + } + @HostListener('click', ['$event']) hostClick(event: MouseEvent) { if (!this.disabled) { this.itemClick.emit(event); diff --git a/devui/menu/menu.component.ts b/devui/menu/menu.component.ts index 739e18ee..3deff6a7 100644 --- a/devui/menu/menu.component.ts +++ b/devui/menu/menu.component.ts @@ -15,17 +15,15 @@ import { BehaviorSubject } from 'rxjs'; import { MenuItemClickType } from './type'; @Component({ - selector: '[d-menu]', + selector: 'd-menu, [dMenu]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styleUrls: ['./menu.component.scss'], encapsulation: ViewEncapsulation.None, - host: { - '[class.devui-menu]': 'true', - } }) export class MenuComponent implements OnInit, OnChanges, OnDestroy { @HostBinding('class.collapsed') @Input() collapsed = false; + @HostBinding('class.devui-menu') menuClass = true; collapsedSubject = new BehaviorSubject(this.collapsed); collapsed$ = this.collapsedSubject.asObservable(); diff --git a/devui/menu/public-api.ts b/devui/menu/public-api.ts index 4577ba17..efb732ad 100644 --- a/devui/menu/public-api.ts +++ b/devui/menu/public-api.ts @@ -1,3 +1,5 @@ export * from './menu.module'; export * from './menu.component'; +export * from './menu-item.directive'; +export * from './sub-menu.component'; export * from './type'; diff --git a/devui/menu/sub-menu.component.html b/devui/menu/sub-menu.component.html index 854595dd..0bc5d472 100644 --- a/devui/menu/sub-menu.component.html +++ b/devui/menu/sub-menu.component.html @@ -1,13 +1,13 @@
-