Notification Badge guide

Notification Badge

Badges show notifications, counts, or status information on navigation items and icons.

For any StyledButtons there is a "sub-component property" called "NotificationBadge".

Properties:

NotificationCount (Integer): by default is 0: badge is not visible

MaxNotifications (Word): by default is 99

CustomText (string): by default is empty

Position (TNotificationBadgePosition): by default is nbpTopRight

Size (TNotificationBadgeSize): by default is nbsNormal

Color (TColor): by default is clRed

FontColor (TColor): by default is clWhite

By default the Badge appear automatically assigning a Value to NotificationCount geather than zero. When NotificationCount goes to zero the badge disappear. If NotificationCount is grather than the value of MaxNotifications then the Text shows MaxNotifications plus "+" (eg. "99+")

If you want to show '0' or any other custom Text, use the CustomText property: in this case the NotificationCount value is not used.

Setting Size as nbsSmallDot the badge appears only as a small dot without text.

In this picture you can see different Badges:

Color and FontColor as used to paint the Badge and his text. Notice that the Font Size used is the same Font Size of the Button.

Details of TNotificationBadgePosition and TNotificationBadgeSize:

Type
  TNotificationBadgePosition = (nbpTopRight, nbpTopLeft, nbpBottomRight, nbpBottomLeft);
  TNotificationBadgeSize = (nbsNormal, nbsSmallDot);