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>
</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.
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 ).Default is BootstrapIcon.ThreeDotsVertical . |
IconCssClass | string |
Additional CSS class(es) for the context menu icon. |
Settings | ContextMenuSettings |
Set of settings to be applied to the component instance (overrides HxContextMenu.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. | .325rem |
--hx-context-menu-button-border | Border radius. | unset |
--hx-context-menu-button-hover-background | Background of the context menu button on hover. | var(--bs-gray-300) |
--hx-context-menu-button-padding | Padding of the context menu button. | 0 .25rem |
--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 . |
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 |