Ng-Matero:基于 Angular Material 搭建的中后台管理框架
Ng-Matero 0.1 已发布,添加 schamatics,支持 ng add
前言
目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用。
很多人都说 Material 是一个面向 C 端的框架,其实在使用其它框架做管理系统的时候,我发现 Material 的组件基本已经够用了,其它不足的地方可以配合一些优秀的第三方库。另外,Material 的确是一个高质量的组件库,不管是设计思路还是使用方式,都近乎完美。
经过一个多月的设计与思考,我开发了这款基于 Angular Material 的中后台管理框架,初期架构设计已经完成,在接下来的版本中会提供 schematics 支持及 vscode snippet 工具。同时,为了弥补 Material 的不足以及更好的发挥框架的优势,我创建了另外一个项目以扩展 Material 的组件库。
因为目前还没有完善的文档,所以本篇文章会简单介绍一下框架的使用。
目录结构
先看一下目录结构,这个目录结构遵循了 Angular 的最佳实践,尽量保证结构的规范化与合理性。
├── src
│ ├── app
│ │ ├── core # 核心模块
│ │ │ ├── interceptors # HTTP 拦截器
│ │ │ │ └── default.interceptor.ts
│ │ │ ├── services
│ │ │ │ ├── settings.service.ts # 页面布局配置
│ │ │ │ ├── menu.service.ts # 菜单配置
│ │ │ │ └── startup.service.ts # 初始化项目配置
│ │ │ └── core.module.ts # 核心模块文件
│ │ ├── routes
│ │ │ ├── ** # 业务目录
│ │ │ ├── routes-routing.module.ts # 业务路由注册口
│ │ │ └── routes.module.ts # 业务路由模块
│ │ ├── shared # 共享模块
│ │ │ └── shared.module.ts # 共享模块文件
│ │ ├── theme # 主题目录
│ │ │ ├── admin-layout # admin 布局
│ │ │ ├── auth-layout # 登陆注册布局
│ │ | └── theme.module.ts # 主题模块
│ │ ├── app.component.ts # 根组件
│ │ └── app.module.ts # 根模块
│ │ └── material.module.ts # Material 组件模块
│ ├── assets # 本地静态资源
│ ├── environments # 环境变量配置
│ ├── styles # 样式目录
│ │ ├── component # 公用组件样式
│ │ ├── helpers # 工具类
│ │ ├── mixins # mixins
│ │ ├── plugins # 第三方库样式
│ │ ├── **
│ │ ├── theme # 主题核心样式
│ │ └── app.scss # 主题样式入口文件
└── └── style.scss # 样式主入口文件
响应式布局系统
框架的响应式布局系统采用了 Angular 官方提供的 flex-layout,包含 flex 以及 grid,确实非常好用。
但是关于列间距问题稍微有点坑,虽然 flex-layout 增加了 fxLayoutGap="16px grid"
这样看似完美的方案,但是还是不太好用,除非每一个元素块都包含在 fxFlex 中。最终我还是使用业界比较普遍的 margin 负值的方式。需要在 fxLayout 上面添加 .matero-row
,在 fxFlex 上面添加 .matero-col
,当然这也不是必须的,在某些情况下使用 grid 方式可能更简单。
<div class="matero-row" fxLayout="row wrap">
<div class="matero-col" fxFlex.gt-sm="60" fxFlex="100">
...
</div>
</div>
<div fxLayout="row wrap" fxLayoutGap="16px grid">
<div fxFlex.gt-sm="60" fxFlex="100">
...
</div>
</div>
配置布局
通过在 settings 服务中传入配置对象可以配置页面的布局,比如
// 配置选项接口
export interface Defaults {
showHeader?: boolean;
headerPos?: 'fixed' | 'static' | 'above';
navPos?: 'side' | 'top';
sidenavCollapsed?: boolean;
sidenavOpened?: boolean;
showUserPanel?: boolean;
dir?: 'ltr' | 'rtl';
}
// 默认配置选项
const defaults: Defaults = {
showHeader: true,
headerPos: 'fixed',
navPos: 'side',
sidenavCollapsed: false,
sidenavOpened: true,
showUserPanel: true,
dir: 'ltr',
};
// 设置布局,注入服务,初始化数据后可以执行如下方法
this.settings.setLayout(options)
目前关于配置布局的设计还没有想好,后期可能会在根模块进行全局配置,个人觉得更好的方式还是直接调整 layout 的模板,不要使用上面这种配置方式。
配置菜单
以下是菜单的类型定义
export interface Tag {
color: string; // Background Color
value: string;
}
export interface ChildrenItem {
state: string;
name: string;
type: 'link' | 'sub' | 'extLink' | 'extTabLink';
children?: ChildrenItem[];
}
export interface Menu {
state: string;
name: string;
type: 'link' | 'sub' | 'extLink' | 'extTabLink';
icon: string;
label?: Tag;
badge?: Tag;
children?: ChildrenItem[];
}
菜单服务会注入到根组件,通过 getAll()
可以获取到全部菜单,同样是在初始化数据后通过 set()
方法设置好菜单。以下是菜单的配置示例:
{
"menu": [{
"state": "dashboard",
"name": "Dashboard",
"type": "link",
"icon": "dashboard",
"badge": {
"color": "red-500",
"value": "5"
}
},
{
"state": "design",
"name": "Design",
"type": "sub",
"icon": "color_lens",
"children": [{
"state": "colors",
"name": "Color System",
"type": "link"
},
{
"state": "icons",
"name": "Icons",
"type": "link"
}]
}]
}
颜色系统
在预览页面,大家可以看到很丰富的颜色,而 Material 本身只有三种主色,通过颜色系统也可以很容易更换颜色。
颜色系统是通过 Material 的官方色值用 sass 生成的,Material 的颜色定义如下,包括主体色值以及对应的对比色值:
red: {
50: '#FFEBEE',
100: '#FFCDD2',
200: '#EF9A9A',
300: '#E57373',
400: '#EF5350',
500: '#F44336',
600: '#E53935',
700: '#D32F2F',
800: '#C62828',
900: '#B71C1C',
A100: '#FF8A80',
A200: '#FF5252',
A400: '#FF1744',
A700: '#D50000',
contrast: {
50: 'dark',
100: 'dark',
200: 'dark',
300: 'dark',
400: 'light',
500: 'light',
600: 'light',
700: 'light',
800: 'light',
900: 'light',
A100: 'dark',
A200: 'light',
A400: 'light',
A700: 'light',
},
}
可以直接使用 class 添加颜色,比如背景色可以用 .bg-red-500
,文本色则是 .text-red-500
,与之对应的对比色可以是 .text-light
,.text-dark
页面标题
框架默认提供了 page-header
和 breadcrumb
两个通用组件,其中 page-header
默认包含 breadcrumb
,可以通过设置 showBreadCrumb="false"
关闭面包屑,另外可以通过 title
和 subtitle
设置标题和副标题,page-header
同样支持颜色系统,可以直接添加颜色类来改变页面标题部分的颜色,如下:
<page-header class="bg-purple-500"></page-header>
辅助类
Helper 编写延续了 snack-helper 的设计原则,非常简单,可以参见源码,在此不过多阐述,感兴趣的朋友可以阅读我之前写的文章 如何编写通用的 Helper Class
开发计划
目前框架只完成了一期规划,后面的路还有很长,首先会支持 schematics,可以使用 ng add
来添加项目,同时也会提供 vscode 工具包,最后还希望广大 ng 爱好者可以加入到项目中来,共建 ng 生态。
Ng-Matero:基于 Angular Material 搭建的中后台管理框架的更多相关文章
- 推荐一款基于Angular实现的企业级中后台前端/设计解决方案脚手架
ng-alain 是一个企业级中后台前端/设计解决方案脚手架,我们秉承 Ant Design 的设计价值观,目标也非常简单,希望在Angular上面开发企业后台更简单.更快速.随着『设计者』的不断反馈 ...
- 基于 Angular Material 的 Data Grid 设计实现
自 Extensions 组件库发布以来,Data Grid 成为了使用及咨询最多的组件.最开始 Data Grid 的设计非常简陋,经过一番重构,组件质量有了质的提升. Extensions 组件库 ...
- 基于layui和bootstrap搭建极简后台管理框架
年前无聊,想自己搭建一个后台管理框架,对比了easyui.Extjs.H-ui.H+UI.layui几个框架,easyui和Extjs虽然功能强大但是界面实在是接受不了,H+UI和layuiAdmin ...
- Angular Material 的设计之美
前言 Angular Material 作为 Angular 的官方组件库,无论是设计交互还是易用性都有着极高的质量.正如官方所说其目的就是构建基于 Angular 和 Typescript 的高质量 ...
- Angular Material
Angular Material 的设计之美 Ng-Matero 0.3 已发布,新增 module schematic 以及 page schematic,详见 README 前言 Angula ...
- Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
- Material使用11 核心模块和共享模块、 如何使用@angular/material
1 创建项目 1.1 版本说明 1.2 创建模块 1.2.1 核心模块 该模块只加载一次,主要存放一些核心的组件及服务 ng g m core 1.2.1.1 创建一些核心组件 页眉组件:header ...
- Angular Material design设计
官网: https://material.io/design/ https://meterial.io/components 优秀的Meterial design站点: http://material ...
- Angular Material & Hello World
前言 Angular Material(下称Material)的组件样式至少是可以满足一般的个人开发需求(我真是毫无设计天赋),也是Angular官方推荐的组件.我们通过用这个UI库来快速实现自己的i ...
随机推荐
- WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画
原文:WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画 利用WPF的ListView控件实现类似于Winform中DataGrid行背景色交替变换的效果,同 ...
- Java之nio MappedByteBuffer的资源释放问题
使用nio的MappedByteBuffer映射内存, 在最后执行File.delete()方法的时候, 返回false, 即文件没有被删除. 原因是MappedByteBuffer在内存中也会创建 ...
- WPF编游戏系列 之二 图标效果
原文:WPF编游戏系列 之二 图标效果 本篇将要实现图标的两个效果:1. 显示图标标签,2. 图标模糊效果.在上一篇中提到Image没有HTML <img>的Title属性( ...
- MVC 异步调用
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
- WPF常见内存泄露
Event handlers leak This type of leak occurs when subscribing an object (let's call it listener) to ...
- iOS 自定义UIButton
工作中有一个点击button更新button上文案的需求,用自定义了button可以很简单的实现的这个需求 首先写个自定义的button CustomButton.h #import <UIKi ...
- String内存结构
var s: AnsiString; begin s := '1234567890'; showmessage(s); end; 变量s的内存结构为A8 03 01 00 FF FF FF FF 0A ...
- 数据库的事务日志已满,起因为"LOG_BACKUP"。
问题描述: 数据库的事务日志已满,起因为"LOG_BACKUP". 问题截图: 解决方法: 1).选择数据库–属性—选项—恢复模式–选择简单.2).收缩数据库后,再调回完整. US ...
- Creating a Linux Daemon (service) in Delphi
With the introduction of the Linux target for Delphi, a wide range of possibilities are opened up to ...
- 设置tablewidget自适应列宽和设置自动等宽
在网上很容易知道自适应列宽,100%不留空显示,这里还是提下: /*设置表格是否充满,即行末不留空*/ ui->tableWidget->horizontalHeader()-> ...