文章内容

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解析

分享到:

发表评论

评论列表