Badge Module

Component

With the badge you can mark or highlight an element with a special meaning. A obvious example is the 'Coming soon' badge in the evalink marketplace.

optional @Input() position: BadgePosition, Default BadgePosition.TopLeft

The parent element needs to be set toposition: relative.

Examples with the different position of the evalink-badge

Example

Import the CauseBadgeModule into the desired module as demonstrated in the following example:

some.module.ts

...
import { SomeComponent } from './some.component';
//Import from evalink cause
import { CauseBadgeModule } from '@evalink/cause';
...

@NgModule({
  declarations: [
   SomeComponent
  ],
  imports: [
    ...
    CauseCardModule,
    // Import the CauseBadgeModule into the module 
    CauseBadgeModule,
    ...
  ]
})
export class SomeModule {}

some.component.ts

<cause-card class="relative">
    <cause-badge>Coming soon</cause-badge>
    ...
</cause-card>

Enums

BadgePosition

export enum BadgePosition {
  TopLeft = 'cause-badge--top-left',
  TopRight = 'cause-badge--top-right',
  BottomLeft = 'cause-badge--bottom-left',
  BottomRight = 'cause-badge--bottom-right',
}