Как выровнять меню в NavigationProvider? - PullRequest
Новая
       19

Как выровнять меню в NavigationProvider?

0 голосов
/ 04 сентября 2018

Добрый день.

Я использую MVC Core ASP.NET Boilerplate v0.9.6.

Я пытаюсь выровнять боковое меню, чтобы оно выглядело так:

  • Элемент 1
  • пункт 2
    • пункт 2.1
      • Элемент 2.1.1
  • Позиция 3

Вот как текущий код отображает меню:

  • Элемент 1
  • пункт 2
    • Элемент 2.1
    • Элемент 2.1.1
  • Позиция 3

Вот код: 

// Menu for CRM Module
        .AddItem(
                new MenuItemDefinition(
                    "CRMModule",
                    L("CRMModule"),
                    url: "CRMModule",
                    icon: "fa fa-wrench",
                    requiredPermissionName: PermissionNames.Pages_SparesRequirements
                        ).AddItem(
                            new MenuItemDefinition(
                                "Companies",
                                L("Companies"),
                                url: "Company",
                                icon: "fa fa-building",
                                requiredPermissionName: PermissionNames.Pages_Companies
                                            )

                        ).AddItem(
                             new MenuItemDefinition(
                                "Quotations",
                                L("Quotations"),
                                url: "Quotation",
                                icon: "fa fa-list-alt",
                                requiredPermissionName: PermissionNames.Pages_Quotations
                                ).AddItem(
                                         new MenuItemDefinition(
                                         "Quotations",
                                         L("List"),
                                         url: "Quotation",
                                         icon: "fa fa-table",
                                         requiredPermissionName: PermissionNames.Pages_Quotations
                                         )
                                ).AddItem(
                                        new MenuItemDefinition(
                                        "Quotations",
                                        L("Create"),
                                        url: "Quotation/CreateQuote",
                                        icon: "fa fa-plus",
                                        requiredPermissionName: PermissionNames.Pages_Quotations
                                        )
                                )

                        ).AddItem(
                            new MenuItemDefinition(
                                "Leads",
                                L("Leads"),
                                url: "Lead",
                                icon: "fa fa-building-o",
                                requiredPermissionName: PermissionNames.Pages_Leads
                               )
                       )
            )

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018

Полагаю, это то, что вы хотите:

  • CRMModule
    • Компания
    • Котировки
      • Список
        • Создать
    • Ведет

Во-первых, каждый MenuItemDefinition должен иметь уникальный Name (первый параметр).

Во-вторых, становится очевидным, что вам нужно делать, когда вы используете правильный отступ.

До 

).AddItem(
    new MenuItemDefinition(
        "Quotations", // "List"
        L("List"),
        url: "Quotation",
        icon: "fa fa-table",
        requiredPermissionName: PermissionNames.Pages_Quotations
    ) // Remove
).AddItem(
    new MenuItemDefinition(
        "Quotations", // "Create"
        L("Create"),
        url: "Quotation/CreateQuote",
        icon: "fa fa-plus",
        requiredPermissionName: PermissionNames.Pages_Quotations
    )
)

* После 1035 *: 

).AddItem(
    new MenuItemDefinition(
        "List",
        L("List"),
        url: "Quotation",
        icon: "fa fa-table",
        requiredPermissionName: PermissionNames.Pages_Quotations
    ).AddItem(                                                       // Indented
        new MenuItemDefinition(                                      // Indented
            "Create",                                                // Indented
            L("Create"),                                             // Indented
            url: "Quotation/CreateQuote",                            // Indented
            icon: "fa fa-plus",                                      // Indented
            requiredPermissionName: PermissionNames.Pages_Quotations // Indented
        ) // Added
    )
)

SideBarNav / Default.cshtml

Для поддержки пунктов меню 3-го уровня измените эти строки : 

<a href="@calculateMenuUrl(subSubMenuItem.Url)">
    @subSubMenuItem.DisplayName
</a>

до: 

@if (subSubMenuItem.Items.IsNullOrEmpty())
{
    <a href="@calculateMenuUrl(subSubMenuItem.Url)">
        @if (!string.IsNullOrWhiteSpace(subSubMenuItem.Icon))
        {
            <i class="material-icons">@subSubMenuItem.Icon</i>
        }
        <span>@subSubMenuItem.DisplayName</span>
    </a>
}
else
{
    <a href="javascript:void(0);" class="menu-toggle">
        @if (!string.IsNullOrWhiteSpace(subSubMenuItem.Icon))
        {
            <i class="material-icons">@subSubMenuItem.Icon</i>
        }
        <span>@subSubMenuItem.DisplayName</span>
    </a>
    <ul class="ml-menu">
        @foreach (var subsubSubMenuItem in subSubMenuItem.Items)
        {
            <li class="@(Model.ActiveMenuItemName == subsubSubMenuItem.Name ? "active" : "")">
                <a href="@calculateMenuUrl(subsubSubMenuItem.Url)">
                    @subsubSubMenuItem.DisplayName
                </a>
            </li>
        }
    </ul>
}
0 голосов
/ 04 сентября 2018

Похоже, что подменю Create - это то, которое вы хотите сделать, чтобы перейти на один уровень ниже, поэтому оно будет определено в пункте List: 

new MenuItemDefinition(
"List", // so it will be defined under "List"
L("Create"),
url: "Quotation/CreateQuote",
icon: "fa fa-plus",
requiredPermissionName: PermissionNames.Pages_Quotations
)
...