文章内容
2019/8/10 18:01:12,作 者: 黄兵
Metronic Angular解析
最近在研究Metronic的Angular模板。
Metronic是市场上最受信赖和最受欢迎的管理主题,它基于Bootstrap 4框架,提供构建任何类型的Web应用程序的完整前端。Metronic为经典的jQuery和Angular版本提供了多个演示。Metronic软件包还包括功能强大的构建工具,可轻松管理和部署项目资产。
本次使用的是Metronic v6.0.1的版本。
首先登陆后台,可以看到这里:
这里定义按钮的位置在这里:
具体内容如下:
export class MenuConfig { public defaults: any = { header: { self: {}, 'items': [ { 'title': 'Pages', 'root': true, 'icon-': 'flaticon-add', 'toggle': 'click', 'custom-class': 'kt-menu__item--active', 'alignment': 'left', submenu: [] }, { 'title': 'Features', 'root': true, 'icon-': 'flaticon-line-graph', 'toggle': 'click', 'alignment': 'left', submenu: [] }, { 'title': 'Apps', 'root': true, 'icon-': 'flaticon-paper-plane', 'toggle': 'click', 'alignment': 'left', submenu: [] } ] }, aside: { self: {}, items: [ { title: 'Dashboard', root: true, icon: 'flaticon2-architecture-and-city', page: 'dashboard', translate: 'MENU.DASHBOARD', bullet: 'dot', }, { title: 'Layout Builder', root: true, icon: 'flaticon2-expand', page: 'builder' }, {section: 'Custom'}, { title: 'Custom Link', root: true, icon: 'flaticon2-link', bullet: 'dot', }, ] }, }; public get configs(): any { return this.defaults; } }
这里定义了具体的显示内容。
如果在实际项目中,这个需要替换成数据库获取数据。
加载这个菜单的具体代码如下,(路径如下:src/app/core/_base/layout/services/menu-horizontal.service.ts):
loadMenu() { // get menu list const menuItems = objectPath.get(this.menuConfigService.getMenus(), 'header.items'); this.menuList$.next(menuItems); }
使用的是服务,采用依赖注入的方式读取数据。
好了,今天就说到这里,明天未完继续。
黄兵个人博客原创。
转载请注明出处:黄兵个人博客 - Metronic Angular解析
评论列表