В приложении 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 возвращается к исходному цвету, когда прозрачность отключена.
🤔 А знаете ли вы, что...
Angular предоставляет средства для работы с HTTP-запросами и взаимодействия с внешними API.
В вашем 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";
}