microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.3k stars 305 forks source link

feat: Provide fragment to extend Profile Menu Button #1910

Closed StephenOTT closed 2 weeks ago

StephenOTT commented 1 month ago

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.

dvoituron commented 1 month ago

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="sam@my-company.com"
                        Style="min-width: 330px;">
                        <HeaderTemplate><FluentLabel Typo="Typography.Body">My Company Corp</FluentLabel></HeaderTemplate>
                        <FooterTemplate></FooterTemplate>
    </FluentProfileMenu>
</FluentStack>

image

StephenOTT commented 1 month ago

@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

vnbaaij commented 1 month ago

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?

ID-JA commented 4 weeks ago

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.

dvoituron commented 4 weeks ago

See #2010

vnbaaij commented 2 weeks ago

Fixed with PR mentioned above