Как манипулировать стилем ионного компонента с помощью углового кода

Question

Может кто-нибудь сказать мне, как лучше всего манипулировать стилем ионного компонента v4 только через угловой код?

Например, рекомендуется менять только через угловой код цвет фона ионной кнопки после того, как она нажата.

Большое спасибо!

Answer 1

Изменение CSS-переменных Ionic

Самый простой способ - это сделать с помощью переменных 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;
  }
}

Шаблон HTML:

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

Стиль CSS:

.active {
  --background: green;
}

Для получения более подробных опций см. Документацию NgClass Angular пожалуйста