Ionic颜色

本文概述

• Ionic颜色分类
• 添加色彩
• Ionic颜色用法

在本节中, 我们将学习有关Ionic如何将颜色用于不同元素的信息。

Ionic颜色分类

Ionic框架包含一组九个预定义的颜色类别, 用于更改许多组件的颜色。你可以将这些颜色用于自己的样式。在Ionic中, 每种颜色都是多种属性的集合, 包括阴影和色调。我们可以通过使用color属性将颜色应用于Ionic组件。如果尚未为必需的元素设置任何颜色, 则默认情况下它将设置原色。

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

添加色彩

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

如果要添加新颜色, 请首先为根的所有颜色变体定义CSS变量。例如, 要添加一种称为“收藏夹”的新颜色, 我们可以定义以下变量：

CSS文件

:root {
  --ion-color-favorite: #69bb7b;
  --ion-color-favorite-rgb: 105, 187, 123;
  --ion-color-favorite-contrast: #ffffff;
  --ion-color-favorite-contrast-rgb: 255, 255, 255;
  --ion-color-favorite-shade: #5ca56c;
  --ion-color-favorite-tint: #78c288;
}

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

.ion-color-favorite {
  --ion-color-base: var(--ion-color-favorite);
  --ion-color-base-rgb: var(--ion-color-favorite-rgb);
  --ion-color-contrast: var(--ion-color-favorite-contrast);
  --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
  --ion-color-shade: var(--ion-color-favorite-shade);
  --ion-color-tint: var(--ion-color-favorite-tint);
}

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

HTML文件

<ion-button color="favorite">Favorite</ion-button>

Ionic颜色用法

Ionic对每个元素使用不同的类。例如, button元素具有一个按钮类, header元素具有一个bar类。现在, 如果要创建蓝色按钮, 将使用如下所示的button-primary类。

<div class = "button button-primary">
   ...
</div>

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

<ion-button ion-button block (click)="openMenu()" color="primary">
    Show Action Sheet
 </ion-button>

当以上代码执行时, 它会将显示操作表按钮更改为蓝色。我们将获得以下输出。