packages/ecl/components/ecl-site-header/ecl-site-header.component.ts
The Site header offers easily recognisable elements (such as the logo) and the most essential functionality of every site (such as Language switcher or Search form). Additionally it can host the name of the site, the class name to which it belongs and the main navigation. The header is always placed at the top of the page. The elements required in the site header are different depending wether it is the corporate, standardised or an harmonised website.
| selector | ecl-site-header |
| imports |
AsyncPipe
TranslateModule
EUI_ECL_LINK
EclSiteHeaderPictureDirective
|
| styles |
:host {
display: block;
}
|
| templateUrl | ./ecl-site-header.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
Accessors |
constructor()
|
| isSiteNameMobileOnly |
Type : boolean
|
Default value : false
|
|
Determines if the site name should be displayed only on mobile devices. |
| languageCode |
Type : string
|
Default value : 'en'
|
|
Language code of the current language of the site. |
| logoSize |
Type : "s" | "m" | "l"
|
Default value : 'm'
|
|
The size of the logo, 's', 'm' or 'l', default to 'm'. |
| siteName |
Type : string
|
|
The name of the site, to be added in the header, next to the logo. |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| languageClick |
Type : EventEmitter
|
| logoClick |
Type : EventEmitter
|
| class |
Type : string
|
|
Adds specific classes to the main element. Depending , logo size, menu and menu status, rtl status. |
| hasCustomLink |
hasCustomLink()
|
|
Returns :
boolean
|
| onECLogoClick | ||||||
onECLogoClick(evt: MouseEvent)
|
||||||
|
Parameters :
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| bannerHeader |
Type : ElementRef
|
Decorators :
@ViewChild('bannerHeader')
|
| eclHeaderImage |
Type : EclSiteHeaderImageDirective
|
Decorators :
@ContentChild(undefined, {descendants: true})
|
| eclHeaderLink |
Type : EclSiteHeaderLinkDirective
|
Decorators :
@ContentChild(undefined, {descendants: true})
|
| eclLanguageComponent |
Type : EclSiteHeaderLanguageComponent
|
Decorators :
@ContentChild(EclSiteHeaderLanguageComponent)
|
| eclLoginComponent |
Type : EclSiteHeaderLoginComponent
|
Decorators :
@ContentChild(EclSiteHeaderLoginComponent)
|
| eclMegaMenuComponent |
Type : EclMegaMenuComponent
|
Decorators :
@ContentChild(EclMegaMenuComponent)
|
| eclMenuComponent |
Type : EclMenuComponent
|
Decorators :
@ContentChild(EclMenuComponent)
|
| eclNotificationComponent |
Type : EclSiteHeaderNotificationComponent
|
Decorators :
@ContentChild(EclSiteHeaderNotificationComponent)
|
| eclSearchComponent |
Type : EclSiteHeaderSearchComponent
|
Decorators :
@ContentChild(EclSiteHeaderSearchComponent)
|
| eclThemeService |
Type : unknown
|
Default value : inject(EclThemeService)
|
| siteHeaderHeader |
Type : ElementRef
|
Decorators :
@ViewChild('siteHeaderHeader')
|
| topContainerElement |
Type : ElementRef
|
Decorators :
@ViewChild('topContainer')
|
| cssClasses |
getcssClasses()
|
|
Adds specific classes to the main element. Depending , logo size, menu and menu status, rtl status.
Returns :
string
|
| partOfLogoName |
getpartOfLogoName()
|
|
This method is used, when current language is not present for our available logo collection. In this case, a default logo is returned.
Returns :
string
|