angular - 如何创建具有多种颜色的角材质主题

问题描述

我正在创建角度材料主题。我正在按照这篇文章生成 3 种颜色主题，其中包含主要颜色、强调颜色和警告颜色，但是我的业务场景期望总共 5 种颜色。

我尝试过的一种方法是在themes.scss 中添加调色板并将这些颜色应用于各个组件，但是有没有更好的方法或在角度材料中提供配置这样的调色板？

下面是我的实现示例。

@import 'src/theme.scss';
$color1: map-get($my-theme, color1);
button.level1 {
  background-color: mat-color($color1);
}
$color2: map-get($my-theme, color2);
button.level2 {
  background-color: mat-color($color2);
}

但是通过这种方法，我需要创建一个按钮，例如<button mat-button class="level1"></button> 我想要的是<button mat-button color="level4"></button> 有人可以帮忙吗？

标签： angularangular-material

OnMatButton和其他“CanColor”组件color是一个指令，唯一支持的值是主要、重音和警告。请参阅https://github.com/angular/material2/blob/master/src/lib/core/common-behaviors/color.ts。使用类覆盖是解决这个问题的唯一方法。但是，如果您创建自己的自定义按钮组件，则可以通过自定义组件的主题化应用不同的主题并实现三种以上的颜色。

这是一个如何使用多个主题的示例：Angular theme with more than 3 colors。在您的情况下，您可以使用my-primary-buttonwraps mat-button、 plusmy-alternate-button等my-special-button。当您为每个按钮设置主题时，您将使用不同的自定义主题，以便每个按钮的主色和强调色不同。您甚至可以只使用一个调色板来使用不同的索引（50、100、200，...）定义您的颜色，因为您在创建主题时只需要三个。

进一步思考，您可能可以通过创建自定义按钮来简化您的界面，该按钮使用由属性修改的通用基本标签选择器，例如，my-custom-button[main]等。my-custom-button[alternate]my-custom-button[special]

angular - 如何创建具有多种颜色的角材质主题

问题描述

解决方案

推荐阅读