FluentMenu — the same
FluentMenuButton/FluentMenuList pattern as the account menu on the
Navigation page — instead of the native
<FluentSelect>, giving full control over each option's markup.
FluentMenuItem nests its
children in its own MenuItems content, which flies out as a submenu —
no separate tree component required.
<FluentTextInput @bind-Value="text" Label="Material name" Placeholder="Enter name…" />
<FluentDatePicker @bind-Value="date" Label="Need-by date" />
<FluentNumberInput @bind-Value="qty" Label="Quantity" Min="0" Step="1">
<EndTemplate><FluentText>pcs</FluentText></EndTemplate>
</FluentNumberInput>
<!-- Dropdown, built from FluentMenu instead of FluentSelect: -->
<FluentMenu>
<FluentMenuButton><ChildContent>@selected.Label</ChildContent></FluentMenuButton>
<FluentMenuList>
@foreach (var option in options)
{
<FluentMenuItem Checked="@(option == selected)" OnClick="@(() => selected = option)">
@option.Label
</FluentMenuItem>
}
</FluentMenuList>
</FluentMenu>