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. | var(--bs-secondary-bg) |
--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 |