文档
调色板
安装
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 '[email protected]/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 "[email protected]/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