New to Kendo UI for Vue? Start a free 30-day trial

Kendo UI for Vue Badge Container

The BadgeContainer component provides an alternative approach for defining a badge in the Kendo UI for Vue Native suite. Below you can find a basic BadgeContainer definition that uses a Slot template to define the content of the badge.

jsx

<BadgeContainer
  :content="'content'"
  :align="{
    vertical: 'bottom',
    horizontal: 'end',
  }"
  :theme-color="'dark'"
>
  <SvgIcon :icon="copyIcon" style="width: 36px; color: #4eb9ed" />
  <template v-slot:content> 11 </template>
</BadgeContainer>

The following example demonstrates the definition of the same badges using the both Badge and BadgeContainer approaches side by side.

Change Theme

Theme

Loading ...

Kendo UI for Vue Badge Container

Suggested Links