@talenra/components documentation
  1. Components
  2. OverlayBadgeComponent

File

badge/src/overlay-badge/overlay-badge.component.ts

Description

Developer Preview: Wrapper to add a Badge to an Icon or Button component.

If you're looking for a Badge-only component, check the Badge component.

Example :
<!-- Icon with Overlay Badge -->
<talenra-overlay-badge [counter]="myCounter()">
  <talenra-icon name="more-vert" />
</talenra-overlay-badge>

<!-- Button with Overlay Badge -->
<talenra-overlay-badge [counter]="myCounter()">
  <button talenra-button label="My Label"></button>
</talenra-overlay-badge>

Import

Example :
import { OverlayBadgeComponent } from '@talenra/components/badge';

See BadgeComponent

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector talenra-overlay-badge
imports BadgeComponent
templateUrl ./overlay-badge.component.html
styleUrl ./overlay-badge.component.scss

Index

Inputs

Inputs

counter
Type : number, unknown
Required :  true
Default value : { transform: numberAttribute }

The actual counter value
maxVal
Type : unknown

The maximum value to display. If the actual value is greater than the max value, the max value will be displayed followed by a plus sign.

results matching ""

    No results matching ""