-
Notifications
You must be signed in to change notification settings - Fork 377
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[FluentProfileMenu] New component (#1705)
- Loading branch information
Showing
13 changed files
with
542 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
examples/Demo/Shared/Pages/ProfileMenu/Examples/ProfileMenuCustomized.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <FluentStack HorizontalAlignment="@HorizontalAlignment.Center" | ||
| VerticalAlignment="@VerticalAlignment.Center" | ||
| Style="height: 48px; background: var(--neutral-layer-4);"> | ||
| <FluentProfileMenu Initials="BG"> | ||
| <HeaderTemplate> | ||
| <FluentLabel Typo="@Typography.Header">Login</FluentLabel> | ||
| </HeaderTemplate> | ||
| <ChildContent> | ||
| <div style="width: 250px; height: 80px"> | ||
| <FluentLabel Typo="@Typography.Header" Style="font-weight: bold;">Bill Gates</FluentLabel> | ||
| <FluentLabel>bill.gates@microsoft.com</FluentLabel> | ||
| </div> | ||
| </ChildContent> | ||
| <FooterTemplate> | ||
| <FluentStack> | ||
| <FluentSpacer /> | ||
| <FluentAnchor Appearance="@Appearance.Hypertext" | ||
| Href="https://microsoft.com" | ||
| Target="_blank">About</FluentAnchor> | ||
| </FluentStack> | ||
| </FooterTemplate> | ||
| </FluentProfileMenu> | ||
| </FluentStack> |
11 changes: 11 additions & 0 deletions
11
examples/Demo/Shared/Pages/ProfileMenu/Examples/ProfileMenuDefault.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <FluentStack HorizontalAlignment="@HorizontalAlignment.Center" | ||
| VerticalAlignment="@VerticalAlignment.Center" | ||
| Style="height: 48px; background: var(--neutral-layer-4);"> | ||
| <FluentProfileMenu Image="@DataSource.SamplePicture" | ||
| Status="@PresenceStatus.Available" | ||
| HeaderLabel="Microsoft" | ||
| Initials="BG" | ||
| FullName="Bill Gates" | ||
| EMail="[email protected]" | ||
| Style="min-width: 330px;" /> | ||
| </FluentStack> |
20 changes: 20 additions & 0 deletions
20
examples/Demo/Shared/Pages/ProfileMenu/ProfileMenuPage.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| @page "/ProfileMenu" | ||
|
|
||
| @using FluentUI.Demo.Shared.Pages.ProfileMenu.Examples | ||
|
|
||
| <h1>ProfileMenu</h1> | ||
|
|
||
| <p> | ||
| A "User Profile Menu" is a component commonly found on websites or applications. | ||
| It typically appears in the top-right corner of a web page and provides options related to | ||
| the user's account. Within this menu, users can access features such as viewing their account details, | ||
| adjusting settings, and logging out. It serves as a convenient hub for managing account-related actions. | ||
| </p> | ||
|
|
||
| <DemoSection Title="Default" Component="typeof(ProfileMenuDefault)"></DemoSection> | ||
|
|
||
| <DemoSection Title="Customized" Component="typeof(ProfileMenuCustomized)"></DemoSection> | ||
|
|
||
| <h2 id="documentation">Documentation</h2> | ||
|
|
||
| <ApiDocumentation Component="typeof(FluentProfileMenu)" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| @namespace Microsoft.FluentUI.AspNetCore.Components | ||
| @inherits FluentComponentBase | ||
|
|
||
| <div class="fluent-profile-menu"> | ||
| <FluentPersona Id="@Id" | ||
| Image="@Image" | ||
| Name="@FullName" | ||
| ImageSize="@ButtonSize" | ||
| Status="@Status" | ||
| StatusTitle="@StatusTitle" | ||
| Initials="@Initials" | ||
| Style="height: inherit;" | ||
| OnClick="@(e => PopoverVisible = !PopoverVisible)" /> | ||
|
|
||
| <FluentPopover AnchorId="@Id" | ||
| Class="@Class" | ||
| Style="@Style" | ||
| HorizontalPosition="@HorizontalPosition.Start" | ||
| @bind-Open="@PopoverVisible" | ||
| @attributes="@AdditionalAttributes"> | ||
| <Header> | ||
| @if (HeaderTemplate is null && (!string.IsNullOrEmpty(HeaderLabel) || !string.IsNullOrEmpty(HeaderButton))) | ||
| { | ||
| <FluentStack VerticalAlignment="@VerticalAlignment.Center"> | ||
| @if (!string.IsNullOrEmpty(HeaderLabel)) | ||
| { | ||
| <FluentLabel part="header-label">@HeaderLabel</FluentLabel> | ||
| } | ||
| @if (!string.IsNullOrEmpty(HeaderButton)) | ||
| { | ||
| <FluentSpacer /> | ||
| <FluentButton part="header-button" Appearance="@Appearance.Stealth" OnClick="@OnHeaderButtonClick">@HeaderButton</FluentButton> | ||
| } | ||
| </FluentStack> | ||
| } | ||
| else | ||
| { | ||
| @HeaderTemplate | ||
| } | ||
| </Header> | ||
|
|
||
| <Body> | ||
| @if (ChildContent is null) | ||
| { | ||
| <FluentStack Style="height: 100%;"> | ||
| <FluentPersona Image="@Image" | ||
| ImageSize="@ImageSize" | ||
| Initials="@Initials" | ||
| Style="align-items: normal;"> | ||
| <FluentLabel part="fullname" Typo="@Typography.Header" Style="font-weight: bold;">@FullName</FluentLabel> | ||
| <FluentLabel part="email">@EMail</FluentLabel> | ||
| </FluentPersona> | ||
|
|
||
| </FluentStack> | ||
| } | ||
| else | ||
| { | ||
| @ChildContent | ||
| } | ||
| </Body> | ||
|
|
||
| <Footer> | ||
| @if (FooterTemplate is null && !string.IsNullOrEmpty(FooterLink)) | ||
| { | ||
| <FluentStack VerticalAlignment="@VerticalAlignment.Center"> | ||
| @if (!string.IsNullOrEmpty(FooterLabel)) | ||
| { | ||
| <FluentLabel part="footer-label">@FooterLabel</FluentLabel> | ||
| } | ||
| @if (!string.IsNullOrEmpty(FooterLink)) | ||
| { | ||
| <FluentSpacer /> | ||
| <FluentAnchor part="footer-link" Appearance="@Appearance.Hypertext" Href="#" OnClick="@OnFooterLinkClick">@FooterLink</FluentAnchor> | ||
| } | ||
| </FluentStack> | ||
| } | ||
| else | ||
| { | ||
| @FooterTemplate | ||
| } | ||
| </Footer> | ||
| </FluentPopover> | ||
| </div> |
Oops, something went wrong.