packages/ecl/components/ecl-link/ecl-link.directive.ts
'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.
| Selector | [eclLink] |
Properties |
Methods |
Inputs |
HostBindings |
Accessors |
constructor()
|
| extraAttributes |
Type : { name: string; value?: string | null }[] | undefined
|
|
Additional HTML attributes to be set on the link element. Used e.g. by social-media-follow for passing extra_attributes. |
| isHighlight |
Default value : false, { transform: booleanAttribute }
|
|
Adds class for hightlighted link (works only with 'primary' variant) |
| isIconOnly |
Default value : false, { transform: booleanAttribute }
|
|
Property to style the component if it consist only of an icon. |
| isInverted |
Default value : false, { transform: booleanAttribute }
|
|
Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant. |
| isNoVisited |
Default value : false, { transform: booleanAttribute }
|
| variant |
Type : "standalone" | "primary" | "secondary" | "primary-neutral" | "primary-highlight"
|
|
With 'variant' property user can add some more specific styling to the component. |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| class |
Type : string
|
|
Adds speific ECL classes to the component. |
| class.ecl-link--icon |
Type : any
|
Default value : computed(() => {
return this.eclIconComponents()?.length > 0 && !this.isIconOnly();
})
|
| class.ecl-link--icon-only |
Type : boolean
|
| class.ecl-link--inverted |
Type : boolean
|
| onBlur |
onBlur()
|
|
Calls the native blur() method of the default HTML element.
Returns :
void
|
| onClick |
onClick()
|
|
Calls the native click() method of the default HTML element.
Returns :
void
|
| onFocus |
onFocus()
|
|
Calls the native focus() method of the default HTML element.
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| cd |
Type : unknown
|
Default value : inject(ChangeDetectorRef)
|
| eclIconComponents |
Type : unknown
|
Default value : contentChildren(forwardRef(() => EclIconComponent), { descendants: true })
|
| el |
Type : unknown
|
Default value : inject(ElementRef)
|
| hasIcon |
Type : unknown
|
Default value : computed(() => {
return this.eclIconComponents()?.length > 0 && !this.isIconOnly();
})
|
Decorators :
@HostBinding('class.ecl-link--icon')
|
| renderer |
Type : unknown
|
Default value : inject(Renderer2)
|
| hostIsInverted |
gethostIsInverted()
|
| hostIsIconOnly |
gethostIsIconOnly()
|
| cssClasses |
getcssClasses()
|
|
Adds speific ECL classes to the component.
Returns :
string
|