angular - 如何从 Primary Palette 获得色调/浅色

Question

所以在 Angular Material 2 中，我设置了主题

$store-primary: mat-palette($mat-storecast);
$store-accent:  mat-palette($mat-pink, A200, A100, A400);

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

// Create the theme object (a Sass map containing all of the palettes).
$store-theme: mat-light-theme($store-primary, $store-accent, $store-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($store-theme);

我无法从他们的文档中弄清楚如何从主调色板(即按钮上的工具栏)获取不同的色调颜色。

<button md-mini-fab (click)="zoomIn()" color="primary">
     <md-icon>add</md-icon>
</button>

它似乎只理解 color=primary 或 color=accent 等。你如何指定我想使用 primary-100 或 primary-500 等？

Answer 1

官方给出的回答是目前无法做到这一点。大多数组件上可用的 color 属性只接受调色板类型 - 即 primary、accent 或 warn。

如果您真的想这样做，非官方的回答是，如果您不介意滥用内部 API，则可以(在逐个组件的基础上)。例如，要在按钮上获得 A100 颜色，您可以向主题添加自定义混合。

// custom-button-theme.scss
@import '~@angular/material/core/theming/all-theme';
@import '~@angular/material/button/_button-theme';

@mixin custom-button-theme($theme) {

  .mat-raised-button.a100, .mat-fab.a100, .mat-mini-fab.a100 {
    // _mat-button-theme-color is a mixin defined in _button-theme.scss
    // which applies the given property, in this case background-color
    // for each of the palettes - i.e. primary, accent and warn.
    // The last parameter is the hue colour to apply.
    @include _mat-button-theme-color($theme, 'background-color', 'A100');
  }

}

然后在您的主主题文件中导入自定义 mixin。

@import 'custom-button-theme.scss';
@include custom-button-theme($store-theme);

然后您的按钮可以通过添加 a100 类来使用颜色。

<button md-mini-fab (click)="zoomIn()" color="primary" class="a100">
  <md-icon>add</md-icon>
</button>

但请务必注意，内部 API 可能随时更改。此代码已使用版本 2.0.0-beta.2 进行测试 - 无法保证它在发布时可以与 beta 3 一起使用。