packages/ecl/components/ecl-inpage-navigation/ecl-inpage-navigation.component.ts
The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages. It gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left side of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.
OnInit
AfterViewInit
OnDestroy
DoCheck
| selector | ecl-inpage-navigation |
| imports |
TranslateModule
EUI_ECL_STICKY_CONTAINER
EUI_ECL_ICON
|
| styles |
@media (min-width: 996px) {
.ecl-inpage-navigation__list {
display: block !important;
}
}
|
| templateUrl | ./ecl-inpage-navigation.component.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
constructor()
|
| eclTitle |
Type : string
|
| marginBottom |
Type : number
|
| marginTop |
Type : number
|
|
Used to calculate component's position. |
| offsetTop |
Type : number
|
|
Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour. |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| sectionEnter |
Type : EventEmitter
|
|
This event will be emitted, when onscroll a new section becomes active. |
| onExpandButtonClick |
onExpandButtonClick()
|
|
On mobile view - handle the dropdown toggle.
Returns :
void
|
| onExpandButtonKeydown | ||||||
onExpandButtonKeydown(evt: Event)
|
||||||
|
Dropdown keyboard navigation on mobile view.
Parameters :
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| currentSectionElement |
Type : HTMLElement | null
|
Default value : null
|
| eclNavigationLinkItems |
Type : QueryList<EclInpageNavigationItemComponent>
|
Decorators :
@ContentChildren(EclInpageNavigationItemComponent, {descendants: true})
|
| eclNavigationList |
Type : EclInpageNavigationListDirective
|
Decorators :
@ContentChild(EclInpageNavigationListDirective)
|
| eclThemeService |
Type : unknown
|
Default value : inject(EclThemeService)
|
| isButtonExpanded |
Type : unknown
|
Default value : false
|
|
Used for the mobile view, where user can select a section from the dropdown. |
| Public isRtl |
Type : unknown
|
Default value : false
|
| Public listMaxHeight |
Type : number
|
| navTittle |
Type : ElementRef<HTMLDivElement>
|
Decorators :
@ViewChild('navTittle')
|
| togglerButton |
Type : ElementRef<HTMLButtonElement>
|
Decorators :
@ViewChild('togglerButton')
|
| toggleWrapper |
Type : ElementRef<HTMLDivElement>
|
Decorators :
@ViewChild('toggleWrapper')
|
| hasNavigationList |
gethasNavigationList()
|
| currentNavigationLinkItem |
getcurrentNavigationLinkItem()
|
| sizeIcon |
getsizeIcon()
|
|
the size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes.
Returns :
string
|
| hasActiveSection |
gethasActiveSection()
|