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

Metadata

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

Index

Properties
Methods
Inputs
HostBindings
Accessors

Constructor

constructor(cdkBreakpointObserver: BreakpointObserver)
Parameters :
Name Type Optional
cdkBreakpointObserver BreakpointObserver No

Inputs

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

Font size for list content. Possible values:

  • 'm' – medium
  • 'l' – large (default)
horizontalColumns
Type : number
Default value : 0

Number of horizontal columns. If greater than 0, items are displayed in a grid layout.
isZebra
Type : boolean
Default value : false

Enables zebra style (alternating background colors for list items).
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.display
Type : string | null

Controls display style of the host element based on breakpoint and column count.

Methods

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

Properties

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
elementDisplayStyle
getelementDisplayStyle()

Controls display style of the host element based on breakpoint and column count.

Returns : string | null

results matching ""

    No results matching ""