角度材料设计-如何添加自定义按钮的颜色? [英] Angular material design - how to add custom button color?

问题描述

我想添加自己的自定义颜色，类似于主要"，警告"ETC.例如，我为橙色背景添加了一个类，但将其用作类而不是color属性.它可以工作，但是代码看起来有些混乱.

I want to add my own custom colors, similar to "primary", "warn" etc. For example, I added a class for an orange background, but I use it as a class and not as a color attribute. It works, but the code looks a bit confusing.

<button md-raised-button
        color="primary"
        class="btn-w-md ml-3 orange-500-bg">
          <i class="material-icons">description</i>
          Deactivate
</button>

我需要怎么做才能将其添加为 color =" orange" ?

What do I need to do to add it as color="orange"?

推荐答案

您只能通过常规的CSS方式来更改按钮的颜色，方法是为橙色定义背景色并将其用作类属性.

You can change the color of the button only in the normal css way by defining a class for background color orange and using it as class attribute.

如果需要将其用作color ="orange".然后，您需要使用所需的颜色创建自己的主题.有关如何操作的信息，请参考为有角度的材质应用设置主题.您甚至可以针对每个元素自定义它.通过自定义，您可以根据以下主题选择不同的主题元素

If you need to use it as color="orange". Then you need to create your own theme with the colors you need. Refer Theming your angular material app on how to do it. You can even make it custom for each element. Through customisation you can choose different themes based on elements

但是您仍然无法像color ="orange"那样使用它，您可以根据需要将橙色定义为主要色或强调色，并使用color ="primary"或color ="accent".

But still you wont be able to use it like color="orange", you can define orange as your primary or accent color and use it as color="primary" or color="accent" based on your need.

主题只能包含以下具有不同颜色的项目

Theme can have only following items with different colors

• 主调色板:在所有屏幕和组件中使用最广泛的颜色.
• 强调调色板:用于浮动操作按钮和交互式元素的颜色.
• 警告调色板:用于传达错误状态的颜色.
• 前景调色板:文本和图标的颜色.
• 背景调色板:用于元素背景的颜色.

这篇关于角度材料设计-如何添加自定义按钮的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！