我已使用具有本地化的导航提供程序定义了菜单项。如何在菜单名称中间添加换行符?
导航提供商
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
先感谢您。
尝试将分割过滤器添加到角度,并将代码更改为:
<span>{{menuSubItem.displayName | split:' ':0}}<br /> {{menuSubItem.displayName | split:' ':1}}</span>
请参阅How to split a string with angularJS以了解如何添加拆分过滤器。
正如您在评论中所述的文件中所见,创建菜单时有一个ul-li标签,这意味着您可以使用css更改视图修饰。如果您使用bootstrap,只需将<div class="menu">
更改为<nav class="navbar navbar-default">
并将<ul class="list">
更改为<ul class="nav navbar-nav">
。
我用字符串拆分想出来了。在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>