### 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
counterStartStyle eclIllustrationItems elementDisplayStyle role
###### Methods
getCssClasses
###### Inputs
fontSize hasDividers isCentered isIconInline isZebra variant counterStart horizontalColumns class e2eAttr tabindex
###### HostBindings
attr.role class style.--ecl-list-illustration-counter-start
###### Accessors
cssClasses

### 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
get `cssClasses()`
Applies the appropriate ECL CSS classes to the host element. Returns : `string`

# results matching ""

# No results matching ""