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.

Copy Code<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.

Suggested Links

• API Reference of the BadgeContainer
• API Reference of the BadgeContainerProps
• API Reference of the Badge
• API Reference of the BadgeProps