安装 Angular Material UI

文档

调色板

安装

ng add @angular/material
? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up HammerJS for gesture recognition? Yes
? Set up browser animations for Angular Material? Yes

创建 mat.module

$ ng g module mat --flat --module=app
CREATE src/app/mat.module.ts (187 bytes)
UPDATE src/app/app.module.ts (1231 bytes)

在模块中导入

// mat.module.ts
import { NgModule } from "@angular/core";
import { MatButtonModule } from "@angular/material";

@NgModule({
  declarations: [],
  imports: [MatButtonModule],
  exports: [MatButtonModule],
})
export class MatModule {}

使用

<button mat-button>text</button>

自定义主题

// custom-theme.scss

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$ng7-primary: mat-palette($mat-blue, 500);
$ng7-accent: mat-palette($mat-pink, A200, A100, A400); // 默认值，更亮和更暗

// The warn palette is optional (defaults to red).
$ng7-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$ng7-theme: mat-light-theme($ng7-primary, $ng7-accent, $ng7-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($ng7-theme);

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

如何使用多个主题？文档

• 编辑 "custom-theme.scss" 添加新的主题:

@import "~@angular/material/theming";
@include mat-core();

// default design
$ng-elm-primary: mat-palette($mat-blue); // primary
$ng-elm-accent: mat-palette($mat-pink, A200, A100, A400); // secondary
$ng-elm-warn: mat-palette($mat-red);
$ng-elm-theme: mat-light-theme($ng-elm-primary, $ng-elm-accent, $ng-elm-warn);
@include angular-material-theme($ng-elm-theme);

// ajanuw design
$ajanuw-primary: mat-palette($mat-purple);
$ajanuw-accent:  mat-palette($mat-amber, A200, A100, A400);
$ajanuw-warn:    mat-palette($mat-deep-orange);
$ajanuw-theme:   mat-dark-theme($ajanuw-primary, $ajanuw-accent, $ajanuw-warn);

// 在父类拥有“.mat-ajanuw-theme”时生效
.mat-ajanuw-theme {
  @include angular-material-theme($ajanuw-theme);
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

• 使用:

<button mat-button color="primary">default design</button>
<div class="mat-ajanuw-theme">
  <button mat-button color="primary">ajanuw design</button>
</div