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
OnDestroy
DoCheck
| selector | ecl-inpage-navigation |
| imports |
TranslateModule
NgTemplateOutlet
EclStickyContainerModule
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(eclRtlService: EclRtlService, eclThemeService: EclThemeService, differs: IterableDiffers, scrollDispatcher: ScrollDispatcher, zone: NgZone, cdkBreakpointObserver: BreakpointObserver, viewportRuler: ViewportRuler, eclInpageNavigationService: EclInpageNavigationService)
|
|||||||||||||||||||||||||||
|
Parameters :
|
| 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
|
| eclNavigationLinkItems |
Type : QueryList<EclInpageNavigationItemComponent>
|
Decorators :
@ContentChildren(EclInpageNavigationItemComponent, {descendants: true})
|
| eclNavigationList |
Type : EclInpageNavigationListDirective
|
Decorators :
@ContentChild(EclInpageNavigationListDirective)
|
| Public eclThemeService |
Type : EclThemeService
|
| isButtonExpanded |
Default value : false
|
|
Used for the mobile view, where user can select a section from the dropdown. |
| Public isRtl |
Default value : false
|
| listContainer |
| To be removed in v20. Not needed, replaced by 'eclNavigationList' |
Type : ElementRef<HTMLUListElement>
|
Decorators :
@ViewChild('listContainer')
|
| 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()
|