CounterBadge
The FluentCounterBadge component is used to display a notification count on top of another component.
Examples
Appearances
First example: A "+" can be shown after the Count when its value is larger than the set Max value. To achieve this,
set the ShowOverflow parameter to true (which is the default).
Second example: The HorizontalPosition and VerticalPosition parameters (int, used as a percentage) can be used to
position the counter badge. The default values for both are 50(%). It is possible to supply negative values as is shown in this example.
Last example: When the Dot parameter is set to 'true', the Count will be ignored. Just a dot will be displayed.
Dot
Dot parameter is set to 'true', the Count will be ignored. Just a dot will be displayed.
Conditions
The counter badge will, by default, not be shown when the Count equals 0. It is possible to control the
conditions when the counter will be shown on the badge by using the ShowWhen parameter. By default, the counter will not
be shown when the Count value equals 0 (first example). Several examples are shown here.
- Parameters:
Count="0",ShowWhennot specified. Result: - Parameters:
Count="0",ShowWhen="@(Count => Count >= 0)". Result: - 0
- Parameters:
Count="-4",ShowWhen="@(Count => Count <= 0)". Result: - -4
- Parameters:
Count="-4",ShowWhen="@(Count => Count > 3)". Result: - Parameters:
Count="4",ShowWhen="@(Count => Count > 3)". Result: - 4
Specific content
The BadgeTemplate parameter can be used to display specific content on the badge. The Count value
is available within the template through the @context parameter.
Documentation
FluentCounterBadge Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Appearance | Appearance? | Accent | Gets or sets the default design of this badge using colors from theme. |
BackgroundColor | Color? | Gets or sets the background color to replace the color inferred from property. | |
BadgeContent | RenderFragment? | Gets or sets the content you want inside the badge, to customize the badge content. | |
BadgeTemplate | RenderFragment<int?>? | Gets or sets the content you want inside the badge, to customize the badge content. | |
BottomPosition | int | 60 | Gets or sets the bottom position of the badge in percentage. [Obsolete] This parameter will be removed in a future version. Use VerticalPosition instead. Default value is 60 (80 when Dot=true). |
ChildContent | RenderFragment? | Gets or sets the child content of component, the content that the badge will apply to. | |
Color | Color? | Gets or sets the font color to replace the color inferred from property. | |
Count | int? | Gets or sets the number displayed inside the badge. Can be enriched with a plus sign with FluentCounterBadge.ShowOverflow | |
Dot | bool | False | Gets or sets if just a dot should be displayed. Count will be ignored if this is set to true. Defaults to false. |
HorizontalPosition | int? | Gets or sets the horizontal position of the badge in percentage in relation to the left of the container (right in RTL). Default value is 60 (80 when Dot=true). | |
Max | int? | 99 | Gets or sets the maximum number that can be displayed inside the badge. Default is 99. |
ShowOverflow | bool | True | If an plus sign should be displayed when the FluentCounterBadge.Count is greater than FluentCounterBadge.Max.Defaults to true. |
ShowWhen | Func<int?, bool> | Gets or sets if the counter badge is displayed based on the specified lambda expression. For example to show the badge when the count greater than 4, use ShowWhen=@(Count => Count > 4) Default the badge shows when the count is greater than 0. | |
ShowZero | bool | False | If the counter badge should be displayed when the count is zero. Defaults to false. [Obsolete] This parameter will be removed in a future version. Use ShowWhen with a lambda expression instead For getting the same behavior as before, you can use ShowWhen='@(Count => Count >= 0)' |
VerticalPosition | int? | Gets or sets the vertical position of the badge in percentage in relation to the bottom of the container. Default value is 60 (80 when Dot=true). |