packages/ecl/components/ecl-carousel/ecl-carousel-item.component.ts
Represents a single item (slide) within the ECL Carousel. Each slide can optionally include an EclBannerComponent and supports click events.
| selector | ecl-carousel-item |
| styles |
/* TODO: remove by implementing full ECL specs */
:host:before {
left: 0 !important;
display: none;
}
|
| templateUrl | ./ecl-carousel-item.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
| id |
Type : string
|
|
The unique identifier of the slide. |
| isCurrent |
Type : boolean
|
Default value : false
|
|
Indicates whether this slide is currently active/visible. Automatically coerced to a boolean value. |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| slideClick |
Type : EventEmitter
|
|
Emits an event when the slide is clicked. |
| attr.aria-label |
Type : string
|
|
Sets the |
| attr.aria-roledescription |
Type : string
|
Default value : 'slide'
|
|
Sets a more descriptive ARIA role, identifying this element as a slide. |
| attr.inert |
Type : boolean
|
|
Adds the |
| attr.role |
Type : string
|
Default value : 'tabpanel'
|
|
Sets the ARIA |
| class |
Type : string
|
|
Computes and binds the slide's CSS class. |
| style.width.% |
Type : number
|
|
Controls the width of the slide as a percentage. |
| click |
click()
|
|
Handles click events on the slide and emits a slideClick event. |
| onSlideClick |
onSlideClick()
|
Decorators :
@HostListener('click')
|
|
Handles click events on the slide and emits a slideClick event.
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| ariaLabel |
Type : string
|
Decorators :
@HostBinding('attr.aria-label')
|
|
Sets the |
| banner |
Type : EclBannerComponent
|
Decorators :
@ContentChild(undefined)
|
|
Optionally captures a banner component projected into the slide. |
| el |
Type : unknown
|
Default value : inject(ElementRef)
|
| Public index |
Type : number
|
|
Internal slide index, assigned dynamically by the carousel. |
| role |
Type : string
|
Default value : 'tabpanel'
|
Decorators :
@HostBinding('attr.role')
|
|
Sets the ARIA |
| roleDescription |
Type : string
|
Default value : 'slide'
|
Decorators :
@HostBinding('attr.aria-roledescription')
|
|
Sets a more descriptive ARIA role, identifying this element as a slide. |
| width |
Type : number
|
Decorators :
@HostBinding('style.width.%')
|
|
Controls the width of the slide as a percentage. |
| cssClasses |
getcssClasses()
|
|
Computes and binds the slide's CSS class.
Returns :
string
|
| isInert |
getisInert()
|
|
Adds the
Returns :
boolean
|