eui documentation
  1. Components
  2. EclListIllustrationItemComponent

File

packages/ecl/components/ecl-list-illustration/ecl-list-illustration-item.component.ts

Description

Component representing a single item in an ECL illustration list.

Displays optional title, value, and one or more illustration icons.

Extends

ECLBaseDirective

Metadata

selector ecl-list-illustration-item
templateUrl ./ecl-list-illustration-item.component.html

Index

Properties
Methods
Inputs
HostBindings
Accessors

Inputs

eclTitle
Type : string
Default value : ''

Text displayed as the item title.
eclValue
Type : string
Default value : ''

Text displayed as the item value.
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

HostBindings

attr.role
Type : string
Default value : 'listitem'

Applies ARIA role for list items.
class.ecl-list-illustration__item
Type : boolean
Default value : true

Applies ECL class for illustration list item.

Methods

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

Properties

className
Type : unknown
Default value : true
Decorators :
@HostBinding('class.ecl-list-illustration__item')

Applies ECL class for illustration list item.
eclIllustrationIcon
Type : EclListIllustrationIconDirective
Decorators :
@ContentChild(undefined)
eclIllustrationPicture
Type : EclListIllustrationPictureDirective
Decorators :
@ContentChild(undefined)
hasDivider
Type : unknown
Default value : signal(false)

A special class needs to be added, if an icon list has dividers between items.
hasPicture
Type : Signal<boolean>
Default value : computed(() => this.eclIllustrationPicture !== undefined)
isVerticalPicture
Type : unknown
Default value : signal(false)

A special class needs to be added, for vertical lists with picture.
role
Type : string
Default value : 'listitem'
Decorators :
@HostBinding('attr.role')

Applies ARIA role for list items.

Accessors

hasTitle
gethasTitle()

Returns true if the item has a title or any projected icons.

Returns : boolean
hasValue
gethasValue()

Returns true if the item has a value.

Returns : boolean

results matching ""

    No results matching ""