Ionic颜色类

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

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

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

Ionic色用法

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

例如，要创建蓝色标题，我们将使用 条形平静 如下

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

上面的代码将生成以下屏幕

Ionic色

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

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

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

SASS（ 软件即服务 的缩写形式）提供了一种更简单的方法来一次更改所有元素的颜色。如果要使用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色SCCS

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

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

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