HxContextMenu

Ready-made context menu (based on Bootstrap Dropdown).

<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";
    }
}

Items with icons #

You can set Icon parameter for some of the menu items.

API

Parameters

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).
DropdownMenuCssClass string Additional CSS class(es) for the context menu dropdown menu.
Icon IconBase Icon carring 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, overriden by individual parameters).

Static properties

Property Type Description
Defaults ContextMenuSettings Application-wide defaults for HxContextMenu and derived components.

CSS Variables

Name Description Default
--hx-context-menu-button-border-radius Border radius. .325rem
--hx-context-menu-button-hover-background Background of the context menu button on hover. var(--bs-gray-300)
--hx-context-menu-item-icon-margin-right Margin right of the item icon. 0.5rem

HxContextMenuItem

API

Parameters

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. Deafult is true.
Text string Item text.

Event callbacks

Name Type Description
OnClick EventCallback Item clicked event.

Methods

Method Returns Description
HandleClick(MouseEventArgs args) Task
An unhandled error has occurred. Reload 🗙