Ionic颜色

本文概述

  • Ionic颜色分类
  • 添加色彩
  • Ionic颜色用法
在本节中, 我们将学习有关Ionic如何将颜色用于不同元素的信息。
Ionic颜色分类 Ionic框架包含一组九个预定义的颜色类别, 用于更改许多组件的颜色。你可以将这些颜色用于自己的样式。在Ionic中, 每种颜色都是多种属性的集合, 包括阴影和色调。我们可以通过使用color属性将颜色应用于Ionic组件。如果尚未为必需的元素设置任何颜色, 则默认情况下它将设置原色。
我们可以在下表中看到Ionic框架提供的默认颜色集。
色彩 描述
Light 用于白色。
Positive 它用于蓝色。
Balanced 用于绿色。
Stable 用于浅灰色。
Calm 用于浅蓝色。
Energized 用于黄色。
Assertive 用于红色。
Royal 用于紫色。
dark 用于黑色。
添加色彩 我们可以通过在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颜色】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>

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

文章图片

    推荐阅读