セパレーター

Menu allows you to add a separator bar between the menu items to separate each item in the menu. In Menu, these separators are represented by the C1MenuSeparator class.

Blazor Menu separator

To add a separator bar to a menu, use the following code:

Razor	コードのコピー
@using C1.Blazor.Menu <C1Menu Style="@("width: 150px")" OnItemSelected="OnSelectedItem"> <C1MenuItem Header="ComponentOne"> <C1MenuItem Header="Platforms"> <C1MenuSeparator/> <C1MenuItem Header="WinForms" /> <C1MenuSeparator/> <C1MenuItem Header="WPF" /> <C1MenuSeparator/> <C1MenuItem Header="WinUI" /> <C1MenuSeparator/> <C1MenuItem Header="Blazor" /> <C1MenuSeparator/> <C1MenuItem Header="MVC" /> <C1MenuSeparator/> <C1MenuItem Header="UWP" /> <C1MenuSeparator/> <C1MenuItem Header="Xamarin" /> <C1MenuSeparator/> <C1MenuItem Header="Others" /> </C1MenuItem> <C1MenuSeparator/> <C1MenuItem Header="Resources"> <C1MenuItem Header="Documentation"> <C1MenuSeparator/> <C1MenuItem Header="WinForms Edition" /> <C1MenuSeparator/> <C1MenuItem Header="WPF Edition" /> <C1MenuSeparator/> <C1MenuItem Header="WinUI Edition" /> <C1MenuSeparator/> <C1MenuItem Header="Blazor Edition" /> <C1MenuSeparator/> <C1MenuItem Header="MVC Edition" /> <C1MenuSeparator/> <C1MenuItem Header="UWP Edition" /> <C1MenuSeparator/> <C1MenuItem Header="Xamarin Edition" /> <C1MenuSeparator/> <C1MenuItem Header="Others Edition" /> </C1MenuItem> <C1MenuSeparator/> <C1MenuItem Header="Blogs" /> </C1MenuItem> <C1MenuSeparator/> <C1MenuItem Header="Samples" /> <C1MenuSeparator/> <C1MenuItem Header="Licensing" /> <C1MenuSeparator/> <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

<C1Menu Style="@("width: 150px")" OnItemSelected="OnSelectedItem">
        <C1MenuItem Header="ComponentOne">
            <C1MenuItem Header="Platforms">
                <C1MenuSeparator/>
                <C1MenuItem Header="WinForms" />
                 <C1MenuSeparator/>
                <C1MenuItem Header="WPF" />
                <C1MenuSeparator/>
                <C1MenuItem Header="WinUI" />
                <C1MenuSeparator/>
                <C1MenuItem Header="Blazor" />
                <C1MenuSeparator/>
                <C1MenuItem Header="MVC" />
                <C1MenuSeparator/>
                <C1MenuItem Header="UWP" />
                <C1MenuSeparator/>
                <C1MenuItem Header="Xamarin" />
                <C1MenuSeparator/>
                <C1MenuItem Header="Others" />
            </C1MenuItem>
            <C1MenuSeparator/>
            <C1MenuItem Header="Resources">
                <C1MenuItem Header="Documentation">
                    <C1MenuSeparator/>
                    <C1MenuItem Header="WinForms Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="WPF Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="WinUI Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="Blazor Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="MVC Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="UWP Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="Xamarin Edition" />
                    <C1MenuSeparator/>
                    <C1MenuItem Header="Others Edition" />
                </C1MenuItem>
                <C1MenuSeparator/>
                <C1MenuItem Header="Blogs" />
            </C1MenuItem>
            <C1MenuSeparator/>
            <C1MenuItem Header="Samples" />
            <C1MenuSeparator/>
            <C1MenuItem Header="Licensing" />
            <C1MenuSeparator/>
            <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}";
    }
}