eui documentation
  1. Components
  2. EclFactFiguresComponent

File

packages/ecl/components/ecl-fact-figures/ecl-fact-figures.component.ts

Description

Main component for displaying a collection of fact and figure items in a responsive, styled grid layout.

Extends

ECLBaseDirective

Metadata

selector div[eclFactFigures], ecl-fact-figures
styles :host { display: block; }
templateUrl ./ecl-fact-figures.component.html

Index

Properties
Methods
Inputs
HostBindings
Accessors

Constructor

constructor()

Inputs

columns
Default value : '3'

Number of columns in the layout (as string). Default is '3'.
fontSize
Type : "m" | "l"
Default value : 'l'

Font size variant. Can be:

  • 'm' – medium (smaller text)
  • 'l' – large (default)
isCentered
Default value : false, { transform: booleanAttribute }

Whether the content should be centered. Adds ecl-fact-figures--centered class when true.
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

HostBindings

class
Type : string

Sets the CSS classes for the component, including layout and font size modifiers. Automatically adds:

  • ecl-fact-figures--col-{n} depending on the columns value
class.ecl-fact-figures--centered
Type : any

Methods

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

Properties

items
Type : unknown
Default value : contentChildren(EclFactFiguresItemComponent, { read: ElementRef<HTMLElement> })

Accessors

cssClasses
getcssClasses()

Sets the CSS classes for the component, including layout and font size modifiers. Automatically adds:

  • ecl-fact-figures--col-{n} depending on the columns value
Returns : string
hostIsCentered
gethostIsCentered()

results matching ""

    No results matching ""