欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

安装 Angular Material UI

程序员文章站 2022-06-07 22:10:16
...

文档
调色板

安装

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