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) to show 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);