HxContextMenu #

Ready-made context menu (based on Bootstrap Dropdown) with built-in support for confirmation messages after clicking on the menu items.

Basic usage #

<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-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

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 🗙