Ng-Matero 0.1 has been released, adding Schamatics, Ng Add support

preface

There are few Angular Material backend frameworks on the market, most of which are fee-based and not very useful.

Many people say that Material is a C-oriented framework. In fact, when I use other frameworks as management systems, I find that the components of Material are basically enough, and other deficiencies can be combined with some excellent third-party libraries. In addition, Material is indeed a high-quality component library that is almost perfect in both design and usage.

After more than a month of design and thinking, I developed the Angular Material based middle and background management framework. The initial architecture design has been completed, and schematics support and VScode snippet tools will be provided in the next version. At the same time, I created another project to extend Material’s component library in order to make up for Material’s shortcomings and take advantage of the framework.

Since there is no complete documentation yet, this article will briefly cover the use of the framework.

Making: github.com/ng-matero/n…

Preview address: ng-matero.github. IO /ng-matero/

The directory structure

Take a look at the directory structure, which follows Angular best practices to keep it as formal and rational as possible.

├ ─ ─ the SRC │ ├ ─ ─ app │ │ ├ ─ ─ the core # core modules │ │ │ ├ ─ ─ interceptors # HTTP interceptor │ │ │ │ └ ─ ─ the default. The interceptor. Ts │ │ │ ├ ─ ─ Services │ │ │ │ ├ ─ ─ Settings. The service. The ts # page layout configuration │ │ │ │ ├ ─ ─ menu. The service. The ts # menu configuration │ │ │ │ └ ─ ─ startup. Service. Ts # ├─ ├─ routing-routing.module. │ ├─ routes │ ├── routes │ ├── routes │ ├─ routing-routing.module Business registration routing mouth │ │ │ └ ─ ─ routes. The module. The ts # business routing module │ │ ├ ─ ─ Shared # Shared module │ │ │ └ ─ ─ Shared. The module. The ts # Shared module file │ │ ├ ─ ─ theme # Theme directory │ │ │ ├ ─ ─ the admin - layout # admin layout │ │ │ ├ ─ ─ auth - landing layout # registered layout │ │ | └ ─ ─ theme. The module. The ts # theme module │ │ ├ ─ ─ ├─ ├─ exercises # ├─ exercises # ├─ exercises # ├─ exercises # ├─ Environments # ├─ Styles # Style Directory │ │ ├─ Component # Public Component Styles │ │ ├─ helpers # Tool Classes │ │ ├─ Mixins # mixins │ │ ├─ ├─ ├─ ├─ │ ├─ ├─ ├─ │ ├─ ├─ ├─ ├─ ├.scss # ├─ ├.scss # ├─ ├.scss #Copy the code

Responsive layout system

The framework’s responsive layout system uses The Official Angular flex-Layout, which includes Flex and grid, and is very useful.

The column spacing problem is a little tricky, though. While flex-Layout adds fxLayoutGap=”16px grid” to the seemingly perfect solution, it still doesn’t work well unless every element block is included in fxFlex. Finally, I still use the common margin negative method in the industry. Matero-col is required on fxLayout and.matero-row is required on fxFlex. Matero-col is not required, but in some cases it may be easier to use grid.

<div class="matero-row" fxLayout="row wrap">
    <div class="matero-col" fxFlex.gt-sm="60" fxFlex="100">.</div>
</div>
Copy the code
<div fxLayout="row wrap" fxLayoutGap="16px grid">
    <div fxFlex.gt-sm="60" fxFlex="100">.</div>
</div>
Copy the code

Configuration layout

You can configure the layout of the page by passing in a configuration object in the Settings service, for example

// Configure the options interface
export interfaceDefaults { showHeader? :boolean; headerPos? :'fixed' | 'static' | 'above'; navPos? :'side' | 'top'; sidenavCollapsed? :boolean; sidenavOpened? :boolean; showUserPanel? :boolean; dir? :'ltr' | 'rtl';
}

// Default configuration options
const defaults: Defaults = {
  showHeader: true.headerPos: 'fixed'.navPos: 'side'.sidenavCollapsed: false.sidenavOpened: true.showUserPanel: true.dir: 'ltr'};// Set up the layout, inject the service, initialize the data to perform the following methods
this.settings.setLayout(options)
Copy the code

At present, the design of configuration layout has not been decided, and global configuration may be carried out in the root module later. Personally, I think it is better to directly adjust the layout template, and do not use the above configuration method.

Configuration menu

The following is the type definition of the menu

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[]; }Copy the code

The menu service is injected into the root component, and the full menu is available via getAll(), again set by the set() method after initialization. Here is an example of menu configuration:

{
  "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"}}}]]Copy the code

Color system

In the preview page, you can see a lot of colors, while the Material itself has only three main colors, which can be easily changed through the color system.

The color system is generated using SASS from the Material’s official color value, which is defined as follows, including the main color value and the corresponding contrast color value:

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',
    },
  }
Copy the code

You can use class directly to add colors, such as.bg-red-500 for a background color,.text-red-500 for text, and.text-light,.text-dark for contrasting colors

The page title

ShowBreadCrumb =”false”; showBreadCrumb=”false”; Page-header also supports color system, you can directly add color class to change the page title part of the color, as follows:

<page-header class="bg-purple-500"></page-header>
Copy the code

Auxiliary class

Helper to write for snack – the design principle of Helper, is very simple, you can see the source code, in this, but more interested friends can read my previous articles How to write generic Helper Class

Development plan

At present, the framework has only completed the first phase of planning, and there is still a long way to go. First of all, schematics will be supported, ng add can be used to add projects, and vscode toolkit will be provided. Finally, we hope that all ng fans can join the project to build ng ecology.