Getting Started with IntegralUI ContextMenu Component
IntegralUI ContextMenu is a Blazor Component that represents a multi-level shortcut menu. You can load a context menu from local or remote data source with all settings required. In addition, you can add headers, checkboxes, radio buttons or any custom HTML element using menu templates to each menu item. In following sections, you can find details about different features available in the ContextMenu component.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
List of Included Features
A more detailed information is available here: Features in IntegralUI for Blazor components.
How to Use IntegralUI ContextMenu
At first, you need to install the IntegralUI for Blazor library on your side. Detailed information is available here: How to Use IntegralUI for Blazor. It provides information on how to setup and use components in Blazor .NET. In general, you need to open your application and add a reference to a component you want to use.
To use the IntegralUI ContextMenu component, you need to do the following:
- Open a Blazor page in your project
- Add code line that will import the IntegralUI components
- Place the ContextMenu component using the IntegralUIContextMenu tag
- Inside ChildContent place the HTML element or Blazor component for which you want to show a context menu
- Specify the generic TItem type that you will use as a data model
- Set the Items property to connect the ContextMenu to your data source
- Handle the MenuClick event in your code, which is executed whenever context menu option is clicked
- (optional) Define the template that will be used to create the content for context menu items using the ItemTemplate
- (optional) Add custom HTML elements or other Blazor components inside the template
Here is an example:
@page "/"
@using IntegralUI.Components
<IntegralUIContextMenu TItem="CustomContextMenuItem"
Items="@items"
CheckedChanged="@menuChecked"
MenuClick="@menuClick"
<ChildContent>
<div class="cmnu-ovw-block" style="@getBlockStyle()">
<span>Right click to open the context menu</span>
</div>
</ChildContent>
</IntegralUIContextMenu>
@code {
// Data model
public class CustomContextMenuItem
{
public bool AllowCheck { get; set; } = false;
public bool AllowRadio { get; set; } = false;
public bool Checked { get; set; } = false;
public string? Id { get; set; }
public string? Text { get; set; }
public IntegralUIMenuItemType Type { get; set; } = IntegralUIMenuItemType.Item;
}
public List<CustomContextMenuItem> items = new()
{
new CustomMenuItem { Id = "1", Text = "Context Menu", Type = IntegralUIMenuItemType.Header },
new CustomMenuItem { Id = "2", Text = "Bold", AllowCheck = true, Checked = true },
new CustomMenuItem { Id = "3", Text = "Italic", AllowCheck = true },
new CustomMenuItem { Id = "4", Text = "Strikethrough", AllowCheck = true },
new CustomMenuItem { Id = "5", Type = IntegralUIMenuItemType.Separator },
// . . .
};
private string fontWeight = "bold";
private string fontStyle = "normal";
private string fontSize = "1";
private string textDecoration = "none";
private string getBlockStyle()
{
string style = "";
style += $"font-weight: {fontWeight};";
style += $"font-style: {fontStyle};";
style += $"font-size: {fontSize}rem;";
style += $"text-decoration: {textDecoration};";
return style;
}
private void menuChecked(IntegralUIItemCheckEventArgs<CustomMenuItem> e)
{
updateBlockStyle(e.Item.Id, e.Checked);
}
private void menuClick(CustomMenuItem item)
{
updateBlockStyle(item.Id, item.Checked);
}
private void updateBlockStyle(string? itemId, bool isChecked)
{
switch (itemId)
{
case "2":
fontWeight = isChecked ? "bold" : "normal";
break;
case "3":
fontStyle = isChecked ? "italic" : "normal";
break;
case "4":
textDecoration = isChecked ? "line-through" : "none";
break;
case "6":
fontSize = isChecked ? "1" : "1";
break;
case "7":
fontSize = isChecked ? "1.5" : "1";
break;
case "8":
fontSize = isChecked ? "2" : "1";
break;
}
}
}
Properties, Events and Methods
A detailed list for each property, event and method is available here: IntegralUI ContextMenu API.
Data
You can populate the ContextMenu component with data from various sources. In general, you need to create a list of context menu items. Then apply this list to the Items property.
- Create an object that will represent the data model
- Apply it to the TItem property
- Create or load a list of objects (based on specified data model) and apply it to the Items property
Data Binding
If your data uses different field names than the ones used by the ContextMenu, you may need to bind your data to the ContextMenu, using DataFields property. Although, having custom fields in your data is fully supported, this may be required if there is overlapping with predefined ones already used by the ContextMenu component. The most important fields that may require data binding are:
- Id - a unique identifier used to distinguish the item in the list
- Items - a list of child items for this item
- ParentId - an identifier of the parent that contains the item
- Text - represents the item label
- Type - determines the item type: Header, Item or Separator
There are many other predefined fields available, a complete list of fields in use is available as part of IntegralUIItemFields class.
When using templates this may not be required, because within the template you can have any custom fields set in your code.
Layout
By default, ContextMenu component has an internal template shared among all context menu items that displays the item label. You can also create your own custom context menu template that allows you to add any custom HTML elements and arrange them in different layouts.
Add Header
In general, the Context Menu component doesn’t have a header. This is mostly in case of small menus, with few options available. However, having a context menu with header can help in describing the options that are available. You can have one or multiple headers in a single context menu.
Custom ContextMenu Template
By default, context menu items show only a label and sub-menus. To add custom HTML elements or Blazor components in the menu item space, you need to create a template. You can share this template among all menu items, or set conditions and use it for specific item only.
Multi-Level Context Menu
In most cases, the context menu has only one level, the root. Depending on complexity of your application, you may need to add sub-menus as part of the context menu with different functionalities. For this purpose, you can create a multi-level context menu by providing a list of sub-menus to the Items property of specific menu item.
Labeled Separator
In most cases, you don't need a context menu with labeled separators. These separators along with horizontal line that divides different parts of the context menu also show a text. It allows you to display additional information about that part of the menu.
Styling
You can modify the ContextMenu appearance using CSS custom properties. Most parts of ContextMenu has a CSS custom property that you can change in on your side, for example: --iui-contextmenu-background, allows you to change the background color of the component. You only need to set the Id property of the ContextMenu component, and then use it as a CSS selector where you will set a new value:
@page "/"
@using IntegralUI.Components
<IntegralUIContextMenu Id="contextmenu-overview">
// . . .
</IntegralUIContextMenu>
// . . .
// CSS
[id="contextmenu-overview"] {
--iui-contextmenu-width: 200px;
}
In general, you can change every component part in this way. In addition, item templates are fully customizable, with your own CSS settings.
Color Schemes and Themes
There are two color schemes that you can use: Dark and Light. By specifying the ColorScheme property you can change the overall component appearance to darker or lighter colors.
Utility
You can add different functionalities to the ContextMenu component. In following sections below, you will find some examples on how to create custom context menu using different HTML elements or Blazor components.
Add CheckBox to Context Menu Items
In addition to other functionalities, the Context Menu component allows you to add checkbox to menu items. Each item can have its own check box that appears before its label. Whenever checkbox value changes, a corresponding event will fire that you can handle on your side and add a specific action.
Context Menu with Radio Buttons
Context Menu component has an option to create different groups of radio buttons. Each menu item can display a radio button and you can have groups set within the root menu or sub-menus. Based on these groups, you can select only one radio button per group. Whenever a radio button is checked, a corresponding event will fire, which you can handle in your code and set specific action.
Conclusion
IntegralUI ContextMenu is a Blazor component that represents a multi-level shortcut menu. It is fully customizable, you can add headers, check boxes, radio buttons in different groups, labeled separators or you can create your own custom menu using different HTML elements or Blazor components. To change its appearance, you can use CSS custom properties.
ContextMenu component is part of IntegralUI for Blazor that you can use to develop web applications with Blazor .NET framework.