Overview
The Badge component provides options for aligning and positioning in relation to its parent container - HTML element or Angular Component.
Align
The Badge allows you to set an alignment, relative to its parent container.
The available align
values are:
{ vertical: 'top', horizontal: 'end' }
—(Default)Aligns the badge at top right corner of the container.{ vertical: 'top', horizontal: 'start' }
—Aligns the badge at top left corner of the container.{ vertical: 'bottom', horizontal: 'start' }
—Aligns the badge at bottom left corner of the container.{ vertical: 'bottom', horizontal: 'end' }
—Aligns the badge at bottom right corner of the container.
When using the Badge component without the
BadgeContainer
component, make sure the HTML element or Angular component which contains a badge has css position other thanstatic
and allowsoverflow
content.
Position
The Badge allows 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 element.inside
—The Badge is positioned entirely inside the edge of the parent container element.outside
—The Badge is positioned entirely outside the edge of the parent container element.