📌  相关文章
📜  ionic 颜色

📅  最后修改于: 2021-01-03 04:46:51             🧑  作者: Mango

离子色

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

离子颜色分类

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

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

Colors Description
Light It is used for white color.
Positive It is used for blue color.
Balanced It is used for green color.
Stable It is used for a light grey color.
Calm It is used for a light blue color.
Energized It is used for yellow color.
Assertive It is used for red color.
Royal It is used for violet color.
dark It is used for black color.

添加色彩

我们可以通过在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组件上使用它。例如，我们可以在离子按钮上使用喜欢的颜色，如下所示。

HTML文件

Favorite

离子颜色用法

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


   ...

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


    Show Action Sheet

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