eui documentation
  1. Components
  2. EclListIllustrationComponent

File

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

Description

Component representing a list using ECL illustration styles.

Supports zebra styling, responsive horizontal layout, and font size options.

Extends

ECLBaseDirective

Implements

AfterContentInit

Metadata

host {
}
selector ecl-list-illustration
templateUrl ./ecl-list-illustration.component.html

Index

Properties
Methods
Inputs
HostBindings
Accessors

Constructor

constructor()

Inputs

fontSize
Type : "m" | "l"
Default value : 'l'

Font size for list content. Possible values:

  • 'm' – medium
  • 'l' – large (default)
hasDividers
Type : boolean
Default value : false

If this is an icon-list, it can have dividers between each item.
isCentered
Type : boolean
Default value : false

If content should be centered
isIconInline
Type : boolean
Default value : false

If the icon should be on the same row as title - for list with icons
isZebra
Type : boolean
Default value : false

Enables zebra style (alternating background colors for list items).
variant
Type : "icon-list" | "number-list" | null
Default value : null

Two variants available: icon-list and number-list.
counterStart
Type : number | null
Default value : null

If we have a number-list, the user can set the start of the counter.
horizontalColumns
Default value : 0, { transform: numberAttribute }

Number of horizontal columns. If greater than 0, items are displayed in a grid layout.
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

HostBindings

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

Applies ARIA role for list elements.
class
Type : string

Applies the appropriate ECL CSS classes to the host element.
style.--ecl-list-illustration-counter-start
Type : string
Default value : ''

Methods

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

Properties

counterStartStyle
Type : string
Default value : ''
Decorators :
@HostBinding('style.--ecl-list-illustration-counter-start')
eclIllustrationItems
Type : QueryList<EclListIllustrationItemComponent>
Decorators :
@ContentChildren(undefined)
elementDisplayStyle
Type : unknown
Default value : computed(() => this.horizontalColumns() > 0 && this.isTabletBreakpoint() ? null : 'block' )

Controls display style of the host element based on breakpoint and column count.
role
Type : string
Default value : 'list'
Decorators :
@HostBinding('attr.role')

Applies ARIA role for list elements.

Accessors

cssClasses
getcssClasses()

Applies the appropriate ECL CSS classes to the host element.

Returns : string

results matching ""

    No results matching ""