文章内容
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解析
评论列表