packages/ecl/components/ecl-mega-menu/ecl-mega-menu-item/ecl-mega-menu-item.component.ts
This component represents a mega menu item. Adds functionality and styling, according to ECL standards.
OnDestroy
| selector | li[eclMegaMenuItem] |
| imports |
RouterLink
RouterLinkWithHref
EUI_ECL_BUTTON
EUI_ECL_ICON
EUI_ECL_LINK
|
| templateUrl | ./ecl-mega-menu-item.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
constructor(cdkBreakpointObserver: BreakpointObserver, el: ElementRef, eclMegaMenuDataService: EclMegaMenuDataService, eclHeaderMenuComunicationService: EclHeaderMenuComunicationService, eclMegaMenuService: EclMegaMenuService, renderer: Renderer2)
|
|||||||||||||||||||||
|
Parameters :
|
| href |
Type : string
|
Default value : ''
|
| label |
Type : string
|
| linkExtraAttributes |
Type : literal type
|
|
Used in case user wants to set some custom attributes for the anchr tag. |
| queryParams |
Type : Params | null
|
Default value : null
|
| queryParamsHandling |
Type : QueryParamsHandling
|
Default value : null
|
| routerLink |
Type : string | any[]
|
Default value : null
|
| target |
Type : string
|
Default value : ''
|
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| megaMenuItemClicked |
Type : EventEmitter
|
| megaMenuItemKeydown |
Type : EventEmitter
|
| attr.aria-expanded |
Type : boolean
|
Default value : false
|
| attr.aria-haspopup |
Type : boolean
|
Default value : this.hasChildren ? true : null
|
| class |
Type : string
|
|
Returns current menu item classes, depending on item's state (it's properties' values). |
| window:resize |
window:resize()
|
|
On resize - calculate the size of the dropdown and wrapper (if item is expanded). |
| onFocus |
onFocus()
|
|
Set the focus on the sub element - link or button.
Returns :
void
|
| onKeydown | ||||||
onKeydown(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onMegaMenuItemClick |
onMegaMenuItemClick()
|
|
Manage styling and functionality for children and siblings, when item is clicked.
Returns :
void
|
| onMegaMenuItemCollapse |
onMegaMenuItemCollapse()
|
|
Manage styling and functionality when item is collapsed.
Returns :
void
|
| onResize |
onResize()
|
Decorators :
@HostListener('window:resize')
|
|
On resize - calculate the size of the dropdown and wrapper (if item is expanded).
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| containerStyleHeight |
Type : number | null
|
Default value : null
|
| eclMegaMenuContainer |
Type : EclMegaMenuContainerDirective
|
Decorators :
@ContentChild(undefined)
|
|
Component, that consist of some custom info, text or whatever. When the menu item has no children, but still some sub container is displayed. |
| eclMegaMenuInfo |
Type : EclMegaMenuInfoComponent
|
Decorators :
@ContentChild(undefined)
|
|
Element, that would contain some info about the current item or it's children. First in the container. |
| eclMegaMenuMega |
Type : ElementRef
|
Decorators :
@ViewChild('eclMegaMenuMega')
|
|
The wrapper around the subitems, if any. |
| eclMegaMenuSublist |
Type : EclMegaMenuSublistDirective
|
Decorators :
@ContentChild(undefined)
|
|
Element, that holds the sub items of the current menu items. |
| Public el |
Type : ElementRef
|
| hasPopup |
Default value : this.hasChildren ? true : null
|
Decorators :
@HostBinding('attr.aria-haspopup')
|
| isCurrent |
Default value : false
|
| isExpanded |
Default value : false
|
Decorators :
@HostBinding('attr.aria-expanded')
|
| isMobileBreakpoint |
Default value : false
|
| mainPanel |
Type : ElementRef
|
Decorators :
@ViewChild('mainPanel')
|
|
This elemend hold some extra content, different from subitems. For example just some text or some custom links, etc. |
| megaMenuMegaStyleHeight |
Type : number | null
|
Default value : null
|
| megaMenuMegaStyleOpacity |
Type : number | null
|
Default value : null
|
| menuBtn |
Type : EclButtonComponent
|
Decorators :
@ViewChild('menuBtn')
|
|
Element, tat is rendered if the menu item has children. |
| menuLink |
Type : EclLinkDirective
|
Decorators :
@ViewChild(EclLinkDirective)
|
|
Actual link of the menu item. If the menu has no children, but redirects/loads another page. |
| wrapperStyleHeight |
Type : number | null
|
Default value : null
|
| wrapperStyleTop |
Type : number | null
|
Default value : null
|
| cssClasses |
getcssClasses()
|
|
Returns current menu item classes, depending on item's state (it's properties' values).
Returns :
string
|
| hasChildren |
gethasChildren()
|
| hasSublist |
gethasSublist()
|
| hasContainer |
gethasContainer()
|