Peace
/
BlazorFluentUIPractice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

presence badge

Browse Source
main
Peace 10 months ago
parent 0a2f253555
commit fb8ec693c4
2 changed files with 87 additions and 3 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      BlazorFluentUI/Components/Layout/NavMenu.razor
  2. 88
      BlazorFluentUI/Components/Pages/Components/CompoPresenceBadge.razor

2
BlazorFluentUI/Components/Layout/NavMenu.razor
Unescape View File

@ -49,7 +49,7 @@
<FluentNavGroup Icon="@(new Icons.Regular.Size20.Tag())" Expanded="false" Title="Badge">
<FluentNavLink Href="compobadge" Icon="@(new Icons.Regular.Size20.Badge())" IconColor="Color.Accent">Badge</FluentNavLink>
<FluentNavLink Href="compocounterbadge" Icon="@(new Icons.Regular.Size20.NumberCircle1())" IconColor="Color.Accent">CounterBadge</FluentNavLink>
<FluentNavLink Href="compopresencebadge" Icon="@(new Icons.Regular.Size20.NumberCircle1())" IconColor="Color.Accent">PresenceBadge</FluentNavLink>
<FluentNavLink Href="compopresencebadge" Icon="@(new Icons.Regular.Size20.CheckmarkCircle())" IconColor="Color.Accent">PresenceBadge</FluentNavLink>
</FluentNavGroup>
</FluentNavGroup>

88
BlazorFluentUI/Components/Pages/Components/CompoPresenceBadge.razor
Unescape View File

@ -6,9 +6,93 @@
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
The <code>FluentPresenceBadge</code> component is used to display a status indicator such as available, away, or busy.
<FluentLabel class="my-3" Typo="Typography.H4">Appearances</FluentLabel>
<FluentLabel class="my-3" Typo="Typography.H4">Available Size</FluentLabel>
<p>
A presence badge supports <code>Tiny</code>, <code>ExtraSmall</code>, <code>Small</code>, <code>Medium</code>, and <code>Large</code> size.
The default size is , <code>Small</code>.
</p>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<FluentStack VerticalAlignment="VerticalAlignment.Bottom">
<FluentPresenceBadge Status="PresenceStatus.Available" Size="PresenceBadgeSize.Tiny">
<FluentIcon Value="@(new Icons.Regular.Size24.Person())" Width="24px"/>
</FluentPresenceBadge>
<FluentSpacer Width="25" />
<FluentPresenceBadge Status="PresenceStatus.Available" Size="PresenceBadgeSize.ExtraSmall">
<FluentIcon Value="@(new Icons.Regular.Size24.Person())" Width="32px" />
</FluentPresenceBadge>
<FluentSpacer Width="25" />
<FluentPresenceBadge Status="PresenceStatus.Available" Size="PresenceBadgeSize.Small">
<FluentIcon Value="@(new Icons.Regular.Size24.Person())" Width="36px" />
</FluentPresenceBadge>
<FluentSpacer Width="25" />
<FluentPresenceBadge Status="PresenceStatus.Available" Size="PresenceBadgeSize.Medium">
<FluentIcon Value="@(new Icons.Regular.Size24.Person())" Width="48px" />
</FluentPresenceBadge>
<FluentSpacer Width="25" />
<FluentPresenceBadge Status="PresenceStatus.Available" Size="PresenceBadgeSize.Large">
<FluentIcon Value="@(new Icons.Regular.Size24.Person())" Width="64px" />
</FluentPresenceBadge>
</FluentStack>
</FluentCard>
<style>
.face {
width:32px;
height:32px;
border:1px solid silver;
}
</style>
<FluentLabel class="my-3" Typo="Typography.H4">Default options</FluentLabel>
<p>
A presence badge supports <code>Available</code>, <code>Away</code>, <code>Busy</code>, <code>DoNotDisturb</code>, <code>Offline</code>, <code>OutOfOffice </code>, and <code>Unknown </code> status.
The default status is , <code>Available</code>.
</p>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<FluentStack VerticalAlignment="VerticalAlignment.Bottom">
<FluentPresenceBadge Status="PresenceStatus.Available">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" class="face" />
</FluentPresenceBadge>
<FluentSpacer Width="25" />
<FluentPresenceBadge Status="PresenceStatus.Away">
<img src="https://randomuser.me/api/portraits/lego/2.jpg" class="face" />
</FluentPresenceBadge>
<FluentSpacer Width="25" />
<FluentPresenceBadge Status="PresenceStatus.Busy">
<img src="https://randomuser.me/api/portraits/lego/3.jpg" class="face" />
</FluentPresenceBadge>
<FluentSpacer Width="25" />
<FluentPresenceBadge Status="PresenceStatus.DoNotDisturb">
<img src="https://randomuser.me/api/portraits/lego/4.jpg" class="face" />
</FluentPresenceBadge>
<FluentSpacer Width="25" />
<FluentPresenceBadge Status="PresenceStatus.Offline">
<img src="https://randomuser.me/api/portraits/lego/5.jpg" class="face" />
</FluentPresenceBadge>
<FluentSpacer Width="25" />
<FluentPresenceBadge Status="PresenceStatus.OutOfOffice">
<img src="https://randomuser.me/api/portraits/lego/6.jpg" class="face" />
</FluentPresenceBadge>
<FluentSpacer Width="25" />
<FluentPresenceBadge Status="PresenceStatus.Unknown">
<img src="https://randomuser.me/api/portraits/lego/7.jpg" class="face" />
</FluentPresenceBadge>
<FluentSpacer Width="25" />
<FluentPresenceBadge Title="No status defined">
<img src="https://randomuser.me/api/portraits/lego/8.jpg" class="face" />
</FluentPresenceBadge>
</FluentStack>
</FluentCard>
@code {

Write Preview
Loading…
Cancel
Save