改变离子复习＆amp;离子无限滚动颜色

Question

这是一个简单的＆＃34;请求，但我无法达到此结果...... 在我的应用程序中，我有以下两个组件：

<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

根据docs的建议（至少对于离子版本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

.spinner-crescent{
    color: #adadad;
}

Answer 4

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

<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>

然后更改标记线的笔触属性，以更改微调器 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;
    }
}

干杯！