menu

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -65,6 +65,7 @@
                 <FluentNavLink Href="compoflipper" Icon="@(new Icons.Regular.Size20.LineHorizontal3())" IconColor="Color.Accent">Flipper</FluentNavLink>
                 <FluentNavLink Href="compohighlighter" Icon="@(new Icons.Regular.Size20.Highlight())" IconColor="Color.Accent">Highlighter</FluentNavLink>
                 <FluentNavLink Href="compohorizontalscroll" Icon="@(new Icons.Regular.Size20.AlignSpaceEvenlyHorizontal())" IconColor="Color.Accent">HorizontalScroll</FluentNavLink>
+                <FluentNavLink Href="compomenu" Icon="@(new Icons.Regular.Size20.ListBar())" IconColor="Color.Accent">Menu</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/Components/CompoMenu.razor

@@ -0,0 +1,110 @@
+@page "/compomenu"
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>Menu</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    The <code>FluentMenu</code> wraps a web component of a <code>menu</code>.
+</div>
+
+
+<h4 class="mt-4">Default</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <p>Click this button to open a Menu.</p>
+    <FluentButton Id="exBtn1" Appearance="Appearance.Accent" OnClick="@(() => eopen = !eopen)">
+        Open menu
+    </FluentButton>
+
+    <FluentMenu Anchor="exBtn1" @bind-Open="eopen" @onmenuchange="OnEMenuChange" VerticalThreshold="170">
+        <FluentMenuItem OnClick="@(() => emessage = $"Item 1 Clicked")">
+            Menu item 1
+        </FluentMenuItem>
+        <FluentMenuItem OnClick="@(() => emessage = $"Item 2 Clicked")" Checked="@true">
+            Menu item 2
+        </FluentMenuItem>
+        <FluentMenuItem OnClick="@(() => emessage = $"Item 3 Clicked")" Disabled="@true">
+            Menu item 3
+        </FluentMenuItem>
+        <FluentMenuItem OnClick="@(() => emessage = $"Item 4 Clicked")">
+            <FluentIcon Value="@(new Icons.Regular.Size24.ClipboardImage())" Color="Color.Accent" Slot="start"/>
+            Menu item 4
+        </FluentMenuItem>
+    </FluentMenu>
+    <p><b>Status</b>: @estatus?.ToString()</p>
+    <p><b>Message</b>: @emessage?.ToString()</p>
+</FluentCard>
+
+<h4 class="mt-4">Simple context menu</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <div class="fluent-border-d1" id="sDiv1">
+        Right-click on this text <br/>
+        to open a Context Menu.
+    </div>
+
+    <FluentMenu Anchor="sDiv1" Trigger="MouseButton.Right" Anchored="false" @onmenuchange="OnSMenuChange">
+        <FluentMenuItem Label="Item 1" OnClick="@(() => smessage = "Item 1 clicked")" />
+        <FluentMenuItem Label="Item 2" OnClick="@(() => smessage = "Item 2 clicked")">
+            <MenuItems>
+                <FluentMenuItem Label="Item 2-1">
+                    <MenuItems>
+                        <FluentMenuItem Label="Item 2-1-1" OnClick="@(() => smessage = "Item 2-1-1 clicked")" />
+                        <FluentMenuItem Label="Item 2-1-2" OnClick="@(() => smessage = "Item 2-1-2 clicked")" />
+                    </MenuItems>
+                </FluentMenuItem>
+                <FluentMenuItem Label="Item 2-2" OnClick="@(() => smessage = "Item 2-2 clicked")" />
+            </MenuItems>
+        </FluentMenuItem>
+        <FluentDivider/>
+        <FluentMenuItem Label="Item 3" OnClick="@(() => smessage = "Item 3 clicked")" />
+    </FluentMenu>
+    <p><b>Status</b>: @sstatus?.ToString()</p>
+    <p><b>Message</b>: @smessage?.ToString()</p>
+</FluentCard>
+
+<h4 class="mt-4">With Radio buttons and Checkboxes</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentMenu Open="@true" Anchored="false">
+        <FluentMenuItem Label="MenuItem 1" />
+        <FluentMenuItem Label="MenuItem 2" />
+        <FluentMenuItem Label="MenuItem 3" />
+
+        <FluentDivider/>
+
+        <FluentMenuItem Label="CheckboxItem 1" Role="MenuItemRole.MenuItemCheckbox" />
+        <FluentMenuItem Label="CheckboxItem 2" Role="MenuItemRole.MenuItemCheckbox" />
+        <FluentMenuItem Label="CheckboxItem with Custom icon" Role="MenuItemRole.MenuItemCheckbox">
+            <FluentIcon Value="@(new Icons.Regular.Size16.AnimalDog())" Color="Color.Accent" Slot="checkbox-indicator"/>
+        </FluentMenuItem>
+
+        <FluentDivider />
+
+        <FluentMenuItem Label="RadioItem 1-1" Role="MenuItemRole.MenuItemRadio" />
+        <FluentMenuItem Label="RadioItem 1-2" Role="MenuItemRole.MenuItemRadio" />
+
+        <FluentDivider />
+
+        <FluentMenuItem Label="RadioItem 2-1" Role="MenuItemRole.MenuItemRadio" />
+        <FluentMenuItem Label="RadioItem 2-2" Role="MenuItemRole.MenuItemRadio" />
+    </FluentMenu>
+</FluentCard>
+
+@code {
+    bool eopen = false;
+    string? estatus;
+    string? emessage;
+    void OnEMenuChange(MenuChangeEventArgs args)
+    {
+        if (args is not null && args.Value is not null)
+            estatus = $"Item \"{args.Value}\" clicked";
+    }
+
+
+    string? sstatus;
+    string? smessage;
+    void OnSMenuChange(MenuChangeEventArgs args)
+    {
+        if (args is not null && args.Value is not null)
+            sstatus = $"Item \"{args.Value}\" clicked";
+    }
+}