Skip to content

Commit 2afbf3c

Browse files
vnbaaijvnbaaij
authored
Add FluentCounterBadge (#3412)
1 parent 2c695a8 commit 2afbf3c

File tree

29 files changed

+575
-3
lines changed

29 files changed

+575
-3
lines changed

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/CounterBadge/Examples/CounterBadgeAppearances.razor

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<FluentCounterBadge Appearance="BadgeAppearance.Filled" Count="5" />
2+
<FluentCounterBadge Appearance="BadgeAppearance.Ghost" Count="3" />
3+

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/CounterBadge/Examples/CounterBadgeColors.razor

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<FluentCounterBadge Count="1" Color="BadgeColor.Brand">brand</FluentCounterBadge>
2+
<FluentCounterBadge Count="2" Color="BadgeColor.Danger">danger</FluentCounterBadge>
3+
<FluentCounterBadge Count="3" Color="BadgeColor.Important">important</FluentCounterBadge>
4+
<FluentCounterBadge Count="4" Color="BadgeColor.Informative">informative</FluentCounterBadge>
5+
<FluentCounterBadge Count="5" Color="BadgeColor.Severe">severe</FluentCounterBadge>
6+
<FluentCounterBadge Count="6" Color="BadgeColor.Subtle">subtle</FluentCounterBadge>
7+
<FluentCounterBadge Count="7" Color="BadgeColor.Success">success</FluentCounterBadge>
8+
<FluentCounterBadge Count="8" Color="BadgeColor.Warning">warning</FluentCounterBadge>
9+
<FluentCounterBadge Count="9" Color="null" BackgroundColor="mediumpurple">background</FluentCounterBadge>
10+
11+

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/CounterBadge/Examples/CounterBadgeDefault.razor

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<FluentCounterBadge />
2+
<FluentCounterBadge Count="8" />
3+
<FluentCounterBadge Count="100" />

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/CounterBadge/Examples/CounterBadgeDot.razor

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<FluentCounterBadge Dot="true" />

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/CounterBadge/Examples/CounterBadgeIcons.razor

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<FluentCounterBadge Count="2" IconStart="@(new Icons.Regular.Size16.Globe())">Badge</FluentCounterBadge>
2+
3+
<FluentCounterBadge Count="4" Color="BadgeColor.Informative" IconEnd="@(new Icons.Regular.Size16.Globe())" IconLabel="A globe" >Badge</FluentCounterBadge>

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/CounterBadge/Examples/CounterBadgeShapes.razor

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<FluentCounterBadge Shape="BadgeShape.Circular" />
2+
<FluentCounterBadge Shape="BadgeShape.Rounded" />
3+

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/CounterBadge/Examples/CounterBadgeShowWhen.razor

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<FluentCounterBadge Count="3" ShowWhen="@(c => c > 4)" />
2+
<FluentCounterBadge Count="5" ShowWhen="@(c => c > 4)" />

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/CounterBadge/Examples/CounterBadgeShowZero.razor

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<FluentCounterBadge ShowZero="true" />

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/CounterBadge/Examples/CounterBadgeSizes.razor

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<FluentCounterBadge Count="3" Size="BadgeSize.Tiny" />
2+
<FluentCounterBadge Count="3" Size="BadgeSize.ExtraSmall" />
3+
<FluentCounterBadge Count="3" Size="BadgeSize.Small" />
4+
<FluentCounterBadge Count="3" Size="BadgeSize.Medium" />
5+
<FluentCounterBadge Count="3" Size="BadgeSize.Large" />
6+
<FluentCounterBadge Count="3" Size="BadgeSize.ExtraLarge" />

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/CounterBadge/FluentCounterBadge.md

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
title: CounterBadge
3+
route: /CounterBadge
4+
---
5+
6+
# CouterBadge
7+
8+
The `CounterBadge` component is a visual indicator that communicates a numerical count.
9+
It uses numbers, color, and icons for quick recognition and is placed near the relavant content.
10+
11+
## Best practices
12+
13+
The same principles that apply to [badges](/Badge) apply to `CounterBadge` as well.
14+
15+
### Numbers on Badge
16+
CounterBadges are intented to have short, small numerical values or status information. An `OverflowCount` can be set as the maximum number that is shown in the CounterBadge.
17+
It will add a `+` sign to the end of the number to indacate that the number is larger than the `OverflowCount`.
18+
19+
### Content
20+
21+
The CounterBadge does not have a content slot. It can only show a count (through the `Count` parameter) If you need to add content, you can use the `Badge` component.
22+
23+
## Default
24+
25+
- First example shows an empty counter badge.
26+
- Second example shows a counter badge with a count.
27+
- Third example shows a count higher than the overflow (default is 99)
28+
29+
{{ CounterBadgeDefault }}
30+
31+
## ShowZero
32+
A counter badge can be shown even if the count is zero.
33+
34+
{{ CounterBadgeShowZero }}
35+
36+
## ShowWhen
37+
A counter badge can be shown when a specific condition (lambda expression) is met.
38+
For instance, `ShowWhen=@(c => c > 4)` will show the badge only when the count is greater than 4.
39+
40+
- First example `Count="3"`. With rule set like above it will not show
41+
- Second example `Count="5"`. With rule set like above it will show
42+
43+
{{ CounterBadgeShowWhen }}
44+
45+
## Dot
46+
A counter badge can be shown as a dot. This can be used, for example, to indicate there are new items but the actual number is not really important.
47+
48+
{{ CounterBadgeDot }}
49+
50+
## Colors
51+
52+
The counter badge colors be set to a value from the `BadgeColor` enumeration. The last badge shows how a custom background color can be used.
53+
54+
{{ CounterBadgeColors }}
55+
56+
## Icons
57+
An `Icon` can be shown in the start or end slot (or both). The color of the icon is coupled to the color of the text in the badge.
58+
59+
{{ CounterBadgeIcons }}
60+
61+
## Appearance
62+
63+
The counter badge appearance can be set to a value from the `BadgeAppearance` enumeration.
64+
**CounterBadge does not support Ghost and Tint appearances**.
65+
66+
{{ CounterBadgeAppearances }}
67+
68+
## Shape
69+
The counter shape can be set to a value from the `BadgeShape` enumeration.
70+
**CounterBadge does not support the Square shape**.
71+
72+
{{ CounterBadgeShapes }}
73+
74+
## Size
75+
The counter badge size be set to a value from the `BadgeSize` enumeration.
76+
77+
{{ CounterBadgeSizes }}
78+
79+
## API FluentButton
80+
81+
{{ API Type=FluentCounterBadge }}
82+
83+
## Migrating to v5
84+
85+
{{ INCLUDE File=MigrationFluentCounterBadge }}

0 commit comments

Comments
 (0)