The uxBadge directive can be added to any element to provide additional information
as a badge, such as status text or unread count.
Note: the badge directive relies on the CSS overflow property being set to
visible for the subject element due to how the badge element attaches to it. If you
want to use hidden, you will need to add a wrapper element around the subject so it
only affects the contents.
The appearance and behavior of the directive can be configured using the following properties:
The value to display in the badge.
The color you want to use for the background color. This can be a color name from the
color palette, or a CSS Hex/RGB/RGBA value.
The color you want to use for the border of the badge. If this value is not set the badge will
have a transparent border. This can be a color name from the
color palette, or a CSS Hex/RGB/RGBA value.
Sets a character or number limit on the content within the badge. If the content is a number and
larger than this value it will display this value with an appended
+, otherwise the content will be treated as text and use this value to truncate the number of
characters displayed followed by an ellipsis (…).
The vertical position of the badge in relation to its subject element.
The horizontal position of the badge in relation to its subject element.
This will determine whether the badge content will overlap its subject element. If overlap is
false
the badge will start after the end of the subject element, otherwise if it is set to
true
the badge horizontal center will be at the end of its subject element.
The size of the badge.
Whether the badge is visible.
The following code can be used to create the example above: