BlazorFluentUIPractice/BlazorFluentUI/Components/Pages/Components/CompoMunuButton.razor

@page "/compomenubutton"
@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens

@inject AccentBaseColor AccentBaseColor

@rendermode RenderMode.InteractiveServer

<FluentLabel Typo="Typography.H3">MenuButton</FluentLabel>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
The <code>FluentMenuButton</code> component used to trigger a menu.
Menu items can be supplied by both an <code>Items</code> parameter as well as manually as the <code>ChildContent</code>.

<FluentLabel class="my-3" Typo="Typography.H4">Default</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
    <FluentMenuButton Text="Select brand color" Items="@items" OnMenuChanged="@OnDMenuChanged"/>
    <p><b>Message</b>: @dmessage?.ToString()</p>
</FluentCard>

<FluentLabel class="my-3" Typo="Typography.H4">Appearances</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
    <FluentStack Orientation="Orientation.Vertical">
        <p>Neutral</p>
        <FluentMenuButton Text="Select brand color" Items="@items" ButtonAppearance="@Appearance.Neutral" />
        <p>Accent</p>
        <FluentMenuButton Text="Select brand color" Items="@items" ButtonAppearance="@Appearance.Accent" />
        <p>Lightweight</p>
        <FluentMenuButton Text="Select brand color" Items="@items" ButtonAppearance="@Appearance.Lightweight" />
        <p>Outline</p>
        <FluentMenuButton Text="Select brand color" Items="@items" ButtonAppearance="@Appearance.Outline" />
        <p>Stealth</p>
        <FluentMenuButton Text="Select brand color" Items="@items" ButtonAppearance="@Appearance.Stealth" />
    </FluentStack>
</FluentCard>

@code {
    Dictionary<string, string> items = new Dictionary<string, string>()
    {
        {"0078D4","Windows"},
        {"D83B01","Office"},
        {"464EB8","Teams"},
        {"107C10","Xbox"},
        {"8661C5","Visual Studio"},
        {"F2C811","Power BI"},
        {"0066FF","Power Automate"},
        {"742774","Power Apps"},
        {"0B556A","Power Virtual Agents"}
    };

    string dmessage = string.Empty;
    void OnDMenuChanged(MenuChangeEventArgs args)
    {
        dmessage = $"Id: #{args.Id}, Value: {args.Value}";
    }
}