-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(drop-down): add multi-level menu sample (#3389)
* feat(drop-down): add multi-level menu sample * refactor(drop-down): minor changes ml-menu * fix(*): make host dropdown items non-selectable * refactor(ml-service): add separate methods
- Loading branch information
1 parent
3af1bc8
commit 35826bb
Showing
10 changed files
with
447 additions
and
1 deletion.
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
44 changes: 44 additions & 0 deletions
44
src/app/data-entries/dropdown/dropdown-multi-level-menu/data.ts
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,44 @@ | ||
| export const SUPPORT_DATA = [ | ||
| "Help & Support Documents", | ||
| "Blogs", | ||
| "Forums", | ||
| "Product Ideas", | ||
| "Reference Applications", | ||
| "Customer Stories", | ||
| "Webinars", | ||
| "eBook & Whitepapers" | ||
| ]; | ||
|
|
||
| export const DESKTOP_DATA = [ | ||
| "Ultimate UI for Windows Forms", | ||
| "Ultimate UI for WPF" | ||
| ]; | ||
|
|
||
| export const CROSS_PLATFORM_DATA = [ | ||
| "Ultimate UI for Uno", | ||
| "Ultimate UI for UWP", | ||
| "Ultimate UI for WinUI", | ||
| "Ultimate UI for Xamarin" | ||
| ]; | ||
|
|
||
| export const DESIGN_TO_CODE_DATA = [ | ||
| "Indigo.Design", | ||
| "App Builder", | ||
| "Design System & UI Kits" | ||
| ]; | ||
|
|
||
| export const TESTING_TOOLS_DATA = [ | ||
| "Test automation for Micro Focus UFT: Win Forms", | ||
| "Test automation for Micro Focus UFT: WPF", | ||
| "Test automation for IBM RFT: Windows Forms" | ||
| ]; | ||
|
|
||
| export const IGNITE_UI_DATA = [ | ||
| "Angular", | ||
| "ASP.NET Core", | ||
| "ASP.NET MVC", | ||
| "Blazor", | ||
| "jQuery", | ||
| "React", | ||
| "Web Components" | ||
| ]; |
104 changes: 104 additions & 0 deletions
104
.../data-entries/dropdown/dropdown-multi-level-menu/dropdown-multi-level-menu.component.html
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,104 @@ | ||
| <div class="container"> | ||
| <igx-navbar> | ||
| <div igxNavbarTitle> | ||
| <img width="160px" src="https://static.infragistics.com/marketing/Website/General/Infragistics-horizontal.svg" /> | ||
| </div> | ||
|
|
||
| <button igxButton [igxToggleAction]="dropdown1" [overlaySettings]="overlaySettings"> | ||
| <span>Design & Development</span> <igx-icon>expand_more</igx-icon> | ||
| </button> | ||
| <button igxButton [igxToggleAction]="dropdown2" [overlaySettings]="overlaySettings"> | ||
| <span>UX</span> <igx-icon>expand_more</igx-icon> | ||
| </button> | ||
| <button igxButton [igxToggleAction]="dropdown3" [overlaySettings]="overlaySettings"> | ||
| <span>Support</span> <igx-icon>expand_more</igx-icon> | ||
| </button> | ||
| <button igxButton [igxToggleAction]="dropdown4" [overlaySettings]="overlaySettings"> | ||
| <span>Pricing</span> <igx-icon>expand_more</igx-icon> | ||
| </button> | ||
| </igx-navbar> | ||
|
|
||
| <div class="container"> | ||
| <p>{{ selection }}</p> | ||
| </div> | ||
|
|
||
| <!-- Drop Down Level 1 --> | ||
| <igx-drop-down #dropdown1 [width]="'170px'"> | ||
| <igx-drop-down-item [value]="'Web'" multiLevel [innerDropdown]="web"> | ||
| Web <igx-icon igxSuffix>chevron_right</igx-icon> | ||
| </igx-drop-down-item> | ||
|
|
||
| <igx-drop-down-item [value]="'Desktop'" multiLevel [innerDropdown]="desktop"> | ||
| Desktop <igx-icon igxSuffix>chevron_right</igx-icon> | ||
| </igx-drop-down-item> | ||
|
|
||
| <igx-drop-down-item [value]="'Cross Platform'" multiLevel [innerDropdown]="crossPlatform"> | ||
| Cross Platform <igx-icon igxSuffix>chevron_right</igx-icon> | ||
| </igx-drop-down-item> | ||
|
|
||
| <igx-drop-down-item [value]="'Design to Code'" multiLevel [innerDropdown]="designToCode"> | ||
| Design to Code <igx-icon igxSuffix>chevron_right</igx-icon> | ||
| </igx-drop-down-item> | ||
|
|
||
| <igx-drop-down-item [value]="'Testing Tools'" multiLevel [innerDropdown]="testingTools"> | ||
| Testing Tools <igx-icon igxSuffix>chevron_right</igx-icon> | ||
| </igx-drop-down-item> | ||
| </igx-drop-down> | ||
|
|
||
| <igx-drop-down #dropdown2> | ||
| <igx-drop-down-item [value]="'Indigo.Design'">Indigo.Design</igx-drop-down-item> | ||
| <igx-drop-down-item [value]="'App Builder'">App Builder</igx-drop-down-item> | ||
| </igx-drop-down> | ||
|
|
||
| <igx-drop-down #dropdown3> | ||
| <igx-drop-down-item *ngFor="let item of supportData" [value]="item"> | ||
| {{ item }} | ||
| </igx-drop-down-item> | ||
| </igx-drop-down> | ||
|
|
||
| <igx-drop-down #dropdown4> | ||
| <igx-drop-down-item [value]="'Product Pricing'">Product Pricing</igx-drop-down-item> | ||
| <igx-drop-down-item [value]="'Contact Us'">Contact Us</igx-drop-down-item> | ||
| </igx-drop-down> | ||
|
|
||
| <!-- Drop Down Level 2 --> | ||
| <igx-drop-down #web> | ||
| <igx-drop-down-item [value]="'App Builder'"> | ||
| App Builder | ||
| </igx-drop-down-item> | ||
| <igx-drop-down-item [value]="'Ignite UI'" multiLevel [innerDropdown]="igniteUI"> | ||
| Ignite UI <igx-icon igxSuffix>chevron_right</igx-icon> | ||
| </igx-drop-down-item> | ||
| </igx-drop-down> | ||
|
|
||
| <igx-drop-down #desktop> | ||
| <igx-drop-down-item *ngFor="let item of desktopData" [value]="item"> | ||
| {{ item }} | ||
| </igx-drop-down-item> | ||
| </igx-drop-down> | ||
|
|
||
| <igx-drop-down #crossPlatform> | ||
| <igx-drop-down-item *ngFor="let item of crossPlatformData" [value]="item"> | ||
| {{ item }} | ||
| </igx-drop-down-item> | ||
| </igx-drop-down> | ||
|
|
||
| <igx-drop-down #designToCode> | ||
| <igx-drop-down-item *ngFor="let item of designToCodeData" [value]="item"> | ||
| {{ item }} | ||
| </igx-drop-down-item> | ||
| </igx-drop-down> | ||
|
|
||
| <igx-drop-down #testingTools> | ||
| <igx-drop-down-item *ngFor="let item of testingToolsData" [value]="item"> | ||
| {{ item }} | ||
| </igx-drop-down-item> | ||
| </igx-drop-down> | ||
|
|
||
| <!-- Drop Down Level 3 --> | ||
| <igx-drop-down #igniteUI> | ||
| <igx-drop-down-item *ngFor="let item of igniteUIData" [value]="item"> | ||
| {{ item }} | ||
| </igx-drop-down-item> | ||
| </igx-drop-down> | ||
| </div> |
39 changes: 39 additions & 0 deletions
39
.../data-entries/dropdown/dropdown-multi-level-menu/dropdown-multi-level-menu.component.scss
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,39 @@ | ||
| @use "../../../../variables" as *; | ||
|
|
||
| .container { | ||
| padding: 16px; | ||
| } | ||
|
|
||
| igx-icon { | ||
| --size: 18px; | ||
| } | ||
|
|
||
| [igxButton] { | ||
| margin-inline-start: 0px; | ||
| } | ||
|
|
||
| [multiLevel] { | ||
| cursor: default; | ||
| } | ||
|
|
||
| $custom-navbar-theme: navbar-theme( | ||
| $background: #f8f9fa, | ||
| ); | ||
|
|
||
| $custom-button-theme: button-theme( | ||
| $foreground: #666, | ||
| $hover-foreground: #0099ff, | ||
| $focus-foreground: #0099ff, | ||
| $active-foreground: #0099ff, | ||
| $background: transparent, | ||
| $hover-background: transparent, | ||
| $focus-background: transparent, | ||
| $active-background: transparent, | ||
| ); | ||
|
|
||
| :host::ng-deep { | ||
| --ig-button-font-size: 0.75rem; | ||
|
|
||
| @include css-vars($custom-navbar-theme); | ||
| @include css-vars($custom-button-theme); | ||
| } |
79 changes: 79 additions & 0 deletions
79
...pp/data-entries/dropdown/dropdown-multi-level-menu/dropdown-multi-level-menu.component.ts
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,79 @@ | ||
| import { AfterViewInit, Component, QueryList, ViewChild, ViewChildren } from '@angular/core'; | ||
| import { | ||
| IgxDropDownComponent, | ||
| OverlaySettings, | ||
| ConnectedPositioningStrategy, | ||
| HorizontalAlignment, | ||
| VerticalAlignment | ||
| } from 'igniteui-angular'; | ||
| import { | ||
| CROSS_PLATFORM_DATA, | ||
| DESIGN_TO_CODE_DATA, | ||
| DESKTOP_DATA, | ||
| IGNITE_UI_DATA, | ||
| SUPPORT_DATA, | ||
| TESTING_TOOLS_DATA | ||
| } from './data'; | ||
| import { MultiLevelService } from './multi-level.service'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-dropdown-multi-level-menu', | ||
| templateUrl: './dropdown-multi-level-menu.component.html', | ||
| styleUrls: ['./dropdown-multi-level-menu.component.scss'], | ||
| providers: [MultiLevelService] | ||
| }) | ||
| export class DropdownMultiLevelMenuComponent implements AfterViewInit { | ||
| @ViewChildren(IgxDropDownComponent, { read: IgxDropDownComponent }) | ||
| private _dropdowns: QueryList<IgxDropDownComponent>; | ||
|
|
||
| @ViewChild('dropdown1', { read: IgxDropDownComponent }) | ||
| private _multiLevelDropdown: IgxDropDownComponent; | ||
|
|
||
| public supportData: string[] = SUPPORT_DATA; | ||
| public desktopData: string[] = DESKTOP_DATA; | ||
| public crossPlatformData: string[] = CROSS_PLATFORM_DATA; | ||
| public designToCodeData: string[] = DESIGN_TO_CODE_DATA; | ||
| public testingToolsData: string[] = TESTING_TOOLS_DATA; | ||
| public igniteUIData: string[] = IGNITE_UI_DATA; | ||
|
|
||
| public overlaySettings: OverlaySettings = { | ||
| modal: false, | ||
| positionStrategy: new ConnectedPositioningStrategy({ | ||
| horizontalStartPoint: HorizontalAlignment.Center, | ||
| horizontalDirection: HorizontalAlignment.Center, | ||
| verticalStartPoint: VerticalAlignment.Bottom, | ||
| closeAnimation: undefined | ||
| }) | ||
| }; | ||
|
|
||
| public selection: string = ''; | ||
|
|
||
| constructor(private _multiLevelService: MultiLevelService) { } | ||
|
|
||
| public ngAfterViewInit(): void { | ||
| this._dropdowns.forEach((dropdown) => { | ||
| dropdown.selectionChanging.subscribe((args) => { | ||
| args.cancel = true; | ||
| const value = args.newSelection.value; | ||
| const categories = this._multiLevelService.categories; | ||
|
|
||
| if (categories.includes(value)) { | ||
| this.selection = ''; | ||
| return; | ||
| } | ||
|
|
||
| if (this._multiLevelService.isMultiLevel(dropdown)) { | ||
| this._multiLevelService.handleSelection(); | ||
| } else { | ||
| dropdown.close(); | ||
| } | ||
|
|
||
| this.selection = value; | ||
| }); | ||
| }); | ||
|
|
||
| this._multiLevelDropdown.closing.subscribe((args) => { | ||
| this._multiLevelService.handleClosing(args); | ||
| }); | ||
| } | ||
| } |
Oops, something went wrong.