-
Notifications
You must be signed in to change notification settings - Fork 210
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add menu branch * feat: 初始化菜单文档 * feat: menu基本样式 * feat: 递归menu * feat: 折叠menu * fix: button点击两次只触发一次的bug * feat: menu animation * feat: 菜单自定义ui * fix: menu 动画bug * style: 整理menu代码 * fix: 菜单状态bug * feat: 完成菜单弹出交互 * fix: 使用takeUntilDestroyed * docs: menu demos * docs: menu api docs * fix: fix docs * fix: 嵌套menu bugs * fix: menu item click * feat: add menu branch * feat: 初始化菜单文档 * feat: menu基本样式 * feat: 递归menu * feat: 折叠menu * fix: button点击两次只触发一次的bug * feat: menu animation * feat: 菜单自定义ui * fix: menu 动画bug * style: 整理menu代码 * fix: 菜单状态bug * feat: 完成菜单弹出交互 * fix: 使用takeUntilDestroyed * docs: menu demos * docs: menu api docs * fix: fix docs * fix: 嵌套menu bugs * fix: menu item click * feat: 去掉icon动画，增加css var文档 * fix: 改文案 * fix: menu 折叠保持展开 * feat: menu样式优化，还原button组件代码 * feat: border-radius变量 * fix: menu细节优化 * fix: menn优化 * fix(menu): 优化样式，submenu加上[cdkConnectedOverlayPush] * fix(menu): menu 调整 icon-gap * fix(menu): menu title 加省略号 * fix: 还原menu以外的代码，删掉log * fix(app.component.scss): 删掉.devui-menu的class * fix(devui/package.json) 删掉 @ngrx/component
- Loading branch information
Showing
50 changed files
with
2,275 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <div class="demo-menu" style="width: 256px"> | ||
| <div d-menu> | ||
| <ng-container *ngFor="let m of menus; trackBy: trackByMenu"> | ||
| <div | ||
| d-sub-menu | ||
| [title]="m.name" | ||
| [icon]="m.icon" | ||
| [open]="openKeys.includes(m.key)" | ||
| (openChange)="openChange($event, m.key)" | ||
| *ngIf="m.children?.length; else leafTpl" | ||
| > | ||
| <div | ||
| d-menu-item | ||
| (itemClick)="itemClick(item.key)" | ||
| [active]="item.key === activeKey" | ||
| *ngFor="let item of m.children; trackBy: trackByMenu" | ||
| > | ||
| <d-icon class="devui-menu-item-icon" icon="icon-op-list" /> | ||
| <span class="devui-menu-item-name">{{ item.name }}</span> | ||
| </div> | ||
| </div> | ||
| <ng-template #leafTpl> | ||
| <div d-menu-item (itemClick)="itemClick(m.key)" [active]="m.key === activeKey"> | ||
| <d-icon class="devui-menu-item-icon" icon="icon-op-list" /> | ||
| <span class="devui-menu-item-name over-flow-ellipsis">{{ m.name }}</span> | ||
| </div> | ||
| </ng-template> | ||
| </ng-container> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; | ||
| import { MenuItemType } from 'ng-devui/menu'; | ||
|
|
||
| const MENUS: MenuItemType[] = [ | ||
| { | ||
| key: 'c-1', | ||
| icon: 'icon-more-func', | ||
| name: 'Content 1 (as a leaf menu)' | ||
| }, | ||
| { | ||
| key: 'c-2', | ||
| name: 'Content 2 (as a parent menu, has children)', | ||
| icon: 'icon-more-func', | ||
| children: [ | ||
| { | ||
| key: 'c-2-1', | ||
| name: 'Content 2 Child 1' | ||
| }, | ||
| { | ||
| key: 'c-2-2', | ||
| name: 'Content 2 Child 2' | ||
| }, | ||
| { | ||
| key: 'c-2-3', | ||
| name: 'Content 2 Child 3' | ||
| }, | ||
| ] | ||
| }, { | ||
| key: 'c-3', | ||
| name: 'Content 3 (as a parent menu, has children)', | ||
| icon: 'icon-more-func', | ||
| children: [ | ||
| { | ||
| key: 'c-3-1', | ||
| name: 'Content 3 Child 1' | ||
| }, | ||
| { | ||
| key: 'c-3-2', | ||
| name: 'Content 3 Child 2', | ||
| }, | ||
| { | ||
| key: 'c-3-3', | ||
| name: 'Content 3 Child 3', | ||
| }, | ||
| { | ||
| key: 'c-3-4', | ||
| name: 'Content 3 Child 4', | ||
| }, | ||
| ] | ||
| }, | ||
| { | ||
| key: 'c-4', | ||
| icon: 'icon-more-func', | ||
| name: 'Content 4 (as a leaf menu)', | ||
| } | ||
| ]; | ||
|
|
||
| function findAllParent(source: MenuItemType[], key: string) { | ||
| const result: string[] = []; | ||
| const loop = (list: MenuItemType[]) => { | ||
| for (const item of list) { | ||
| if (item.key === key) { | ||
| // parentKeys.unshift(key); | ||
| return true; | ||
| } | ||
| if (item.children?.length) { | ||
| const t = loop(item.children); | ||
| if (t) { | ||
| result.unshift(item.key); | ||
| return true; | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| loop(source); | ||
| return result; | ||
| } | ||
|
|
||
|
|
||
| @Component({ | ||
| selector: 'd-auto-expand', | ||
| templateUrl: './auto-expand.component.html', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class AutoExpandComponent implements OnInit { | ||
| menus = MENUS; | ||
| openKeys: string[] = []; | ||
| activeKey = 'c-3-2'; | ||
|
|
||
| openChange(open: boolean, key: string) { | ||
| if (open) { | ||
| this.openKeys.push(key); | ||
| } else { | ||
| this.openKeys = this.openKeys.filter(item => item !== key); | ||
| } | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| this.openKeys = findAllParent(this.menus, this.activeKey); | ||
| } | ||
| itemClick(key: string) { | ||
| this.activeKey = key; | ||
| } | ||
|
|
||
| trackByMenu(_: number, item: MenuItemType) { | ||
| return item.key; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <div class="demo-menu" style="width: 256px"> | ||
| <div d-menu (menuItemClick)="menuItemClick($event)"> | ||
| <ng-container *ngFor="let m of menus; trackBy: trackByMenu"> | ||
| <div | ||
| d-sub-menu | ||
| [title]="m.name" | ||
| [icon]="m.icon" | ||
| [disabled]="disabledKeys.includes(m.key)" | ||
| [open]="openKeys.includes(m.key)" | ||
| (openChange)="openChange($event, m.key)" | ||
| *ngIf="m.children?.length; else leafTpl" | ||
| > | ||
| <div | ||
| d-menu-item | ||
| [disabled]="disabledKeys.includes(item.key)" | ||
| (itemClick)="itemClick(item.key)" | ||
| [active]="item.key === activeKey" | ||
| *ngFor="let item of m.children; trackBy: trackByMenu" | ||
| > | ||
| <d-icon class="devui-menu-item-icon" icon="icon-op-list" /> | ||
| <span class="devui-menu-item-name over-flow-ellipsis">{{ item.name }}</span> | ||
| </div> | ||
| </div> | ||
| <ng-template #leafTpl> | ||
| <div d-menu-item (itemClick)="itemClick(m.key)" [active]="m.key === activeKey" [disabled]="disabledKeys.includes(m.key)"> | ||
| <d-icon class="devui-menu-item-icon" icon="icon-op-list" /> | ||
| <span class="devui-menu-item-name over-flow-ellipsis">{{ m.name }}</span> | ||
| </div> | ||
| </ng-template> | ||
| </ng-container> | ||
| </div> | ||
| </div> |
Oops, something went wrong.