Angular material color指南介绍Angular材料的颜色通过使用Angular material，

Angular material color

介绍Angular材料的颜色

通过使用Angular material，我们可以修改组件的颜色并选择我们想要的颜色，为此material为我们提供了主题，我们可以通过这些主题来设计我们的组件，这就利用了google material design。它为我们提供了调色板，它代表了颜色的集合，这个集合中的每个值都被称为色调。为了识别调色板中的数字，它与一个独特的数字相关联，这个数字可以用来为调色板中选择的组件上色。在Material中，我们可以使用一个选择器来为组件的背景着色，我们将在文章的下一部分看到，我们也可以利用调色板和Material设计来实现和着色我们的组件的细节。

语法

在这一节中，我们将仔细研究在Angular中使用材质为我们的组件着色的语法，让我们从下面的基本语法理解开始。

<h1 md-colors="{backgroundColor:'color'}">your label</h1>

正如你所看到的，在上面的语法中，我们使用了'md-colors'，它可以用来给组件的背景着色。我们可以从调色板中指定我们想要的颜色，或者直接在这里指定。在接下来的章节中，我们将看到我们如何使用材料颜色来改变组件的颜色，以获得更好的理解和清晰度。

颜色在Angular材质中是如何工作的？

正如我们所看到的，材质设计为我们提供了调色板来选择颜色，这有助于我们通过指定我们想要的颜色来设计和塑造我们的组件。他们还提供了一个颜色选择工具，其中有所有的数字和代码，我们可以用它来给我们的组件着色。下面的网址可以帮助你选择正确的颜色，也可以帮助你选择颜色编号。

你可以从下面的链接中选择颜色，其中包含了颜色选择器的工具。

URL: material.io/design/colo…

通过使用材料颜色，我们可以为我们的品牌或组件着色，他们为我们提供了主要和次要的颜色，我们可以选择这些颜色来为我们的组件在材料或角度应用中着色。我们有三种类型，见下文。

主色

2）次要颜色

浅色和深色变体

现在我们将仔细看看在HTML组件中使用材料和颜色的语法，让我们开始吧。

例如：:

<button md-colors="{backgroundColor:'green'}" md-justified class="line">Basic</button>

正如你所看到的，在上面的代码中，我们使用了'md-colors'指令来为我们的组件着色，并改变主题。但我们是按照material给出的标准来使用它的，在{}大括号内我们可以指定我们想要改变的属性和颜色。在这里，我们可以指定数字或颜色代码，这是由材料设计颜色定义的。

在Angular材料调色板被表示为SAAS地图，它可以用下面的代码创建，你可以根据你的需要改变它。

$green-palette: ( 50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, // they will continue to the 900 contrast: ( 50: rgba(black, 0.87), 100: rgba(black, 0.87), 200: rgba(black, 0.87), // they will continue to the 900 ) );

你可以像上面那样指定调色板，在这里，我们正在创建和指定颜色数字和代码，直到900。这个代码一般代表数字，但对于这个代码，我们也需要指定颜色的名称，以便使用它，因为每种颜色都使用相同的代码，从0到900代表它们的数字，我们可以说是不同的颜色色调。材料还提供了不同的代码，如下所示。

A100
A200
A300
等等来表示不同的色调。

Angular Material也为我们提供了默认的主题和默认的颜色，我们可以像下面这样使用它们，让我们来看看每一个。

1）紫色-绿色.css。 它将是浅色的。有调色板紫色、绿色、红色。

**2) indigo-pink.css。**它将是浅色的。使用靛蓝、粉红、红色

**3) deeppurplr-amber.css。**它将是深色的。有深紫色、琥珀色、红色

**4) pink-blueegrey.css。**它将是暗色的。有蓝绿色、粉红色、红色

Angular材质颜色的例子

下面是使用材料颜色和他们提供的颜色选择器的例子，我们可以选择任何我们想要的颜色和颜色组件，按照下面的代码来改变组件的颜色，index.html必须和下面一样，以便导入所有js文件。

1) index.html代码。

2) 控制器代码。

<script language="javascript"> angular .module('myApp', ['ngMaterial']) .controller('MydemoColorController', function ($scope) { // you can wirte your logic as per requrenemnt ..// }); </script>

3) HTML代码。

<body ng-app="myApp"> <div ng-controller="MydemoColorController" ng-cloak="" > <md-content class="md-padding" layout-xs="column" layout="row"> <div flex-xs="" flex-gt-xs="100" layout="column"> <h1 md-colors="{backgroundColor:'lime-300'}">Demo using material color !!</h1> </div> </md-content> <button md-colors="{backgroundColor:'green'}" md-justified class="line">Basic</button> <button md-colors="{backgroundColor:'yellow'}">One</button> <button md-colors="{backgroundColor:'pink'}">Two</button> <button md-colors="{backgroundColor:'red'}">Three</button> <button md-colors="{backgroundColor:'purple'}">Four</button> <button md-colors="{backgroundColor:'red-100'}">Five</button> <button md-colors="{backgroundColor:'blue-700'}">Sic</button> <button md-colors="{backgroundColor:'Teal-100'}">Seven</button> </div> <br /> <div md-colors="{background: 'pink-800'}" md-justified class="line"> <span>800</span> <span> I am pink </span> </div> <br /> <div md-colors="{background: 'brown-200'}" md-justified class="line"> <span>200</span> <span> I am brown</span> </div> <br /> <div md-colors="{background: 'green-A200'}" md-justified class="line"> <span>200</span> <span> I am green</span> </div> <br /> <div md-colors="{background: 'grey-500'}" md-justified class="line"> <span>200</span> <span> I am green</span> </div> </body>

输出。

Angular material color output

结论

使用材料颜色也很容易，我们在angular.js应用程序中使用它，我们已经看到了它的一些内部工作细节，有一个实践的例子，如何改变组件的颜色以及主题，它是由谷歌材料设计提供的。我们必须做一些配置才能使用它，它不是可以直接使用的东西。

Angular material color指南

介绍Angular材料的颜色

颜色在Angular材质中是如何工作的？

Angular材质颜色的例子

结论

推荐文章