Blazor-BlazorContextMenu

[删除（380066935@qq.com或微信通知）]

---

stavroskasidis/BlazorContextMenu: A context menu component for Blazor ! (github.com)

BlazorContextMenu DemoApp (blazor-context-menu-demo.azurewebsites.net)

Blazor Context Menu

A context menu component for Blazor!

Samples / Demo

You can find a live demo here.

Installation

1. Add the nuget package in your Blazor project

> dotnet add package Blazor.ContextMenu

OR

PM> Install-Package Blazor.ContextMenu

Nuget package page can be found here.

2. Add the following line in your Blazor project's startup class

public class Startup

{

    public void ConfigureServices(IServiceCollection services)

    {

        services.AddBlazorContextMenu();

    }

}

3. Add the following line in your _Imports.razor

@using BlazorContextMenu

4. Reference the static files

Add the following static file references in your _Host.cshtml (server-side blazor) or in your index.html (client-side blazor). Make sure that there is a call to app.UseStaticFiles(); in your server project's Startup.cs.

<link href="_content/Blazor.ContextMenu/blazorContextMenu.min.css" rel="stylesheet" />

<script src="_content/Blazor.ContextMenu/blazorContextMenu.min.js"></script>

Basic usage

<ContextMenu Id="myMenu">

    <Item OnClick="@OnClick">Item 1</Item>

    <Item OnClick="@OnClick">Item 2</Item>

    <Item OnClick="@OnClick" Enabled="false">Item 3 (disabled)</Item>

    <Seperator />

    <Item>Submenu

        <SubMenu>

            <Item OnClick="@OnClick">Submenu Item 1</Item>

            <Item OnClick="@OnClick">Submenu Item 2</Item>

        </SubMenu>

    </Item>

</ContextMenu>

<ContextMenuTrigger MenuId="myMenu">

    <p>Right-click on me to show the context menu !!</p>

</ContextMenuTrigger>

@code{

    void OnClick(ItemClickEventArgs e)

    {

        Console.WriteLine($"Item Clicked => Menu: {e.ContextMenuId}, MenuTarget: {e.ContextMenuTargetId}, IsCanceled: {e.IsCanceled}, MenuItem: {e.MenuItemElement}, MouseEvent: {e.MouseEvent}");

    }

}