アイコンテンプレート

Menu supports adding icons to the menu items with a submenu. It lets you set a template for the icon of a menu item with a submenu using OpenIconTemplate property of the C1MenuItem class. The OpenIconTemplate property creates the menu item icon using the C1IconTemplate class. In the following example, we have set the TriangleRight icon for all the menu items with submenus.

Blazor Menu Icon

To add an icon for the menu items with submenu using the OpenIconTemplate property, use the following code:

Razor	コードのコピー
@using C1.Blazor.Menu @using C1.Blazor.Input @using C1.Blazor.Core <C1Menu Style="@("width: 150px")" OpenIconTemplate="C1IconTemplate.TriangleRight" OpenOnClick="false" OnItemSelected="OnSelectedItem"> <C1MenuItem Header="ComponentOne"> <C1MenuItem Header="Platforms"> <C1MenuItem Header="WinForms" /> <C1MenuItem Header="WPF" /> <C1MenuItem Header="WinUI" /> <C1MenuItem Header="Blazor" /> <C1MenuItem Header="MVC" /> <C1MenuItem Header="UWP" /> <C1MenuItem Header="Xamarin" /> <C1MenuItem Header="Others" /> </C1MenuItem> <C1MenuItem Header="Resources"> <C1MenuItem Header="Documentation"> <C1MenuItem Header="WinForms Edition" /> <C1MenuItem Header="WPF Edition" /> <C1MenuItem Header="WinUI Edition" /> <C1MenuItem Header="Blazor Edition" /> <C1MenuItem Header="MVC Edition" /> <C1MenuItem Header="UWP Edition" /> <C1MenuItem Header="Xamarin Edition" /> <C1MenuItem Header="Others Edition" /> </C1MenuItem> <C1MenuItem Header="Blogs" /> </C1MenuItem> <C1MenuItem Header="Samples" /> <C1MenuItem Header="Licensing" /> <C1MenuItem Header="Demos" /> </C1MenuItem> <C1MenuItem Header="Wijmo"> <C1MenuItem Header="Framework"> <C1MenuItem Header="JavaScript" /> <C1MenuItem Header="Angular" /> <C1MenuItem Header="React" /> <C1MenuItem Header="View" /> </C1MenuItem> <C1MenuItem Header="Documentation"/> <C1MenuItem Header="Resources"> <C1MenuItem Header="Blogs" /> <C1MenuItem Header="Samples" /> <C1MenuItem Header="Licensing" /> </C1MenuItem> <C1MenuItem Header="Demos" /> </C1MenuItem> </C1Menu> @code { string selectedItem = ""; public void OnSelectedItem(C1MenuItem item) { selectedItem = GetFullPath(item); } public static string GetFullPath(C1MenuItem item) { if (item.ParentItem == null) return item.Header; return $"{GetFullPath(item.ParentItem)} / {item.Header}"; } }

Razor

コードのコピー

@using C1.Blazor.Menu
@using C1.Blazor.Input
@using C1.Blazor.Core

<C1Menu Style="@("width: 150px")" OpenIconTemplate="C1IconTemplate.TriangleRight"
    OpenOnClick="false" OnItemSelected="OnSelectedItem">
        <C1MenuItem Header="ComponentOne">
            <C1MenuItem Header="Platforms">
                <C1MenuItem Header="WinForms" />
                <C1MenuItem Header="WPF" />
                <C1MenuItem Header="WinUI" />
                <C1MenuItem Header="Blazor" />
                <C1MenuItem Header="MVC" />
                <C1MenuItem Header="UWP" />
                <C1MenuItem Header="Xamarin" />
                <C1MenuItem Header="Others" />
            </C1MenuItem>
            <C1MenuItem Header="Resources">
                <C1MenuItem Header="Documentation">
                    <C1MenuItem Header="WinForms Edition" />
                    <C1MenuItem Header="WPF Edition" />
                    <C1MenuItem Header="WinUI Edition" />
                    <C1MenuItem Header="Blazor Edition" />
                    <C1MenuItem Header="MVC Edition" />
                    <C1MenuItem Header="UWP Edition" />
                    <C1MenuItem Header="Xamarin Edition" />
                    <C1MenuItem Header="Others Edition" />
                </C1MenuItem>
                <C1MenuItem Header="Blogs" />
            </C1MenuItem>
            <C1MenuItem Header="Samples" />
            <C1MenuItem Header="Licensing" />
            <C1MenuItem Header="Demos" />
        </C1MenuItem>
        <C1MenuItem Header="Wijmo">
            <C1MenuItem Header="Framework">
                <C1MenuItem Header="JavaScript" />
                <C1MenuItem Header="Angular" />
                <C1MenuItem Header="React" />
                <C1MenuItem Header="View" />
            </C1MenuItem>
            <C1MenuItem Header="Documentation"/>
            <C1MenuItem Header="Resources">
                <C1MenuItem Header="Blogs" />
                <C1MenuItem Header="Samples" />
                <C1MenuItem Header="Licensing" />
            </C1MenuItem>
            <C1MenuItem Header="Demos" />
        </C1MenuItem>
    </C1Menu>

@code {
    string selectedItem = "";

    public void OnSelectedItem(C1MenuItem item)
    {
        selectedItem = GetFullPath(item);
    }
  
    public static string GetFullPath(C1MenuItem item)
    {
        if (item.ParentItem == null)
            return item.Header;
        return $"{GetFullPath(item.ParentItem)} / {item.Header}";
    }
}