Kendo UI for Vue Badge Positioning

The Badge component provides options for positioning in relation to its parent container - HTML element or Vue Component.

Alignment

The Badge and BadgeContainer allows you to set different alignments relative to its parent container.

The available align keys are:

• horizontal— Defines the possible horizontal alignment of the Badge.
  • start—Uses the start point of the parent element.
  • end(Default)—Uses the end point of the parent element.
• vertical— Defines the possible vertical alignment of the Badge.
  • top(Default)—Uses the top point of the parent element.
  • bottom—Uses the bottom point of the parent element.

When using the Badge component, make sure the HTML element or Vue component that contains a badge has css position other than static and allows overflow content.

Position

The Badge and BadgeContainer allow you to specify the position of the badge relative to the edge of its parent container.

The available position values are:

• edge—(Default)The center of the badge is positioned on the edge of the parent container.
• inside—The badge is positioned entirely inside the parent container.
• outside—The badge is positioned entirely outside the parent container.

Suggested Links

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