packages/ecl/components/ecl-menu/ecl-menu/ecl-menu-item.component.ts
This component represents a root menu item. Adds styling and functionality to menu item.
EclMenuItem
AfterContentInit
OnDestroy
| encapsulation | ViewEncapsulation.None |
| selector | ecl-menu-item |
| imports |
NgTemplateOutlet
RouterLink
RouterLinkWithHref
EUI_ECL_BUTTON
EUI_ECL_ICON
EUI_ECL_LINK
|
| templateUrl | ./ecl-menu-item.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
constructor()
|
| href |
Type : string
|
Default value : ''
|
| id |
Type : string
|
| isCurrent |
Type : boolean
|
Default value : false
|
| label |
Type : string
|
| linkExtraAttributes |
Type : literal type
|
|
Custom attributes, to be added to the tag of the menu item. |
| 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 : ''
|
| toggleAriaLabel |
Type : string
|
|
When in mobile view, use this property to set aria-label for the toggle items button (to expand item's children). |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| menuItemCaret |
Type : EventEmitter
|
| menuItemFocus |
Type : EventEmitter
|
| menuItemHover |
Type : EventEmitter
|
|
Event that is emited on clicking the caret button to expand item's children in mobile mode. |
| menuItemHoverOut |
Type : EventEmitter
|
| menuItemKeydown |
Type : EventEmitter
|
| menuItemSelect |
Type : EventEmitter
|
| menuMegaItemSelect |
Type : EventEmitter
|
| menuMegaLastItemTab |
Type : EventEmitter
|
|
This event is emited when the keyboard nav reaches the last item in mobile view. Then the next focused element should be the 'close' btn. |
| attr.aria-expanded |
Type : boolean
|
| attr.aria-haspopup |
Type : boolean
|
| attr.role |
Type : string
|
Default value : 'listitem'
|
|
The default role of the item is 'listitem' and should not be changed. |
| class |
Type : string
|
| class.ecl-menu__item--has-children |
Type : boolean
|
| mouseenter |
Arguments : '$event'
|
mouseenter(evt: MouseEvent)
|
| mouseleave |
Arguments : '$event'
|
mouseleave(evt: MouseEvent)
|
| checkMenuItem | ||||||||||||
checkMenuItem(maxLines: number, isMobileBreakpoint: boolean)
|
||||||||||||
|
This method calculates height and width of an item, depending the maximum of lines(rows) allowed. Depends on the 'maxLines' property of the parent menu component.
Parameters :
Returns :
void
|
| onButtonKeydown | ||||||
onButtonKeydown(evt: Event)
|
||||||
|
Manages the keyboard navigation when the current element is the button of the menu item.
Parameters :
Returns :
void
|
| onFocusFromNext |
onFocusFromNext()
|
|
Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the next root menu item.
Returns :
void
|
| onFocusFromPrev |
onFocusFromPrev()
|
|
Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the previous root menu item.
Returns :
void
|
| onFocusFromSubmenu |
onFocusFromSubmenu()
|
|
Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu.
Returns :
void
|
| onItemCaretClick | ||||||
onItemCaretClick(evt: MouseEvent)
|
||||||
|
When clicking the caret button, to expand item's children. Used in mobile view.
Parameters :
Returns :
void
|
| onItemClick | ||||||
onItemClick(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onItemFocus | ||||||
onItemFocus(evt: FocusEvent)
|
||||||
|
Parameters :
Returns :
void
|
| onItemMouseEnter | ||||||
onItemMouseEnter(evt: MouseEvent)
|
||||||
Decorators :
@HostListener('mouseenter', ['$event'])
|
||||||
|
Parameters :
Returns :
void
|
| onItemMouseLeave | ||||||
onItemMouseLeave(evt: MouseEvent)
|
||||||
Decorators :
@HostListener('mouseleave', ['$event'])
|
||||||
|
Parameters :
Returns :
void
|
| onLinkKeydown | ||||||
onLinkKeydown(evt: Event)
|
||||||
|
Manages the keyboard navigation when the current element is the tag of the menu item.
Parameters :
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| el |
Type : unknown
|
Default value : inject(ElementRef)
|
| isExpanded |
Type : boolean
|
| isFull |
Type : unknown
|
Default value : false
|
|
Set to 'true', when item has more than 13 chidren and the overlay needs to use the full available space. |
| isHovered |
Type : unknown
|
Default value : false
|
| isMobileBreakpoint |
Type : unknown
|
Default value : false
|
| isVisible |
Type : unknown
|
Default value : true
|
|
Used when menu has overlay, to show if the item is currently displayed. |
| menuButton |
Type : EclButtonComponent
|
Decorators :
@ViewChild(EclButtonComponent)
|
|
The |
| menuLink |
Type : ElementRef<HTMLAnchorElement>
|
Decorators :
@ViewChild('menuLink')
|
| role |
Type : string
|
Default value : 'listitem'
|
Decorators :
@HostBinding('attr.role')
|
|
The default role of the item is 'listitem' and should not be changed. |
| submenu |
Type : EclMenuMegaComponent
|
Decorators :
@ContentChild(undefined)
|
| cssClasses |
getcssClasses()
|
| hasEclChildrenDataAttribute |
gethasEclChildrenDataAttribute()
|
| isAriaExpanded |
getisAriaExpanded()
|
| ariaCurrent |
getariaCurrent()
|
| hasChildren |
gethasChildren()
|
| children |
getchildren()
|