Как добавить разрыв строки в меню ASP.NET Boilerplate из Navigation Provider с локализацией - PullRequest
Новая
       29

Как добавить разрыв строки в меню ASP.NET Boilerplate из Navigation Provider с локализацией

1 голос
/ 11 марта 2019

Я определил пункты меню, используя Navigation Provider с локализацией. Как добавить разрыв строки в середине имени меню?

Поставщик навигации 

public override void SetNavigation(INavigationProviderContext context)
    {
        context.Manager.MainMenu
            .AddItem(
                new MenuItemDefinition(
                    "Menu Item",
                    new LocalizableString("MenuItem", MyAppConsts.LocalizationSourceName),
                    url: "#/menuitem",
                    icon: "fa fa-clipboard"
                    )
            );
    }

Исходный файл моей локализации 

    <?xml version="1.0" encoding="utf-8" ?>
    <localizationDictionary culture="en">
      <texts>
        <text name="MenuItem" value="Menu Item" />
      </texts>
    </localizationDictionary>

cshtml файл, в котором создается меню 

<div class="sidebar-inner">

            <nav>
                <ul class="nav nav-sidebar">
                    <li ng-repeat="menuItem in vm.menu.items" ng-class="{active: vm.currentMenuName == menuItem.name}" class="nav-parent">
                        <a ng-if="!menuItem.items.length" ng-href="{{menuItem.url}}"><i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i><span>{{menuItem.displayName}}</span><span class="fa arrow"></span></a>
                        <a ng-if="menuItem.items.length" href="" ><i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i><span>{{menuItem.displayName}}</span><span class="fa arrow"></span></a>
                        
                        <ul ng-if="menuItem.items.length" class="children collapse">
                            <li ng-repeat="menuSubItem in menuItem.items">
                                <a ng-href="{{menuSubItem.url}}"><span>{{menuSubItem.displayName}}</span></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
 </div>

Я хочу, чтобы это отображалось как 

 Menu
 Item

Не так 

Menu Item

Заранее спасибо.

Ответы [ 3 ]

1 голос
/ 11 марта 2019

Попробуйте добавить фильтр разделения в angular и измените код на: 

<span>{{menuSubItem.displayName | split:' ':0}}<br /> {{menuSubItem.displayName | split:' ':1}}</span>

См. Как разделить строку с помощью angularJS , как добавить фильтр разделения.

0 голосов
/ 13 марта 2019

Я понял это с помощью разделения строк.В исходный код XML я добавил '$', где я хочу разбить имя меню на две строки. 

<texts>
    <text name="MenuItem1" value="Long$Name" />
    <text name="MenuItem2" value="Short Name" />
</texts>

Затем я использовал разбивку строк, чтобы разбить отображаемое имя меню на две части, и отобразил его на две части.строки с тегом
. 

<a ng-if="!menuItem.items.length" ng-href="{{menuItem.url}}">
       <i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i>
       <span>
          {{menuItem.displayName.split('$')[0]}} <br> {{menuItem.displayName.split('$')[1]}}
       </span><span class="fa arrow"></span>
</a>
0 голосов
/ 11 марта 2019

Как вы можете видеть в файле, который я сказал в комментариях, есть теги ul-li для создания меню, что означает, что вы можете изменить оформление вида с помощью css. Если вы используете bootstrap, просто измените <div class="menu"> на <nav class="navbar navbar-default">и измените <ul class="list"> на <ul class="nav navbar-nav">.

...