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 颜色类。我们现在将使用 balanced（绿色）和 energized（黄色）颜色为两个段落设置样式。

<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\tutorialApp> ionic setup sass

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

我们将把 balanced 颜色更改为深蓝色，energized 颜色更改为橙色。我们上面使用的两个段落现在是深蓝色和橙色。

$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">

打印页面