Ionic 颜色

在本节中，我们将学习Ionic如何使用颜色来呈现不同的元素。

Ionic颜色类

Ionic框架包含一套九个预定义的颜色类，用于更改许多组件的颜色。您可以将这些颜色与您自己的样式一起使用。在Ionic中，每种颜色都是多个属性的集合，包括阴影（shade）和色调（tint）。我们可以使用color属性将颜色应用于Ionic组件。如果您没有为所需的元素设置任何颜色，它默认会设置主要颜色（primary color）。

我们可以在下表中看到Ionic框架提供的默认颜色集。

添加颜色

我们可以通过在Ionic组件上设置color属性或使用CSS样式来在整个应用程序中添加颜色。

如果我们想添加一种新颜色，首先在根目录定义该颜色所有变体的CSS变量。例如，要添加一种名为favorite的新颜色，我们可以定义以下变量

CSS文件

现在，创建一个新类，该类使用这些CSS变量。该类的格式必须为.ion-color-{COLOR}，其中{COLOR}是要添加的颜色的名称

添加类后，它可以在任何支持color属性的Ionic组件上使用。例如，我们可以在Ionic按钮上使用favorite color，如下所示。

HTML文件

Ionic颜色用法

Ionic为每个元素使用不同的类。例如，button元素有一个button class，header元素有一个bar class。现在，如果我们想创建一个蓝色按钮，我们将使用button-primary类，如下所示。

我们也可以像使用任何其他CSS类一样使用Ionic颜色类。以下代码帮助我们理解color属性的用法。

当上面的代码执行时，它会将Show Action Sheet按钮更改为蓝色。我们将获得以下输出。