fluentui-blazor icon indicating copy to clipboard operation
fluentui-blazor copied to clipboard

feat: Provide fragment to extend Profile Menu Button

Open StephenOTT opened this issue 1 year ago • 5 comments

Consider the azure admin portal, where a similar Profile Menu is shown but with additional contextual info (the current username/email/ID and tenant) to the left of the profile menu button.

Would be good to have the ability to add a fragment to the left/right of the profile menu and have the clickable area be part of the extended fragment.

StephenOTT avatar Apr 22 '24 20:04 StephenOTT

You can do that using a code like this:

<FluentStack VerticalAlignment="VerticalAlignment.Center">
    <div>
        <FluentLabel Style="font-size: 11px; line-height: 14px;">Denis Voituron</FluentLabel>
        <FluentLabel Style="font-size: 11px; line-height: 14px;">Microsoft</FluentLabel>
    </div>
    <FluentProfileMenu Image="@DataSource.ImageFaces[3]"
                        Status="@PresenceStatus.Available"
                        TopCorner="true"
                        Initials="OS"
                        FullName="Olivia Smith"
                        EMail="[email protected]"
                        Style="min-width: 330px;">
                        <HeaderTemplate><FluentLabel Typo="Typography.Body">My Company Corp</FluentLabel></HeaderTemplate>
                        <FooterTemplate></FooterTemplate>
    </FluentProfileMenu>
</FluentStack>

image

dvoituron avatar Apr 23 '24 07:04 dvoituron

@dvoituron agreed that is an option. What i was looking for was to wrap the "Denis" text into the clickable area. So the user could click on the Profile head or the text (similar to azure admin ui)

But your code is very applicable/a very viable option

StephenOTT avatar Apr 24 '24 14:04 StephenOTT

Could be a nice option to add some parameter like DisplayTemplate (of type RenderFragment?) with wich you can define what is shown in front of the image.

Seems like somthing that could be done with a community contribution. Any takers?

vnbaaij avatar Apr 26 '24 14:04 vnbaaij

besides the DisplayTemplate parameter, there could be an option to select the content's position. This would allow content to be rendered left or right of the image, maybe at the top or bottom, too.

ID-JA avatar May 03 '24 22:05 ID-JA

See #2010

dvoituron avatar May 04 '24 14:05 dvoituron

Fixed with PR mentioned above

vnbaaij avatar May 16 '24 21:05 vnbaaij