如何使用本地化在 Navigation Provider 的 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

正如我在评论中所说的文件中看到的那样，创建菜单有一个 ul-li 标签，这意味着您可以使用 bootstrap 简单地使用 css.If 更改视图装饰将 <div class="menu"> 更改为 <nav class="navbar navbar-default"> 并将 <ul class="list"> 更改为 <ul class="nav navbar-nav">.

Answer 2

尝试向 angular 添加拆分过滤器，并将您的代码更改为：

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

请参阅 How to split a string with angularJS 了解如何添加拆分过滤器。

Answer 3

我已经用字符串拆分弄明白了。在 XML 源代码中，我添加了一个“$”，我想将菜单名称分成两行。

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

然后我使用string split将菜单显示名称分成两部分并用
标签分两行显示。

<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>

如何使用本地化在 Navigation Provider 的 ASP.NET Boilerplate 菜单中添加换行符

How to add a line break in ASP.NET Boilerplate menu from Navigation Provider with localization

c#

line-breaks

angularjs

asp.net-boilerplate

aspnetboilerplate