如何通过角度代码操纵离子组分的样式

Question

谁能告诉我仅通过角度代码操纵 ionic v4 组件样式的最佳实践是什么？

例如，最佳做法是仅通过角度代码更改离子按钮的背景颜色，然后单击该按钮。

多谢！

Answer 1

更改 Ionic 的 CSS 变量

最简单的方法是通过CSS变量来完成。

更改按钮的示例：

<ion-button class="my-button">
Click me
</ion-button>

.my-button {
--background: blue;
--color: red;
--border-radius: 10%;
}

这将导致一个具有蓝色背景、红色文本颜色和 10% 边框无线电的按钮。

您可以在文档中找到每个组件的可用 CSS 变量： 按钮 CSS 自定义属性

或者例如ion-item：项目 CSS 自定义属性

我希望这有帮助！

动态 CSS 类

TS组合：

export class AppComponent {
isActive = true;
constructor(
) { 
}
toggleActive() {
this.isActive = !this.isActive;
}
}

模板：

<ion-button [class.active]='isActive' (click)='toggleActive()'>
Click to toggle color!
</ion-button>

CSS 样式：

.active {
--background: green;
}

有关更强大的选项，请参阅NgClass Angular文档