Closed StephenOTT closed 2 weeks 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>
@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
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?
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.
See #2010
Fixed with PR mentioned above
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.