[英]Change ion-item background color in Ionic 4.0
大家好
我希望没有人问过这个尚未...我已经发现了一些类似的帖子喜欢这一个,但它不工作离子4.0。 他们在这里提出的建议似乎对我不起作用,因为 Ionic 4.0 似乎没有注入相同的内容
<div class='item-content'></div>
链接帖子中讨论的元素。
我正在努力更改 Ionic 4.0 离子项目元素的背景颜色。 我试图给它一个白色背景,而应用程序有一个蓝色背景。
我可以在代码检查器中看到它正在应用我的样式,但它没有显示在浏览器中。
这是我的代码示例:
<ion-item class="light-back">
<ion-icon name="search" color="light"></ion-icon>
<ion-input required type="text" placeholder="Search for a site" color="light">
</ion-input>
</ion-item>
.light-back{
background-color: #fff;
}
下面是我正在查看的屏幕截图,它显示元素(搜索栏)正在接收样式,但没有实现或显示它。
任何建议将不胜感激。
使用这个特殊的离子 CSS 规则:
ion-item{
--ion-background-color:#fff;
}
我在 ionic 4 中找到了工作的一个。在你已经实现 ion-list 和 ion-item 的 .scss 文件中应用以下 2 css:
ion-item {
--ion-background-color: white !important;
}
.item, .list, .item-content, .item-complex {
--ion-background-color: transparent !important;
}
我似乎找到了解决办法。 您只需将 color="light" 添加到 ion-item 元素。 请参阅以下内容:
<ion-item class="light-back" color="light">
<ion-icon name="search" color="light"></ion-icon>
<ion-input required type="text" placeholder="Search for a site" color="light">
</ion-input>
</ion-item>
问题是其他代码是基于我的主题注入的,我从我的变量中将其设置为我的主要颜色,所以我需要指出我再次使用浅色主题(我已经在我的变量中设置为 #fff )。
希望这对将来的人有所帮助:)
尽管@labago 的答案部分有效,但没有一个答案完全对我有用。
--ion-background-color
仅适用于没有任何填充或边距的静态内容。 一旦我开始应用填充,它就没有给出预期的结果,所以下面是我在我的应用程序中使用的解决方法:
ion-item {
padding:20px;
--ion-background-color: blue;
background: blue;
}
这适用于离子 4
1 - 打开文件:src/theme/variables.scss 2 - 插入代码颜色:
/** transparent **/
--ion-color-transparent: #fafafa;
--ion-color-transparent-rgb: 245, 61, 61;;
--ion-color-transparent-contrast: #ffffff;
--ion-color-transparent-contrast-rgb: 255, 255, 255;
--ion-color-transparent-shade: #dcdcdc;
--ion-color-transparent-tint: #fbfbfb;
obs: #fafafa 对应透明色
2 - 打开文件 global.scss e 插入代码:
.ion-color-transparent {
--ion-color-base: var(--ion-color-transparent) !important;
--ion-color-base-rgb: var(--ion-color-transparent-rgb) !important;
--ion-color-contrast: var(--ion-color-transparent-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-transparent-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-transparent-shade) !important;
--ion-color-tint: var(--ion-color-transparent-tint) !important;
}
3 - 在 ion-item 中调用透明颜色
<ion-item color="transparent">
</ion-item>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.