css - 更改离子刷新器和离子无限滚动颜色

Question

这是一个“简单”的请求，但我无法达到这个结果......在我的应用程序中，我有这两个组件：

<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content 
      pullingIcon="ios-arrow-down-outline"
      pullingText="Scorri per aggiornare"
      refreshingSpinner="circles"
      refreshingText="Aggiornamento...">>
    </ion-refresher-content>
  </ion-refresher>

和

<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
    loadingSpinner="bubbles"
    loadingText="Caricando più post ...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

他们在白色背景下工作得很好。现在我需要将背景颜色更改为黑色，但现在两个组件的文本不再可见，因为默认情况下它是黑色的。如何更改两个组件的颜色？

我尝试了一个 CSS 类，但没有应用它的颜色。如何自定义这些组件？

谢谢

Answer 1

正如文档所建议的那样（至少对于 ionic 版本 1）：

用户放开复习器后显示的 ionSpinner 图标。SVG ionSpinner 现在是默认设置，取代了旋转字体图标。设置为 none 以禁用微调器和图标。

将 SVG 中的东西关闭color为fill属性。所以你可以用它代替color.

Answer 2

希望这可以帮助

HTML 代码

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content class="loadingspinner"
      loadingSpinner="crescent"
      loadingText="Loading...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

各自的 CSS

.loadingspinner{
    --color : #adadad;
}

Answer 3

如果这对某人有帮助。您必须向无限滚动内容添加一个类，或者只使用标签选择器。

<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
        class="infinite-scroll-color"
        loadingSpinner="bubbles"
        loadingText="Caricando più post ...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

然后改变标记线的stroke属性，改变spinner svg颜色。

.infinite-scroll-color {
    line {
        stroke: #YOURCOLOR;
    }

    //If you want to change the text color too, just add this css
    .infinite-loading-text {
        color: #YOURCOLOR;
    }
}

干杯!

Answer 4

.spinner-crescent{
    color: #adadad;
}