packages/ecl/components/ecl-menu/ecl-menu/ecl-menu.component.ts
The horizontal menu is used as a primary navigation and it can display up to 2 levels. It directs users to the pages where they need to visit.
OnInit
AfterContentInit
OnDestroy
| selector | ecl-menu |
| imports |
TranslateModule
EUI_ECL_BUTTON
EUI_ECL_ICON
|
| styles |
:host {
display: block;
}
|
| templateUrl | ./ecl-menu.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
constructor()
|
| maxLines |
Type : number
|
Default value : 0
|
|
Adds some additional styling for the menu items' labels. Depending on that value, the labels can drop on 2-3 lines, if they are longer. |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| menuItemSelect |
Type : EventEmitter
|
| openHamburgerMenu |
Type : EventEmitter
|
| attr.data-expanded |
Type : string
|
| attr.role |
Type : string
|
Default value : 'navigation'
|
|
The default role is 'navigation', should not be changed. |
| class |
Type : string
|
| class.ecl-menu--forced-close |
Type : boolean
|
Default value : false
|
| class.ecl-menu--forced-mobile |
Type : boolean
|
Default value : false
|
| document:click | ||||
Arguments : '$event'
|
||||
document:click(event: MouseEvent)
|
||||
|
On outside click - close/hide any open menus.
Parameters :
|
| keydown.escape | ||||
Arguments : '$event'
|
||||
keydown.escape(event: Event)
|
||||
|
On 'esc' key clicked - close/hide any open menus.
Parameters :
|
| onDocumentClick | ||||||
onDocumentClick(event: MouseEvent)
|
||||||
Decorators :
@HostListener('document:click', ['$event'])
|
||||||
|
On outside click - close/hide any open menus.
Parameters :
Returns :
void
|
| onEscapePress | ||||||
onEscapePress(event: Event)
|
||||||
Decorators :
@HostListener('keydown.escape', ['$event'])
|
||||||
|
On 'esc' key clicked - close/hide any open menus.
Parameters :
Returns :
void
|
| onMenuBackClick | ||||||
onMenuBackClick(evt: MouseEvent)
|
||||||
|
Manages state on back button click, used in mobile view.
Parameters :
Returns :
void
|
| onMenuCloseClick | ||||||
onMenuCloseClick(evt: MouseEvent)
|
||||||
|
Manages state on close button click, used in mobile view, in EU theme.
Parameters :
Returns :
void
|
| onMenuOpenCloseClick | ||||||
onMenuOpenCloseClick(evt: MouseEvent)
|
||||||
|
Manages state on open/close button click, used in mobile view.
Parameters :
Returns :
void
|
| onNextBtnClick |
onNextBtnClick()
|
|
Manages state on 'next' button click. Used in desktop view. Slides the items and shows the next hidden items.
Returns :
void
|
| onPrevBtnClick |
onPrevBtnClick()
|
|
Manages state on 'previous' button click. Used in desktop view. Slides the items and shows the previous hidden items.
Returns :
void
|
| onSwipeLeft |
onSwipeLeft()
|
|
Swipe left gesture handling
Returns :
void
|
| onSwipeRight |
onSwipeRight()
|
|
Swipe right gesture handling
Returns :
void
|
| positionMenuOverlay | ||||||
positionMenuOverlay(bottomSpaceY: number)
|
||||||
|
Postions overlay, depending on parent header position. This method is called from parent header, which uses the menu for navigation.
Parameters :
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| Public breakpointsValue |
Type : any
|
Default value : {
isMobile: false,
isTablet: false,
isLtDesktop: false,
isDesktop: false,
isXL: false,
isXXL: false,
}
|
|
Represents the current viewport breakpoint states. |
| btnNext |
Type : EclButtonComponent
|
Decorators :
@ViewChild('btnNext')
|
|
When there is an overflow of the menu, the 'next' button to navigate to next hidden items. |
| btnPrevious |
Type : EclButtonComponent
|
Decorators :
@ViewChild('btnPrevious')
|
|
When there is an overflow of the menu, the 'previous' button to navigate back to first hidden items. |
| eclRootMenuItems |
Type : QueryList<EclMenuItemComponent>
|
Decorators :
@ContentChildren(EclMenuItemComponent)
|
|
The main items of the menu. |
| hasOverflow |
Type : unknown
|
Default value : false
|
| innerSection |
Type : ElementRef
|
Decorators :
@ViewChild('innerSection')
|
|
The element, that wraps the main menu items and the back and forth button. |
| innerStyleTop |
Type : number | null
|
Default value : null
|
| isHamburgerMenuOpened |
Type : unknown
|
Default value : false
|
| isMenuHidden |
Type : unknown
|
Default value : false
|
Decorators :
@HostBinding('class.ecl-menu--forced-close')
|
| isMobileBreakpoint |
Type : unknown
|
Default value : false
|
| isPrevBtnCurrentClass |
Type : unknown
|
Default value : false
|
|
Show/hide the specific class for the 'previous' and 'next' buttons. |
| isShowNextBtn |
Type : unknown
|
Default value : false
|
| isShowPrevBtn |
Type : unknown
|
Default value : false
|
| isTablet |
Type : unknown
|
Default value : false
|
Decorators :
@HostBinding('class.ecl-menu--forced-mobile')
|
| itemsList |
Type : ElementRef
|
Decorators :
@ViewChild('itemsList')
|
|
The element that wraps the main menu items. |
| menuListStyleLeft |
Type : string
|
Default value : 'auto'
|
| menuListStyleRight |
Type : string
|
Default value : 'auto'
|
| openCloseButton |
Type : EclButtonComponent
|
Decorators :
@ViewChild('openCloseButton')
|
|
The button to open/close menu in mobile mode. |
| overlayStyleTop |
Type : number | null
|
Default value : null
|
| role |
Type : string
|
Default value : 'navigation'
|
Decorators :
@HostBinding('attr.role')
|
|
The default role is 'navigation', should not be changed. |
| cssClasses |
getcssClasses()
|
| expandedAttr |
getexpandedAttr()
|
| isMenuExpandedInMobile |
getisMenuExpandedInMobile()
|