离子自定义颜色的离子清新微调器图标-Java 学习之路

如何为每个页面自定义离子刷新器微调器图标的样式？在我的应用程序的每个页面中，微调器应具有不同的颜色，具体取决于用户所在的页面 . 我在我的CSS中做过类似的事情 . 但我只是将复习的背景颜色定制为灰色 .

这是 styles.css

ion-refresher * {
    // background-color: white;
    ion-refresher-content * {
      icon * {
        color: #dd2727;
      }
      color: red;
        .refresher-refreshing {
          .refresher-pulling-icon, .refresher-refreshing-icon {
            text-align: center;
            -webkit-transform-origin: center;
            transform-origin: center;
            font-size: 30px;
            color: #dd2727;
            -webkit-transition: 200ms;
            transition: 200ms;
          }
        }
    }
  }

这是 page.html

<ion-refresher (ionRefresh)="doRefresh($event)">
      <ion-refresher-content
        pullingIcon="arrow-dropdown"
        refreshingSpinner="crescent">
      </ion-refresher-content>
    </ion-refresher>

我尝试谷歌搜索但无法找到任何解决方案 .

感谢有人可以提供帮助 . 提前致谢 .

1 回答

2
您可以在离子文档中检查复习组件https://ionicframework.com/docs/api/components/refresher/Refresher/

他们在底部指定了sass变量来根据我们的需要改变样式：
```
$refresher-icon-color
$refresher-icon-font-size
$refresher-text-color
$refresher-text-font-size
$refresher-border-color
```
所以说你想在你的应用程序中使用 $refresher-icon-color: red; ，你可以在 theme/variable.scss 中调用这个变量，它将覆盖默认样式 .

CSS

圈子svg
```
.refresher-refreshing .spinner-crescent circle, .refresher-refreshing .spinner-ios line, .refresher-refreshing .spinner-ios-small line{
   stroke : red;
}
```
拉图标css
```
.refresher-pulling-icon, .refresher-refreshing-icon{
  color: red
}
```
ionic中的每个页面都有页面名称格式，因此您可以在单个页面scss文件中添加工作样式，如果要更改微调器图标的颜色，那么它可以在页面scss文件本身中使用上面的css .

像这样：
```
page-spinner{
    .refresher-refreshing .spinner-crescent circle, .refresher-refreshing .spinner-ios line, .refresher-refreshing .spinner-ios-small line{
       stroke : red;
    }
}
```
回复于 2024-05-05T22:08:34+08:00

离子自定义颜色的离子清新微调器图标

1 回答

相关问题