Как использовать значки с NavigationProvider, которые не являются Material Design? - PullRequest
Новая
       38

Как использовать значки с NavigationProvider, которые не являются Material Design?

0 голосов
/ 24 мая 2018

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

Внутри метода SetNavigation мы создаем главное меню.

Существует возможность установить свойство icon с помощью имени значка «Дизайн материала» - например, в пункте меню ниже используется строка "people" для отображения png:

enter image description here

.AddItem(
    new MenuItemDefinition(
        PageNames.Doctors,
        L("Doctors"),
        url: "Doctors",
        icon: "people",
        requiredPermissionName: PermissionNames.Pages_Doctors
    )
)

Можно ли использовать другие значки, кроме материалов с дизайном?Если да, то как мне ссылаться на изображение или значок?

Спасибо

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

ASP.NET Core + Angular

Измените следующее в sidebar-nav.component.ts : 

// new MenuItem(this.l("HomePage"), "", "home", "/app/home"),
new MenuItem(this.l("HomePage"), "", "fa fa-home", "/app/home"),

Измените следующее в боковой панели-nav.component.html : 

<!-- <i *ngIf="menuItem.icon" class="material-icons">{{menuItem.icon}}</I> -->
<i *ngIf="menuItem.icon && menuItem.icon.startsWith('fa ')" class="{{menuItem.icon}}"></i>
<i *ngIf="menuItem.icon && !menuItem.icon.startsWith('fa ')" class="material-icons">{{menuItem.icon}}</I>

Возможно, вы захотите добавить Styling (см. ниже) в sidebar-nav.component.html .

ASP.NET Core + jQuery

Измените следующее в * NavigationProvider.cs : 

new MenuItemDefinition(
    PageNames.Home,
    L("HomePage"),
    url: "",
 // icon: "home",
    icon: "fa fa-home",
    requiresAuthentication: true
)

Измените следующее в SideBarNav / Default.cshtml : 

@if (!string.IsNullOrWhiteSpace(menuItem.Icon))
{
    <!-- <i class="material-icons">@menuItem.Icon</i> -->
    @if (menuItem.Icon.StartsWith("fa "))
    {
        <i class="@menuItem.Icon"></i>
    }
    else
    {
        <i class="material-icons">@menuItem.Icon</i>
    }
}

Вы можете добавить Styling (см. Ниже) в SideBarNav / Default.cshtml .

Стиль 

<style>
    .sidebar .fa {
        font-size: 24px;
        height: 30px;
        margin-top: 4px;
        text-align: center;
        width: 24px;
    }
</style>
0 голосов
/ 24 мая 2018

Вы можете использовать шрифт, как показано ниже 

AddItem(new MenuItemDefinition(
    PageNames.App.Tenant.Google,
    new FixedLocalizableString("Google"),
    icon : "fa fa-bar-chart",
    requiredPermissionName : AppPermissions.Pages_Google,
    url : "http://www.google.com",
    target : "_blank"
    )
)
...