Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stavroskasidis/BlazorContextMenu
A context menu component for Blazor !
https://github.com/stavroskasidis/BlazorContextMenu
blazor blazor-client blazor-server contextmenu nuget razor razor-components razorcomponents
Last synced: 11 days ago
JSON representation
A context menu component for Blazor !
- Host: GitHub
- URL: https://github.com/stavroskasidis/BlazorContextMenu
- Owner: stavroskasidis
- License: mit
- Created: 2018-04-29T22:28:29.000Z (over 6 years ago)
- Default Branch: develop
- Last Pushed: 2024-05-28T17:06:52.000Z (5 months ago)
- Last Synced: 2024-07-16T05:06:01.014Z (4 months ago)
- Topics: blazor, blazor-client, blazor-server, contextmenu, nuget, razor, razor-components, razorcomponents
- Language: C#
- Homepage:
- Size: 2.28 MB
- Stars: 527
- Watchers: 15
- Forks: 59
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazor - BlazorContextMenu -   A context menu component for Blazor ([Demo](https://blazor-context-menu-demo.azurewebsites.net/)). (Libraries & Extensions / 2D/3D Rendering engines)
README
# Blazor Context Menu
[](https://stavros-kasidis.visualstudio.com/Blazor%20Context%20Menu/_build/latest?definitionId=12) [](https://www.nuget.org/packages/Blazor.ContextMenu) [](https://www.nuget.org/packages/Blazor.ContextMenu) [](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=7CRGWPYB5AKJQ¤cy_code=EUR&source=url)
A context menu component for [Blazor](https://blazor.net)!
## Samples / Demo
You can find a live demo [here](https://blazor-context-menu-demo.azurewebsites.net/).
## 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](https://www.nuget.org/packages/Blazor.ContextMenu).*
**2. Add the following line in your Blazor project's startup class**
```csharp
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddBlazorContextMenu();
}
}
```
**3. Add the following line in your `_Imports.razor`**
```csharp
@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`.
```html
```
```html
```
## Basic usage
```xml
Item 1
Item 2
Item 3 (disabled)
Submenu
Submenu Item 1
Submenu Item 2
Right-click on me to show the context menu !!
@code{
void OnClick(ItemClickEventArgs e)
{
Console.WriteLine($"Item Clicked => Menu: {e.ContextMenuId}, MenuTarget: {e.ContextMenuTargetId}, IsCanceled: {e.IsCanceled}, MenuItem: {e.MenuItemElement}, MouseEvent: {e.MouseEvent}");
}
}
```
## Customization
### Templates
You can create templates in the configuration that you can then apply to context menus.
```csharp
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddBlazorContextMenu(options =>
{
options.ConfigureTemplate("myTemplate", template =>
{
template.MenuCssClass = "my-menu";
template.MenuItemCssClass = "my-menu-item";
//...
});
});
}
}
```
```xml
.my-menu { color: darkblue; }
/* using css specificity to override default background-color */
.my-menu .my-menu-item { background-color: #ffb3b3;}
.my-menu .my-menu-item:hover { background-color: #c11515;}
Item 1
Item 2
```
You can also change the default template that will apply to all context menus (unless specified otherwise).
```csharp
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddBlazorContextMenu(options =>
{
//Configures the default template
options.ConfigureTemplate(defaultTemplate =>
{
defaultTemplate.MenuCssClass = "my-default-menu";
defaultTemplate.MenuItemCssClass = "my-default-menu-item";
//...
});
options.ConfigureTemplate("myTemplate", template =>
{
template.MenuCssClass = "my-menu";
template.MenuItemCssClass = "my-menu-item";
//...
});
});
}
}
```
### Explicit customization
All components expose `CssClass` parameters that you can use to add css classes. These take precedence over any template configuration.
```xml
Red looking Item
Default looking item
```
## Overriding default css
You can override the default css classes completely in the following ways (not recommended unless you want to achieve advanced customization).
### Override default css using templates
```csharp
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddBlazorContextMenu(options =>
{
//This will override the default css classes for the default template
options.ConfigureTemplate(defaultTemplate =>
{
defaultTemplate.DefaultCssOverrides.MenuCssClass = "custom-menu";
defaultTemplate.DefaultCssOverrides.MenuItemCssClass= "custom-menu-item";
defaultTemplate.DefaultCssOverrides.MenuItemDisabledCssClass = "custom-menu-item--disabled";
//...
});
});
}
}
```
### Using the `OverrideDefaultXXX` parameters on components. These take precedence over the template overrides.
```xml
Item 1
Item 2
```
## ⚠️ Breaking changes ⚠️
Upgrading from 1.9.0 to 1.10.0
>- The default auto-hide event is now on "mousedown". If you want the old behaviour, you can use the new `AutoHideEvent` parameter on the `ContextMenu` component to change it back to "mouseup".
Upgrading from 0.19 to 0.20
>- Replaced the `ContextMenuTriggerId` in events with the reference to the actual `ContextMenuTrigger`
Upgrading from 0.16 to 0.17
>- Removed the deprecated automatic embed of resources in blazor client-side. You must reference the static files as described in the "Installation" section.
>- The static resources path has changed in preview 7 from `_content/blazorcontextmenu/` to `_content/Blazor.ContextMenu/`
Upgrading from 0.15 to 0.16
>- Only for Blazor Server-Side projects: You must reference the static files as described in the "Installation" section.
Upgrading from 0.12 to 0.13
>- Remove the `@addTagHelper *, BlazorContextMenu` as it is no longer needed.
Upgrading from 0.11 to 0.12
>- The following handlers are removed as they are no longer needed: `ClickAsync`, `EnabledHandlerAsync`, `VisibleHandlerAsync`.
>- The `Click` handler has been renamed to `OnClick` to keep consistency with the framework/suggested event names.
>- The `MenuItemClickEventArgs` class has been renamed to the more appropriate `ItemClickEventArgs`.
>- The `EnabledHandler` and `VisibleHandler` parameters have been removed and replaced with the new `OnAppearing` event handler.
>- The `MenuItemEnabledHandlerArgs` and `MenuItemVisibleHandlerArgs` classes have been removed and replaced with the new `ItemAppearingEventArgs`.
Upgrading from 0.10 to 0.11
>- The `CssOverrides` API is removed and override configuration is moved into templates. The `DefaultCssOverrides` of the `ConfigureTemplate` API must be used.
Upgrading from 0.5 to 0.6
>- You must add in `Startup.ConfigureServices` of your Blazor client side project the following line `services.AddBlazorContextMenu();`
>- The `BlazorContextMenu.BlazorContextMenuDefaults` API is removed. Use the API provided in the service configuration.
Upgrading from 0.1 to 0.2
>- Rename "MenuItem" to "Item".
>- Rename "MenuSeperator" to "Seperator".
>- Replace "MenuItemWithSubmenu" with a regular "Item" component.
## Release Notes
2.1
>- Fix for [#155](https://github.com/stavroskasidis/BlazorContextMenu/issues/155). Contributed by [adrien426](https://github.com/adrien426).
2.0
>- Upgrade to dotnet 8.0
1.17
>- Upgraded asp .net packages dependencies to 6.0.25 due to security concerns.
1.16
>- Fixes issue with opening a contextual menu on the far right side of the window for the first time not properly offsetting. Contributed by [matt-virtualitics](https://github.com/matt-virtualitics).
1.15
>- Add IsMenuShown to BlazorContextMenuService. Contributed by [Adam Ashton](https://github.com/adamashton).
1.14
>- Fix for [#121](https://github.com/stavroskasidis/BlazorContextMenu/issues/121).
1.13
>- Fix for [#114](https://github.com/stavroskasidis/BlazorContextMenu/issues/114).
1.12
>- Fix for [#110](https://github.com/stavroskasidis/BlazorContextMenu/issues/110). Contributed by [SebastianWachsmuth](https://github.com/SebastianWachsmuth).
1.11
>- Upgraded to dotnet 6.0
1.10.1
>- Fix for [#80](https://github.com/stavroskasidis/BlazorContextMenu/issues/80).
1.10
>- Changed default auto hide event to "mousedown". Old behaviour ("mouseup") is available by using the `AutoHideEvent` parameter on the `ContextMenu` component. Contributed by [KristofferStrube](https://github.com/KristofferStrube).
1.9
>- Added `ZIndex` support in `ContextMenu` component (default `1000`). Contributed by [grishat](https://github.com/grishat).
>- Added autohide support in `ContextMenu` when window is resizing. Contributed by [grishat](https://github.com/grishat).
1.8
>- Added `StopPropagation` parameter on `ContextMenuTrigger` (default `true`).
1.7
>- Fix for [#81](https://github.com/stavroskasidis/BlazorContextMenu/issues/81).
1.6
>- Added contextual render fragment for `ContextMenu`, exposing a `@context` variable that simplifies advanced scenarios.
1.5
>- Fixed a bug when opening multiple menus with different ids.
1.4
>- Updated to 3.1 release.
>- Fix for [#72](https://github.com/stavroskasidis/BlazorContextMenu/issues/72).
1.3
>- Added menu `OnHiding` event [#68](https://github.com/stavroskasidis/BlazorContextMenu/issues/68).
1.2
>- Fix for [#65](https://github.com/stavroskasidis/BlazorContextMenu/issues/65).
1.1
>- Added the ability to show/hide a menu from code. (#63)
1.0
>- Updated to 3.0 release.
0.21
>- Updated to 3.0 preview 9.
0.20
>- Added `ContextMenuTrigger` data, that can be accessed from event args.
>- Replaced the `ContextMenuTriggerId` in event args with the reference to the actual `ContextMenuTrigger`
0.19
>- Fix for Blazor server-side prerendering: [#53](https://github.com/stavroskasidis/BlazorContextMenu/issues/53).
0.18
>- Updated to 3.0 preview 8.
>- Added attribute splatting to components.
0.17
>- Updated to 3.0 preview 7.
>- Added double click mouse trigger.
>- Removed the deprecated automatic embed of resources in blazor client-side. You now have to reference the static files just like the server-side blazor projects.
0.16
>- Updated to 3.0 preview 6.
0.15
>- Added new `OnAppearing` event to `ContextMenu` conponent, that can be used to prevent the menu from showing.
>- Added the `WrapperTag` parameter to the `ContextMenuTrigger` component, that can be used to change the `ContextMenuTrigger` component's element tag (default: div).
>- Added the `Id` parameter to the `ContextMenuTrigger` component.
0.14
>- Updated to 3.0 preview 5.
0.13
>- Updated to 3.0 preview 4.
0.12
>- Updated to Blazor 0.9.0.
>- Changed event handlers to the new `EventCallback<>`. As a consequence the following handlers are no longer needed and they are removed: `ClickAsync`, `EnabledHandlerAsync`, `VisibleHandlerAsync`.
>- Fixed menu display position when it doesn't fit on screen.
>- The `Click` handler has been renamed to `OnClick` to keep consistency with the framework/suggested event names.
>- The `MenuItemClickEventArgs` class has been renamed to the more appropriate `ItemClickEventArgs`.
>- The `EnabledHandler` and `VisibleHandler` parameters have been removed and replaced with the new `OnAppearing` event handler.
>- The `MenuItemEnabledHandlerArgs` and `MenuItemVisibleHandlerArgs` classes have been removed and replaced with the new `ItemAppearingEventArgs`.
0.11
>- Updated to Blazor 0.8.0.
>- Added animations.
>- Default css overrides are now part of the `Templates` API so that you can easily have multiple custom overriden menus.
>- Razor Components are not loading the static files included in the library => [#6349](https://github.com/aspnet/AspNetCore/issues/6349). As a workaround you can download and reference directly the **.css** and **.js** from the `/BlazorContextMenu/content` folder until the issue is resolved.
0.10
>- Added proper support for Razor Components (aka server-side Blazor).
0.9
>- Updated to Blazor 0.7.0.
>- Removed some js interop in favor of the new Cascading Values feature.
0.8
>- Updated to Blazor 0.6.0.
0.7
>- Added left-click trigger support.
0.6
>- Updated to Blazor 0.5.1.
>- Changed configuration setup.
>- Added templates.
0.5
>- Updated to Blazor 0.5.0.
0.4
>- Added minification for included css/js.
>- Updated to Blazor 0.4.0.
0.3
>- Added dynamic EnabledHandlers for menu items.
>- Added Active and dynamic ActiveHandlers for menu items.
0.2
>- Updated to Blazor 0.3.0.
>- Renamed "MenuItem" to "Item" to avoid conflicts with the html element "menuitem".
>- Renamed "MenuSeperator" to "Seperator" for consistency.
>- Removed "MenuItemWithSubmenu" (just use a regular "Item").
0.1
>- Initial release.
## Special Thanks
This project was inspired by https://github.com/fkhadra/react-contexify and https://github.com/vkbansal/react-contextmenu