eui documentation
  1. Components
  2. EclBannerComponent

File

packages/ecl/components/ecl-banner/ecl-banner.component.ts

Description

Component representing a banner, which can contain image, video and call-to-action (CTA) links. Allows customization of layout, alignment, and appearance through inputs.

Extends

ECLBaseDirective

Implements

AfterContentInit OnDestroy

Metadata

selector ecl-banner
imports EUI_ECL_ICON EUI_ECL_BUTTON NgTemplateOutlet
templateUrl ./ecl-banner.component.html

Index

Properties
Methods
Inputs
HostBindings
Accessors

Constructor

constructor()

Inputs

boxBackground
Type : "none" | "light" | "dark" | string
Default value : 'light'

Defines the background color of the banner content box. Allowed values: 'none' | 'light' | 'dark'. Default: 'light'.
copyright
Type : string
Default value : ''

Sets the copyright text displayed in the banner.
eclSize
Type : "xs" | "s" | "m" | "l" | string
Default value : 'm'

Defines the size of the banner. Affects its height-to-width aspect ratio. Allowed values: 'xs' | 's' | 'm' | 'l'. Default: 'm'.
fontColor
Type : "light" | "dark" | string
Default value : 'dark'

Defines the color of the font inside the banner content box. Allowed values: 'light' | 'dark'. Default: 'dark'.
fontSize
Type : "s" | "m" | "l" | string
Default value : 'm'

Defines the font size inside the banner content box. Allowed values: 'm' | 'l'. Default: 'm'.
horizontalAlignment
Type : "right" | "left" | "center" | string
Default value : 'left'

Sets the horizontal alignment of the content inside the banner. Allowed values: 'left' | 'center' | 'right'. Default: 'left'.
isFullWidth
Type : boolean
Default value : false

When true, the banner stretches to full width of its container. Default: false.
verticalAlignment
Type : "top" | "center" | "bottom" | string
Default value : 'center'

Sets the vertical alignment of the content inside the banner. Allowed values: 'top' | 'center' | 'bottom'. Default: 'center'.
fontWeight
Type : "light" | "bold"
Default value : 'light'
hasOverlay
Default value : false, { transform: booleanAttribute }
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

HostBindings

class
Type : string
style.--banner-footer-height.px
Type : any
Default value : null

Methods

Public calculateHeight
calculateHeight()

Triggers the banner's height calculation. Used by the carousel to force height recalculation before measuring.

Returns : void
onKeydownEnterPause
onKeydownEnterPause()

Handles keyboard activation (Enter key) to pause video. Moves focus to play button after pausing.

Returns : void
onKeydownEnterPlay
onKeydownEnterPlay()

Handles keyboard activation (Enter key) to play video. Moves focus to pause button after playing starts.

Returns : void
onVideoPause
onVideoPause()

Pauses the embedded banner video. Triggered via interaction (e.g., button).

Returns : void
onVideoPlay
onVideoPlay()

Plays the embedded banner video. Triggered via interaction (e.g., button).

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

Properties

bannerContainer
Type : ElementRef
Decorators :
@ViewChild('bannerContainer')
bannerFooter
Type : ElementRef
Decorators :
@ViewChild('bannerFooter')
bannerFooterHeight
Type : null
Default value : null
Decorators :
@HostBinding('style.--banner-footer-height.px')
eclBannerImage
Type : EclBannerImageDirective
Decorators :
@ContentChild(EclBannerImageDirective)
eclBannerVideo
Type : EclBannerVideoDirective
Decorators :
@ContentChild(EclBannerVideoDirective)
eclLinkComponents
Type : QueryList<EclLinkDirective>
Decorators :
@ContentChildren(undefined)
el
Type : unknown
Default value : inject(ElementRef)
isPlaying
Type : unknown
Default value : signal(true)
pauseBtn
Type : EclButtonComponent
Decorators :
@ViewChild('pauseBtn')
playBtn
Type : EclButtonComponent
Decorators :
@ViewChild('playBtn')
skipHeightManagement
Type : unknown
Default value : false

When true, the banner's own height management is disabled. Used by the carousel to prevent height conflicts.

Accessors

cssClasses
getcssClasses()
hasCtaLink
gethasCtaLink()

Indicates whether the banner contains at least one call-to-action link.

Returns : boolean
hasImage
gethasImage()

Indicates whether the banner contains an image.

Returns : boolean
hasVideo
gethasVideo()

Indicates whether the banner contains a video.

Returns : boolean
hasMedia
gethasMedia()

Indicates whether the banner contains any media (image or video).

Returns : boolean

results matching ""

    No results matching ""