如何在帶有本地化的導航提供程序的 ASP.NET Boilerplate 菜單中添加換行符

Question

我已經使用帶有本地化的導航提供程序定義了菜單項。 如何在菜單名稱中間添加換行符？

導航提供商

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

先感謝您。

Answer 1

嘗試向角度添加拆分過濾器，並將代碼更改為：

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

請參閱如何使用 angularJS 拆分字符串以了解如何添加拆分過濾器。

Answer 2

正如你在我在評論中所說的文件中看到的，有一個用於創建菜單的 ul-li 標簽，這意味着你可以使用 css 更改視圖裝飾。如果你使用引導程序，只需將<div class="menu">更改為<nav class="navbar navbar-default">並將<ul class="list">更改為<ul class="nav navbar-nav"> 。

Answer 3

我已經使用字符串拆分來解決這個問題。 在 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>