前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Ng-Matero:基于 Angular Material 搭建的中后台管理框架

Ng-Matero:基于 Angular Material 搭建的中后台管理框架

作者头像
叙帝利
修改2020-07-11 09:53:56
3K0
修改2020-07-11 09:53:56
举报
文章被收录于专栏:前端新视界

前言

目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用。

很多人都说 Material 是一个面向 C 端的框架,其实在使用其它框架做管理系统的时候,我发现 Material 的组件基本已经够用了,其它不足的地方可以配合一些优秀的第三方库。另外,Material 的确是一个高质量的组件库,不管是设计思路还是使用方式,都近乎完美。

经过一个多月的设计与思考,我开发了这款基于 Angular Material 的中后台管理框架,初期架构设计已经完成,在接下来的版本中会提供 schematics 支持及 vscode snippet 工具。同时,为了弥补 Material 的不足以及更好的发挥框架的优势,我创建了另外一个项目以扩展 Material 的组件库。

因为目前还没有完善的文档,所以本篇文章会简单介绍一下框架的使用。

Github: https://github.com/ng-matero/ng-matero 预览地址: https://ng-matero.github.io/ng-matero/

目录结构

先看一下目录结构,这个目录结构遵循了 Angular 的最佳实践,尽量保证结构的规范化与合理性。

代码语言:javascript
复制
├── 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 方式可能更简单。

代码语言:javascript
复制
<div class="matero-row" fxLayout="row wrap">
    <div class="matero-col" fxFlex.gt-sm="60" fxFlex="100">
    ...
    </div>
</div>
代码语言:javascript
复制
<div fxLayout="row wrap" fxLayoutGap="16px grid">
    <div fxFlex.gt-sm="60" fxFlex="100">
    ...
    </div>
</div>

配置布局

通过在 settings 服务中传入配置对象可以配置页面的布局,比如

代码语言:javascript
复制
// 配置选项接口
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 的模板,不要使用上面这种配置方式。

配置菜单

以下是菜单的类型定义

代码语言:javascript
复制
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() 方法设置好菜单。以下是菜单的配置示例:

代码语言:javascript
复制
{
  "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 的颜色定义如下,包括主体色值以及对应的对比色值:

代码语言:javascript
复制
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-headerbreadcrumb 两个通用组件,其中 page-header 默认包含 breadcrumb,可以通过设置 showBreadCrumb="false" 关闭面包屑,另外可以通过 titlesubtitle 设置标题和副标题,page-header 同样支持颜色系统,可以直接添加颜色类来改变页面标题部分的颜色,如下:

代码语言:javascript
复制
<page-header class="bg-purple-500"></page-header>

辅助类

Helper 编写延续了 snack-helper 的设计原则,非常简单,可以参见源码,在此不过多阐述,感兴趣的朋友可以阅读我之前写的文章 如何编写通用的 Helper Class

开发计划

目前框架只完成了一期规划,后面的路还有很长,首先会支持 schematics,可以使用 ng add 来添加项目,同时也会提供 vscode 工具包,最后还希望广大 ng 爱好者可以加入到项目中来,共建 ng 生态。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-07-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 目录结构
  • 响应式布局系统
  • 配置布局
  • 配置菜单
  • 颜色系统
  • 页面标题
  • 辅助类
  • 开发计划
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档