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

Posted 2021-04-08

任何人都可以告诉我仅通过角度代码操纵离子v4组件的风格的最佳做法是什么？

例如，在点击之后，仅通过角度代码更改离子按钮的背景颜色的最佳实践。

非常感谢！

答案

Change Ionic's CSS varibles

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

更改按钮的示例：

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

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

这将导致按钮具有蓝色背景，红色文本颜色和10％的边框。

您可以在docs：Button CSS Custom Properties中找到每个组件的可用CSS变量

或者例如对于ion-item：Item CSS Custom Properties

我希望这有帮助！

Dynamic CSS classes

TS组件：

export class AppComponent {

  isActive = true;

  constructor(
  ) { 
  }

  toggleActive() {
    this.isActive = !this.isActive;
  }
}

html模板：

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

CSS样式：

.active {
  --background: green;
}

有关更强大的选项，请参阅NgClass Angular documentation pleaser