@moxa/formoxa v9.18.1

F2E Pro UI Library

An UI library base on Angular Material for Moxa products.

Documentation

To be continue... (To be come out with Storybook)

Installation

At first, you have to install the Angular Material and set it up. How to install Angular Material.

Then install UI library:

$ npm install @moxa/formoxa

Usage

Import the modules or standalone component you're going to use, such as anchor, table...

You might also need to import some dependence modules, like MaterialsModule..., when you're using those modules we provided.

import { MxCardModule } from '@moxa/formoxa/mx-card';
@NgModule({
  ...
  imports: [
    CommonModule,
    BrowserModule,

    MaterialsModule,
    MxCardModule
  ],
  ...
})
export class AppModule {}

// Standalone
@Component({
  imports: [
    CommonModule,
    BrowserModule,

    MaterialsModule,
    MxAnchorComponent,
    MxCardModule
    ...
  ]
})
export class AppComponent {}

Import Angular Material Modules

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
...

@NgModule({
  imports: [
    MatButtonModule,
    MatCheckboxModule,
    ...
  ]
})
export class AppModule {}

// Standalone
@Component({
  imports: [
    MatButtonModule,
    MatCheckboxModule,
    ...
  ]
})
export class AppComponent {}

Theming

There are few things need to add in yours app's global style, like styles.scss, for theming components:

1. include mat.core()
2. define material palette
3. define material light and dark theme
4. include mat.all-component-themes()
5. include customize themingAllcomponents()

@use '@angular/material' as mat;
@use '@moxa/formoxa' as *; // including base, components, layout styles forwarding
@use '@moxa/formoxa/theming' as mxTheming;

@include mat.all-component-typographies();
@include mat.core();

// UI Library light theme
$mx-app-primary: mat.define-palette($mx-primary, 800);
$mx-app-accent: mat.define-palette($mx-accent, 800);
$mx-app-warn: mat.define-palette($mx-warn, 900);
$mx-app-theme: mat.define-light-theme(
  (
    color: (
      primary: $mx-app-primary,
      accent: $mx-app-accent,
      warn: $mx-app-warn
    )
  )
);

$mx-app-dark-primary: mat.define-palette($mx-primary, 400);
// UI Library dark theme
$mx-app-dark-theme: mat.define-dark-theme(
  (
    color: (
      primary: $mx-app-dark-primary,
      accent: $mx-app-accent,
      warn: $mx-app-warn
    )
  )
);

// @include mat.all-component-themes($mx-app-theme);
@include mat.all-component-themes($mx-app-theme);
@include mxTheming.themingAllComponents($mx-app-theme);
.mx-dark-theme {
  // @include mat.all-component-themes($mx-app-dark-theme);
  @include mat.all-component-colorss($mx-app-dark-theme);
  @include mxTheming.themingAllComponents($mx-app-dark-theme);
}

Icons

In order to keep the consistency of icon system, we highly recommand to download the icons from Material Icons. We also provided a SVG icons' spritesheet which incoluding the icons commonly used in each apps from Material Icons and the custom icons designed by designer.

There are few steps to use the icons-sprite.svg (which we provide in /assets folder in library package) in your apps:

1. Glob icons-sprite.svg from library's assets forlder, to do that please add the assets config in your project.json

"assets": [
  ...,
  {
    "glob": "icons-sprite.svg",
    "input": "node_modules/@moxa/formoxa/assets",
    "output": "assets/"
  }
]

2. Make a service for registry SVG into material icon ( here for more details ), like the example below

@Injectable({
  providedIn: 'root'
})
export class IconRegistryService {
  constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {}

  initData() {
    const basePath = window.parent.location.pathname === '/' ? '/assets/' : `${window.parent.location.pathname}assets/`;

    this.matIconRegistry.addSvgIconSetInNamespace(
      'icon',
      this.domSanitizer.bypassSecurityTrustResourceUrl(basePath + 'icons-sprite.svg')
    );
  }
}

3. Invoke the service you just made in last step in app.module to get ready the icons-sprite.svg when app initialization.

 providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (iconRegistryService: IconRegistryService) => () => iconRegistryService.initData(),
      deps: [IconRegistryService],
      multi: true
    }
  ],

4. Use mat-icon like this ( What icons we provided? ) :

<mat-icon svgIcon="icon:verified_user"></mat-icon>