BzContextMenu

Context menu

When you right-click, the menus you want open right there for you.

Basic menu

Hand it a list of BzMenuItem and put anything inside ChildContent. An item whose text is a dash becomes a separator.

Right-click this box

razor

@using BzCore.Components.Overlay
@using BzCore.Components.Navigation

<BzContextMenu Items="_ctx">
    <div class="ctx-target">روی این کادر راست کلیک کن</div>
</BzContextMenu>

@code {
    private List<BzMenuItem> _ctx = new()
    {
        new() { Text = "ویرایش", Icon = "fa-solid fa-pen" },
        new() { Text = "کپی",   Icon = "fa-solid fa-copy" },
        new() { Text = "-" },                       // separator
        new() { Text = "حذف",   Icon = "fa-solid fa-trash" },
    };
}

Icons, separators and events

Every item can carry an Icon and an OnClick.

This one raises events — try it

Member	Description
`Items`	The list of menu items
`ChildContent`	The area that captures the right-click
`BzMenuItem.Text`	Label; a dash makes it a separator
`BzMenuItem.Icon`	A FontAwesome icon class
`BzMenuItem.OnClick`	Call when the item is picked

razor

@using BzCore.Components.Overlay
@using BzCore.Components.Navigation

<BzContextMenu Items="_ctx">
    <div class="ctx-target">این یکی رویداد داره — امتحان کن</div>
</BzContextMenu>

@if (_last is not null)
{
    <p>آخرین انتخاب: <b>@_last</b></p>
}

@code {
    private string? _last;
    private List<BzMenuItem> _ctx = new();

    protected override void OnInitialized()
    {
        _ctx = new()
        {
            new() { Text = "ویرایش", Icon = "fa-solid fa-pen",
                    OnClick = () => Pick("ویرایش") },
            new() { Text = "اشتراک گذاری", Icon = "fa-solid fa-share-nodes",
                    OnClick = () => Pick("اشتراک گذاری") },
            new() { Text = "-" },
            new() { Text = "حذف", Icon = "fa-solid fa-trash",
                    OnClick = () => Pick("حذف") },
        };
    }

    private void Pick(string name)
    {
        _last = name;
        StateHasChanged();   // Action is not an EventCallback, so render manually
    }
}