Question

如何为每个页面自定义离子刷新器微调器图标的样式？在我的应用程序的每个页面中，微调器应根据用户所在的页面使用不同的颜色。我在CSS中做了类似的事情。但是我只将刷新器的背景颜色自定义为灰色。

这是 styles.css

let string = String(data: keyData as Data, encoding: .utf8)!

这是 page.html

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

我尝试使用Google搜索，但是找不到任何解决方案。

感谢有人可以帮助您。预先感谢。

Answer 1

您可以在离子文档上检查复习组件 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文件中添加工作样式，如果要更改微调器图标的颜色，则可以将其作为svg，可以在页面scss文件本身中的css上方使用。

像这样：

page-spinner{
    .refresher-refreshing .spinner-crescent circle, .refresher-refreshing .spinner-ios line, .refresher-refreshing .spinner-ios-small line{
       stroke : red;
    }
}

离子自定义离子刷新器图标的颜色

1 个答案: