Question

定义调色板时，色调实际上会影响什么？

hpsapf-primary: mat-palette($mat-light-blue, 400, 50, 900);

第一个值（400）是默认色调。
第二个值（50）是较浅的色调。
第三个值（900）是较深的色调。

在组件上设置color =“ primary”时使用默认色调

// The button gets the color #29B6F6 as can be looked up here: https://material.io/design/color/#tools-for-picking-colors
<button mat-button color="primary">Primary</button>

那么Angular Material如何使用较浅（50）和较深（900）的色相，或者如何使用它们？它们有什么用？

Answer 1

通过查看Angular Material源代码可以看到它们的用法。更具体地说，请看一些主题主题混合文件。来自progress bar的示例：

@mixin mat-progress-bar-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  .mat-progress-bar-background {
    fill: mat-color($primary, lighter);
  }

  .mat-progress-bar-buffer {
    background-color: mat-color($primary, lighter);
  }

  .mat-progress-bar-fill::after {
    background-color: mat-color($primary);
  }
  ...
}

您可以通过主题实用程序mixins和功能以及默认，较亮，较暗，默认对比度，较亮和较暗的调色板映射键以相同的方式使用它们。主题指南中对此进行了说明：https://material.angular.io/guide/theming-your-components#note-using-the-code-mat-color-code-function-to-extract-colors-from-a-palette。

Answer 2

更新：第一个答案是正确的，这个想法就在那里，我将我的答案带回来。对于像我这样刚接触角材料的人来说，这有点模糊。以下链接或此处的Angular 2 Material use lighter/darker colors on button确实可以满足我的需求。上一个答案可能适用于进度条，但是现在我看不到它如何与按钮一起工作。如果有人知道如何做，请提供帮助。 Angular的文档很少。但是我仍然更喜欢如果我能像这样使用它

<button mat-button color="primary darker">Primary darker</button>

也许在它旁边我希望颜色为默认颜色，然后我可以像这样使用它

<button mat-button color="primary default">2nd default</button>
<button mat-button color="primary default">3rd default</button>

我想这就是问题的方式和内容。更新结束。

~~因为这里没有答案，但实际上只有附近。他们似乎错过了重点。我们中有些人对颜色有些挑剔~~。因此，让我尝试重新说明问题是什么。

他只是想使用这样的东西：

<button mat-button color="primary default">Primary default</button>
<button mat-button color="primary lighter">Primary lighter</button>
<button mat-button color="primary darker">Primary darker</button>

我希望这是他想问的，因为它看起来像这样。

我认为可以在Angular 2 Material use lighter/darker colors on button

中找到答案

可以正常工作的，如果我认为最可行的IF。我待会儿会尝试，稍后会对此文章进行编辑。

角度材质主题中的色相

2 个答案: