### File

`packages/ecl/components/ecl-inpage-navigation/ecl-inpage-navigation-item.component.ts`

### Description

Represent a single navigation item. contains the link, that activates/scrolls to the new current paragraph of the page.

### Extends

`ECLBaseDirective`

### Metadata

selector | `li[eclInpageNavigationItem]`
imports | `EUI_ECL_LINK`
styles | `:host { display: list-item; }`
templateUrl | `./ecl-inpage-navigation-item.component.html`

### Index

###### Properties
cmpClass link role
###### Methods
onArrowDown onArrowUp onEnter onFocus onItemClick onTab getCssClasses
###### Inputs
isActive label sectionId class e2eAttr tabindex
###### Outputs
itemArrowDown itemArrowUp itemClick itemEnter itemTab
###### HostBindings
attr.role class.ecl-inpage-navigation__item
###### Accessors
sectionElement

### Constructor

`constructor()`

### Inputs

isActive
Type : `boolean`

label
Type : `string`
The label that is displayed in the items list.

sectionId
Type : `string`

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

itemArrowDown
Type : `EventEmitter`
Emitted when on keyboard navigation, user clicks the arrow-down.

itemArrowUp
Type : `EventEmitter`
Emitted when on keyboard navigation, user clicks the arrow-up.

itemClick
Type : `EventEmitter`
Emited when user clicks on the item.

itemEnter
Type : `EventEmitter`
Emitted when on keyboard navigation, user clicks the ENTER.

itemTab
Type : `EventEmitter`
Emitted when on keyboard navigation, user clicks the TAB.

### HostBindings

attr.role
Type : `string`
Default value : `'listitem'`
The role of the component is 'listitem', should not be changed.

class.ecl-inpage-navigation__item
Type : `boolean`
Default value : `true`

### Methods

onArrowDown
`onArrowDown(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onArrowUp
`onArrowUp(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onEnter
`onEnter(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onFocus
`onFocus()`
Returns : `void`

onItemClick
`onItemClick(evt: MouseEvent)`
Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

onTab
`onTab(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

cmpClass
Type : `unknown`
Default value : `true`
Decorators : `@HostBinding('class.ecl-inpage-navigation__item')`

link
Type : `EclLinkDirective`
Decorators : `@ViewChild(EclLinkDirective)`

role
Type : `string`
Default value : `'listitem'`
Decorators : `@HostBinding('attr.role')`
The role of the component is 'listitem', should not be changed.

### Accessors

sectionElement
get `sectionElement()`
Returns page element/paragraph, that is associated with this item from the navigation list. Returns : `HTMLElement | null`

# results matching ""

# No results matching ""