Ready-made context menu (based on Bootstrap Dropdown) with built-in support for confirmation messages after clicking on the menu items.
<HxContextMenu>
<HxContextMenuItem OnClick="() => SetMessage(1)">Item 1</HxContextMenuItem>
<HxContextMenuItem OnClick="() => SetMessage(2)">Item 2</HxContextMenuItem>
<HxDropdownDivider />
<HxContextMenuItem Href="https://www.havit.eu">www.havit.eu</HxContextMenuItem>
</HxContextMenu>
@message
@code {
private string message;
private void SetMessage(int item)
{
message = $"Item number {item} has been selected";
}
}You can set Icon parameter for some of the menu items.
| Name | Type | Description |
|---|---|---|
| ChildContent | RenderFragment |
Items of the context menu. Use HxContextMenuItem components. |
| CssClass | string |
Additional CSS class(es) for the context menu. |
| DropdownCssClass | string |
Additional CSS class(es) for the context menu dropdown (container). |
| DropdownMenuAlignment | DropdownMenuAlignment? |
Alignment for the context menu dropdown menu.
The default is DropdownMenuAlignment.End. |
| DropdownMenuCssClass | string |
Additional CSS class(es) for the context menu dropdown menu. |
| Icon | IconBase |
Icon carrying the menu (use BootstrapIcon or any other IconBase).The default is BootstrapIcon.ThreeDotsVertical. |
| IconCssClass | string |
Additional CSS class(es) for the context menu icon. |
| PopperStrategy | PopperStrategy |
Popper positioning strategy. Default is PopperStrategy.Absolute. |
| Settings | ContextMenuSettings |
Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters). |
| Property | Type | Description |
|---|---|---|
| Defaults | ContextMenuSettings |
Application-wide defaults for HxContextMenu and derived components. |
| Name | Description | Default |
|---|---|---|
| --hx-context-menu-button-color | Color of the button content. | unset |
| --hx-context-menu-button-border-radius | Border radius. | var(--bs-border-radius-sm) |
| --hx-context-menu-button-border | Border. | unset |
| --hx-context-menu-button-hover-background | Background of the context menu button on hover. | rgba(var(--bs-emphasis-color-rgb), .1) |
| --hx-context-menu-button-padding | Padding of the context menu button. | 0 .25rem |
| --hx-context-menu-button-font-size | Font size of the context menu button icon. | inherit |
| --hx-context-menu-item-icon-margin | Margin of the item icon. | 0 .5rem 0 0 |
| Name | Type | Description |
|---|---|---|
| ChildContent | RenderFragment |
Custom item content to be rendered. |
| ConfirmationQuestion | string |
Displays HxMessageBox to get a confirmation. |
| CssClass | string |
Additional CSS class(es) for the menu item. |
| Enabled | bool? |
When null (default), the Enabled value is received from cascading FormState.
When value is false, input is rendered as disabled.
To set multiple controls as disabled use HxFormState. |
| Href | string |
Navigation target. |
| Icon | IconBase |
Item icon (use BootstrapIcon). |
| IconCssClass | string |
Additional CSS class(es) for the context menu item icon. |
| OnClickStopPropagation | bool |
Stop onClick-event propagation. Default is true. |
| Text | string |
Item text. |
| Name | Type | Description |
|---|---|---|
| OnClick | EventCallback |
Item clicked event. |
| Method | Returns | Description |
|---|---|---|
| HandleClick(MouseEventArgs args) | Task |