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 of NotificationBadge:

• 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 greather than zero. When NotificationCount goes to zero the badge disappear. If NotificationCount is grather than the value of MaxNotifications then the Badge 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:

The Badges in this example are defined (in .dfm) with those properties:

        object btn_IconDots: TStyledButton
          ....
          NotificationBadge.CustomText = '!'
          ....
        end
        object btn_IconHome: TStyledButton
          ....
          NotificationBadge.Color = clFuchsia
          NotificationBadge.NotificationCount = 100
          ....
        end
        object btn_IconMenu: TStyledButton
          ....
          NotificationBadge.NotificationCount = 5
          NotificationBadge.Size = nbsSmallDot
          ....
        end
        object btn_IconHeart: TStyledButton
          ....
          NotificationBadge.Color = clOlive
          NotificationBadge.NotificationCount = 12
          ....
        object btn_trash: TStyledButton
          ....
          NotificationBadge.Color = clTeal
          NotificationBadge.NotificationCount = 5
          ....
        end

Notice that Home Icon shows 99+ because the MaxNotifications default value is 99, and value of 100 in NotificationBadge.NotificationCount is greather than this value: if you want to show 100 you must change also MaxNotifications to a grather value (eg. 999).

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.

Events of NotificationBadge:

When a value is assigned to NotificationCount or CustomText the event-handler "NotificationBadge.OnContentChange" of the button is called.

Details of TNotificationBadgePosition and TNotificationBadgeSize:

You can position then Badge in any "angle" of the button.

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