New to Kendo UI for Vue? Start a free 30-day trial
Kendo UI for Vue Badge Positioning
The Badge component provides options for positioning in relation to its parent container - HTML element or Vue Component.
Change Theme
Theme
Loading ...
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
staticand allowsoverflowcontent.
Change Theme
Theme
Loading ...
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.
Change Theme
Theme
Loading ...