如何为每个页面自定义 ionic Refresher Spinner 图标的样式?在我的应用程序的每个页面中,微调器应该具有不同的颜色,具体取决于用户所在的页面。我在我的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>
我尝试用谷歌搜索它,但找不到任何解决方案。
感谢有人可以提供帮助。 提前致谢。
最佳答案
您可以检查 ionic 文档上的复习组件 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;
}
}
关于css - ionic 自定义 ionic 刷新旋转器图标的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51298721/