我使用 Aurelia 创建了一个示例,它使用左侧菜单实现了分层菜单结构。
这里有关于示例项目的注释 https://github.com/cmichaelgraham/aurelia-typescript/tree/master/multi-level-menu#multi-level-menu
You can 在线运行示例 http://cmichaelgraham.github.io/aurelia-typescript/multi-level-menu/测试一下
多级菜单示例展示了在构建 Aurelia SPA 网站时如何快速创建分层菜单。
多级菜单可帮助用户浏览页面层次结构。
配置路由和层次结构很容易,如下所示:
import aur = require("aurelia-router");
import mlmps = require("./MultiLevelMenuPipelineStep");
export class App {
static inject = [aur.Router];
constructor(public router: aur.Router) {
this.router.configure((config) => {
config.title = "Aurelia VS/TS";
config.addPipelineStep("modelbind", mlmps.MultiLevelMenuPipelineStep);
config.map([
{ route: ["", "home"], moduleId: "views/home", nav: true, title: "home", settings: { level: 0, show: true } },
{ route: ["item-1"], moduleId: "views/item-1", nav: true, title: "item 1", settings: { level: 0, show: true } },
{ route: ["item-1-1"], moduleId: "views/item-1-1", nav: true, title: "item 1.1", settings: { level: 1, show: false } },
{ route: ["item-1-2"], moduleId: "views/item-1-2", nav: true, title: "item 1.2", settings: { level: 1, show: false } },
{ route: ["item-2"], moduleId: "views/item-2", nav: true, title: "item 2", settings: { level: 0, show: true } },
{ route: ["item-2-1"], moduleId: "views/item-2-1", nav: true, title: "item 2.1", settings: { level: 1, show: false } },
{ route: ["item-2-2"], moduleId: "views/item-2-2", nav: true, title: "item 2.2", settings: { level: 1, show: false } },
{ route: ["item-2-2-1"], moduleId: "views/item-2-2-1", nav: true, title: "item 2.2.1", settings: { level: 2, show: false } },
{ route: ["item-2-2-2"], moduleId: "views/item-2-2-2", nav: true, title: "item 2.2.2", settings: { level: 2, show: false } },
{ route: ["item-2-3"], moduleId: "views/item-2-3", nav: true, title: "item 2.3", settings: { level: 1, show: false } }
]);
});
}
}
The level
属性用于建立层次结构。这show
属性控制菜单中路线的可见性。路由器导航管道步骤查看目标导航并相应地设置路线可见性。导航助手提供了一个按钮,用于从当前路由向上导航一个级别,并向路由器调用相应的导航命令。