Как временно изменить значение цветовой переменной в компоненте в Ionic 8 с помощью нового обновления цветовой палитры?
В приложении Angular с Ionic Framework у меня есть компонент, в котором для определенного действия мне нужно сделать переменную цвета по умолчанию --ion-background-color прозрачной и вернуться к определенному цвету после завершения определенного действия. В Ionic 7 рекомендовалось определить все цветовые переменные внутри файла theme/variables.scss. Изменить переменную цвета можно, импортировав theme/variables.scss внутри необходимого компонента и изменив там --ion-background-color всякий раз, когда я хочу сделать его прозрачным.
компонент.scss
@import "{path}/theme/variables.scss";
.transparent-active {
--background: transparent !important;
--ion-background-color: transparent !important;
}
компонент.ts
enableTransparency = false;
onAction(): void {
this.enableTransparency = true;
}
onActionFinished(): void {
this.enableTransparency = false;
}
компонент.html
<ion-content [class.transparent-active] = "enableTransparency">
</ion-content>
Раньше это работало без каких-либо проблем.
Однако в Ionic 8 они обновили цветовую палитру по умолчанию и рекомендовали удалить все цветовые переменные, если вам не нужно определять собственную цветовую палитру. Новые переменные цвета для светлых и темных тем автоматически импортируются при импорте core.scss и соответствующего SCSS-файла темной темы. Если в файле theme/variables.scss определены какие-либо переменные, они перезапишут палитру по умолчанию.
Мне нужно перейти на новую цветовую палитру, поэтому я удалил все переменные из файла theme/variables.scss. Проблема в том, что, поскольку глобальные переменные удалены, у меня нет определенной переменной --ion-background-color, которую я мог бы сделать прозрачной внутри компонента. Решение, которое я использовал в Ionic 7, не работает. Я попытался импортировать core.scss и соответствующую темную тему SCSS в файл SCSS компонента, чтобы посмотреть, будет ли он импортировать необходимую цветовую переменную, но, похоже, это все равно не работает. Мне также нужно убедиться, что переменная --ion-background-color возвращается к исходному цвету, когда прозрачность отключена.
Ответы 1
В вашем page.html вы можете объявить обычный класс:
<ion-content class = "enableTransparency">
</ion-content>
и используйте свою функцию, чтобы изменить цвет в вашем файле ts:
onAction(): void {
this.enableTransparency = true; // Keep it or not, depending on whether you need it for something else.
(<HTMLStyleElement>document.querySelector(".enableTransparency")).style.background = "your color";
}
onActionFinished(): void {
(<HTMLStyleElement>document.querySelector(".enableTransparency")).style.background = "your color";
}
Спасибо за ответ. Я понял, что причина, по которой мой метод не работал, заключалась в том, что сторонняя библиотека блокировала элемент <ion-content>, цвет которого мне нужно было изменить (который я обработал впоследствии, что устранило проблему). Однако технически этот метод делает то, о чем я просил, поэтому я выбрал его в качестве ответа.
пожалуйста ;)
вы можете просто использовать
<div [ngStyle] = "{'--background': enableTransparency ? 'transparent' : 'yourDesiredColor' }"></div>