Ionic - 颜色

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

Ionic 颜色类

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

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

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

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

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

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

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

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

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

上述代码将在屏幕产生以下内容 −

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

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

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

SASS(Syntactically Awesome Style Sheet 的缩写)提供了一种更简单的方法来同时更改所有元素的颜色。如果您想使用 SASS，请在命令窗口中打开您的项目并输入 −

C:\Users\Username\Desktop utorialApp> 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">