📜  离子-颜色

📅  最后修改于: 2020-12-08 04:55:51             🧑  作者: Mango


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

离子颜色分类

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

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

Class Description Result
light To be used for white color  
stable To be used for light grey color  
positive To be used for blue color  
calm To be used for light blue color  
balanced To be used for green color  
energized To be used for yellow color  
assertive To be used for red color  
royal To be used for violet color  
dark To be used for black color  

离子颜色用法

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

例如,要创建蓝色的标题,我们将使用如下的条形镇静

...

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

...

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

Paragraph 1...

Paragraph 2...

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

离子色

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

使用CSS自定义颜色

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

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

使用SASS自定义颜色

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;

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

Paragraph 1...

Paragraph 2...

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

离子色SCCS

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

重要的提示

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