离子 - 颜色

---

在我们开始使用 Ionic 框架中可用的实际元素之前，让我们先了解一下 Ionic 如何为不同元素使用颜色。

离子颜色类别

Ionic 框架为我们提供了一组九个预定义的颜色类。您可以使用这些颜色，也可以用您自己的样式覆盖它。

下表显示了 Ionic 提供的默认九种颜色集。在本教程中，我们将使用这些颜色来设计不同的 Ionic 元素的样式。现在，您可以检查所有颜色，如下所示 -

离子颜色的使用

Ionic 为每个元素使用不同的类。例如，标题元素将具有bar类，按钮将具有Button类。为了简化使用，我们通过在颜色名称中添加元素类前缀来使用不同的颜色。

例如，要创建蓝色标题，我们将使用bar-calm，如下所示 -

<div class = "bar bar-header bar-calm">
   ...
</div>

同样，要创建灰色按钮，我们将使用按钮稳定类，如下所示。

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

您还可以像任何其他 CSS 类一样使用 Ionic 颜色类。现在，我们将使用平衡（绿色）和活力（黄色）颜色来设置两个段落的样式。

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

上面的代码将产生以下屏幕 -

当我们使用不同的类创建不同的元素时，我们将在后续章节中详细讨论。

使用 CSS 自定义颜色

当您想使用 CSS 更改某些 Ionic 默认颜色时，可以通过编辑lib/css/ionic.css文件来完成。在某些情况下，这种方法效率不高，因为每个元素（页眉、按钮、页脚...）都使用自己的类进行样式设置。

因此，如果要将“light”类的颜色更改为橙​​色，则需要搜索使用该类的所有元素并更改它。当您想要更改单个元素的颜色时，这很有用，但对于更改所有元素的颜色不太实用，因为它会花费太多时间。

使用 SASS 自定义颜色

SASS（它是“ Syntropically Awesome Style Sheet”的缩写）提供了一种更简单的方法来一次更改所有元素的颜色。如果您想使用 SASS，请在命令窗口中打开您的项目并输入 -

C:\Users\Username\Desktop\tutorialApp> ionic setup sass

这将为您的项目设置 SASS。现在，您可以通过打开scss/ionic.app.scss文件，然后在此行之前键入以下代码来更改默认颜色– @import "www/lib/ionic/scss/ionic";

我们将平衡颜色更改为深蓝色，将活力颜色更改为橙​​色。我们上面使用的两个段落现在是深蓝色和橙色。

$balanced: #000066 !default;
$energized: #FFA500 !default;

现在，如果您使用以下示例 -

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

上面的代码将产生以下屏幕 -

使用这些类的所有 Ionic 元素都将更改为深蓝色和橙色。请考虑到您不需要使用 Ionic 默认颜色类。您始终可以按照自己想要的方式设计元素。

重要的提示

安装 SASS 后，www/css/style.css文件将从 index.html 的标头中删除。如果您仍想使用它，则需要手动链接它。打开index.html，然后在标题中添加以下代码。

<link href = "css/style.css" rel = "stylesheet">