eui documentation
  1. Components
  2. EclAnimatedNumbersComponent

File

packages/ecl/components/ecl-animated-numbers/ecl-animated-numbers.component.ts

Description

Container component for the ECL Animated Numbers pattern. Wraps animated number items and an optional sources footer.

Example :
<div eclAnimatedNumbers [sourcesLabel]="'Sources:'">
    <div eclAnimatedNumbersItems>
        <div eclAnimatedNumbersItem [eclValue]="'213'" [category]="'Revenue'">
            <ecl-icon eclAnimatedNumbersIcon icon="users" iconSet="phosphor"></ecl-icon>
        </div>
    </div>
    <ul eclAnimatedNumbersSourcesList>
        <li eclAnimatedNumbersSourcesItem>
            <a eclLink eclAnimatedNumbersSource href="/example">Eurostat</a>
        </li>
    </ul>
</div>

Extends

ECLBaseDirective

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector div[eclAnimatedNumbers]
templateUrl ./ecl-animated-numbers.component.html

Index

Methods
Inputs
Accessors

Inputs

hasContentColor
Default value : false, { transform: booleanAttribute }

Applies a colour to the counter values.
hasDarkBackground
Default value : false, { transform: booleanAttribute }

Applies a dark background to the component.
hasLeftBorder
Default value : false, { transform: booleanAttribute }

Adds a left border to the animated number items.
sourcesLabel
Type : string
Default value : 'Sources:'

Label displayed before the sources list.
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

Methods

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

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""