[英]Aurelia - A way to add a divider into a multi level drop down menu
我有一个用于带有引导程序的Aurelia的多级下拉菜单,但是虽然它的三个级别很深,并且以此为基础进行扩展,但是我无法通过路由设置添加分隔线。
现在,分隔线在列表标记<li></li>
使用类“ divider”。好了,所以我想通过添加条目divider: true
在下拉菜单的设置中为divider: true
,我可以检查一下,如果显示链接等,可以改为显示分隔线,但是我不知道如何将其实现到navmenu.html文件中。 这是文件:
<ul class="nav navbar-nav">
<li repeat.for="route of router.navigation" class="${route.isActive ? 'active' : ''}">
<a href.bind="route.href" if.bind="!route.settings.nav"><span class="glyphicon glyphicon-${ route.settings.icon }"></span> ${route.title}</a>
<a href.bind="route.href" if.bind="route.settings.nav" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-${ route.settings.icon }"></span> ${route.title} <span class="caret"></span> <!--First level menu heading - requires route.settings.nav to exist-->
</a>
<ul if.bind="route.settings.nav" class="dropdown-menu">
<li repeat.for="menu of route.settings.nav" class="dropdown-submenu">
<a href.bind="menu.href" if.bind="!menu.navSettings.subNav"><span class="glyphicon glyphicon-${ menu.navSettings.icon }"></span> ${menu.title}</a>
<a href.bind="menu.href" if.bind="menu.navSettings.subNav" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-${ menu.navSettings.icon }"></span> ${menu.title} <span class="caret-right"></span>
</a>
<ul if.bind="menu.navSettings.subNav" class="dropdown-menu">
<li repeat.for="subMenu of menu.navSettings.subNav" class="dropdown-submenu">
<a href.bind="subMenu.href" if.bind="!subMenu.subNavSettings.subSubNav"><span class="glyphicon glyphicon-${ subMenu.subNavSettings.icon }"></span> ${subMenu.title}</a>
<a href.bind="subMenu.href" if.bind="subMenu.subNavSettings.subSubNav" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-${ subMenu.subNavSettings.icon }"></span> ${subMenu.title} <span class="caret-right"></span>
</a>
<ul if.bind="subMenu.subNavSettings.subSubNav" class="dropdown-menu">
<li repeat.for="lowestSubMenu of subMenu.subNavSettings.subSubNav" class="dropdown-submenu">
<a href.bind="lowestSubMenu.href"> <span class="glyphicon glyphicon-${ lowestSubMenu.subSubNavSettings.icon }"></span> ${lowestSubMenu.title}</a>
</li>
</ul>
</li>
</ul>
</li> [ALL THE ANCHORS HERE OR A DIVIDER.. HOW DO I DO A TERNARY TO CHECK ON EACH REPEAT FOR A DIVIDER VALUE IN THE SETTINGS ARRAY.
</ul>
</li>
</ul>
以下是导航菜单从中读取的路线图:
{
route: "clients",
name: "clients",
moduleId: PLATFORM.moduleName("../components/clients/clientList/clientList"),
title: "Clients",
nav: true,
settings: {
nav: [
{
href: "#clients/clientsList",
title: "Client List",
navSettings: {
icon: "list",
roles: ["Employee", "Admin"],
}
},
{
navSettings: {
roles: ["Employee", "Admin"],
divider: true, // HERE IS MY DIVIDER
}
},
{
href: "#clients/Create",
title: "Create Client",
navSettings: {
icon: "user",
roles: ["Employee", "Admin"],
}
}
],
icon: "user",
auth: true,
roles: ["Employee", "Admin"],
pos: "left"
}
},
问题是<li></li>
重复了一次,我需要检查该重复-li以查看“ navSettings是否具有条目分隔符:true,如果不是,则显示链接(菜单项),而是显示分隔线。
如何丢弃锚点,而是显示带有“ divider”类的列表行。 让我大吃一惊的是,li具有repeat.for,我需要显示<li></li>
标记之间的所有内容,或者显示分隔符。
我需要检查一下:
<li repeat.for="menu of route.settings.nav" class="dropdown-submenu">
并将类别从“下拉菜单”更改为“分隔线”,同时通过对分隔线进行类似的检查(如果我猜是if.bind),则不显示任何锚点<a></a>
。
希望你能帮忙..
在<li>
使用class="${menu.divider ? 'divider' : 'dropdown-submenu'}"
。
将if.bind
上的menu.divider
用于<li>
内的元素。
<li repeat.for="menu of route.settings.nav" class="${menu.divider ? 'divider' : 'dropdown-submenu'}">
<a if.bind="!menu.divider" href.bind="lowestSubMenu.href"> <span class="glyphicon glyphicon-${ lowestSubMenu.subSubNavSettings.icon }"></span> ${lowestSubMenu.title}</a>
<div if.bind="menu.divider" class="divider"></div>
</li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.