Ionic 离子-项目/离子-原生背景颜色

ddrv8njm 于 2022-12-09 发布在 Ionic

关注(0)|答案(7)|浏览(208)

我遇到离子项目背景颜色问题。

我想要的：

将背景颜色设置为***透明。***

我拥有的：

<ion-item class="custom-ion-toggle">
    <ion-label>Remember me!</ion-label>
    <ion-toggle formControlName="remember" slot="start" color="secondary" mode="ios"></ion-toggle>
</ion-item>

这将生成一个具有白色背景的<div class="item-native">。
"我一直在努力“
应用程序.组件.scss：

.item-native {
    background: transparent !important;
}

"所以这就是我得到的“

ionic-framework

来源：https://stackoverflow.com/questions/55100343/ion-item-ion-native-background-color

7条答案

按热度按时间

eqfvzcg81#

在您css页面中尝试以下操作：

ion-item {
  --ion-background-color: transparent !important
}

赞(0）回复(0）举报 2022-12-09

xesrikrc2#

请在login.scss中尝试此操作

.custom-ion-toggle{
       background-color: transparent !important;
   }

我已经尝试了它在我的应用程序和它的工作完全罚款.

赞(0）回复(0）举报 2022-12-09

jvidinwx3#

使用Ionic提供的ion-item CSS自定义属性：

.custom-ion-toggle {
  --background-color: transparent;
}

赞(0）回复(0）举报 2022-12-09

a0zr77ik4#

在你的css风格上使用这个：

ion-item {
 --background: transparent !important;
}

赞(0）回复(0）举报 2022-12-09

ssgvzors5#

在爱奥尼亚6：**

将color属性设置为item：

<ion-item color="primary">

在global.scss中，覆盖颜色：

ion-item {
    --ion-color-primary: transparent;
}

赞(0）回复(0）举报 2022-12-09

gajydyqb6#

我遇到了同样的问题，我只是在ion-item标签中将属性color设置为“undefined”，它就可以工作了，试试看吧。（我还在ion-list中将lines设置为none，以删除每个项目底部的行）

<ion-list lines="none">
  <ion-item color="undefined">
    <ion-avatar slot="start">
      <img [src]="student.photo" />
    </ion-avatar>

    <ion-label>
      <p>{{student.name}}</p>
    </ion-label>
  </ion-item>
</ion-list>

赞(0）回复(0）举报 2022-12-09

bvhaajcl7#

使用离子列表而不是离子项可以解决问题

赞(0）回复(0）举报 2022-12-09