Изменение цвета Ion Refresher на разных страницах Ionic4/5

Question

У меня есть приложение с разными страницами, каждая страница имеет свой цвет выделения

Мне нужно изменить цвет IonRefresher, чтобы он соответствовал ему, но я нашел только информацию об изменении его глобально, добавив следующий код в файл global.scss :

      ion-refresher.refresher-native ion-spinner{
    color: var(--ion-color-secondary) !important;
}

нет информации об окраске.В официальном документе

Answer 1

Если у вас более одной страницы и вы хотите, чтобы цвет счетчика соответствовал цвету страницы, вы можете это сделать, но вам нужно будет указать это на global.scss. вы можете создать столько цветов спиннера, сколько захотите. и вы можете использовать их с помощью класса CSS. Я поделился кодом HTML и CSS для него ниже, пожалуйста, посмотрите

глобальный.scss

       .red.refresher-native{
   ion-spinner{
      color: red!important;      
   }

   .arrow-container ion-icon{
      color: red!important;   
   }
} 

.green.refresher-native{
   ion-spinner{
      color: green!important;      
   }
   .arrow-container ion-icon{
      color: green!important;   
   }
} 
.purple.refresher-native{
   ion-spinner{
      color: purple!important;      
   }
   .arrow-container ion-icon{
      color: purple!important;   
   }
} 

HTML-код

      //Change class name as per your requirement 
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)" class="red">
    <ion-refresher-content></ion-refresher-content>
</ion-refresher>

<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)" class="green">
    <ion-refresher-content></ion-refresher-content>
</ion-refresher>