You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
2.3 KiB
54 lines
2.3 KiB
@page "/compocounterbadge"
|
|
|
|
@rendermode RenderMode.InteractiveServer
|
|
|
|
<FluentLabel Typo="Typography.H3">CounterBadge</FluentLabel>
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
|
|
The <code>FluentCounterBadge</code> component is used to display a notification count on top of another component.
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Appearances</FluentLabel>
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
|
|
<FluentStack>
|
|
<FluentCounterBadge Count="100" Appearance="Appearance.Accent">
|
|
<FluentButton>
|
|
<FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="Color.Neutral" />
|
|
</FluentButton>
|
|
</FluentCounterBadge>
|
|
|
|
<FluentSpacer Width="25" />
|
|
<FluentCounterBadge Count="5"
|
|
Appearance="Appearance.Neutral"
|
|
HorizontalPosition="-25"
|
|
VerticalPosition="-25">
|
|
<FluentButton Appearance="Appearance.Accent">
|
|
<FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="Color.Fill" />
|
|
</FluentButton>
|
|
</FluentCounterBadge>
|
|
|
|
<FluentSpacer Width="25" />
|
|
<FluentCounterBadge Count="5"
|
|
Appearance="Appearance.Lightweight">
|
|
<FluentButton Appearance="Appearance.Accent">
|
|
<FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="Color.Fill" />
|
|
</FluentButton>
|
|
</FluentCounterBadge>
|
|
|
|
<FluentSpacer Width="25" />
|
|
<FluentCounterBadge Count="5" Appearance="Appearance.Lightweight" BackgroundColor="Color.Lightweight" Color="Color.Error">
|
|
<FluentButton Appearance="Appearance.Accent">
|
|
<FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Fill" />
|
|
</FluentButton>
|
|
</FluentCounterBadge>
|
|
|
|
<FluentSpacer Width="25" />
|
|
<FluentCounterBadge Count="9" BackgroundColor="@Color.Error" Color="Color.Fill">
|
|
<FluentButton Appearance="Appearance.Neutral">
|
|
<FluentIcon Value="@(new Icons.Regular.Size24.Mail())" Color="@Color.FillInverse" />
|
|
</FluentButton>
|
|
</FluentCounterBadge>
|
|
</FluentStack>
|
|
</FluentCard>
|
|
|
|
|
|
@code {
|
|
}
|
|
|