本文概述
- Ionic颜色分类
- 添加色彩
- Ionic颜色用法
Ionic颜色分类 Ionic框架包含一组九个预定义的颜色类别, 用于更改许多组件的颜色。你可以将这些颜色用于自己的样式。在Ionic中, 每种颜色都是多种属性的集合, 包括阴影和色调。我们可以通过使用color属性将颜色应用于Ionic组件。如果尚未为必需的元素设置任何颜色, 则默认情况下它将设置原色。
我们可以在下表中看到Ionic框架提供的默认颜色集。
| 色彩 | 描述 |
|---|---|
| Light | 用于白色。 |
| Positive | 它用于蓝色。 |
| Balanced | 用于绿色。 |
| Stable | 用于浅灰色。 |
| Calm | 用于浅蓝色。 |
| Energized | 用于黄色。 |
| Assertive | 用于红色。 |
| Royal | 用于紫色。 |
| dark | 用于黑色。 |
如果要添加新颜色, 请首先为根的所有颜色变体定义CSS变量。例如, 要添加一种称为“收藏夹”的新颜色, 我们可以定义以下变量：
CSS文件
:root {
--ion-color-favorite: #69bb7b;
--ion-color-favorite-rgb: 105, 187, 123;
--ion-color-favorite-contrast: #ffffff;
--ion-color-favorite-contrast-rgb: 255, 255, 255;
--ion-color-favorite-shade: #5ca56c;
--ion-color-favorite-tint: #78c288;
}现在, 创建一个使用这些CSS变量的新类。该类的格式必须为.ion-color- {COLOR}, 其中{COLOR}是要添加的颜色的名称：
.ion-color-favorite {
--ion-color-base: var(--ion-color-favorite);
--ion-color-base-rgb: var(--ion-color-favorite-rgb);
--ion-color-contrast: var(--ion-color-favorite-contrast);
--ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
--ion-color-shade: var(--ion-color-favorite-shade);
--ion-color-tint: var(--ion-color-favorite-tint);
}添加类后, 可以在支持color属性的任何Ionic组件上使用它。例如, 我们可以在Ionic按钮上使用喜欢的颜色, 如下所示。
HTML文件
<
ion-button color="favorite">
Favorite<
/ion-button>
Ionic颜色用法 【Ionic颜色】Ionic对每个元素使用不同的类。例如, button元素具有一个按钮类, header元素具有一个bar类。现在, 如果要创建蓝色按钮, 将使用如下所示的button-primary类。
<
div class = "button button-primary">
...
<
/div>
我们还可以像其他任何CSS类一样使用Ionic颜色类。以下代码有助于我们了解color属性的用法。
<
ion-button ion-button block (click)="openMenu()" color="primary">
Show Action Sheet
<
/ion-button>
当以上代码执行时, 它会将显示操作表按钮更改为蓝色。我们将获得以下输出。
文章图片
推荐阅读
- Ionic内容content
- Ionic chip元素
- Ionic复选框
- Ionic卡片
- Ionic相机
- 你应该使用的12个最好的LaTeX编辑器合集（哪个最好（））
- 安装系统 win7 32位重装系统图文详细教程
- 64 windows 7系统安装图文详细教程
- 联想笔记本做系统的办法