应用十六进制值颜色 style.background-color

Question

我正在尝试在 ionic 中的导航栏上应用颜色，但我没有成功。这是我的代码。

 <ion-header>
   <ion-navbar [style.color]="(xdg|async)?.color">//outputs hex ex. #dda63a
     <ion-title>xdg</ion-title>
   </ion-navbar>
</ion-header>

但它不适用于导航栏。我还尝试在我的 navParams 中传递数据：

//<ion-navbar [style.color]="xdgColor">
this.xdgColor = this.navParams.get('xdgColor')
console.log(this.xdgColor)//#dda63a

也没有运气，我做错了什么？

Answer 1

.ts

<ion-header>
   <ion-navbar [style.background-color]="xdgColor">
     <ion-title>xdg</ion-title>
   </ion-navbar>
</ion-header>

Ionic 在 ion-navbar 中创建另一个 div 来设置背景颜色。您可以通过将以下 css 添加到您的 app.scss 文件来覆盖它：

.header .toolbar-background{
    background: none;
}

现在，由于您已经禁用了 ionic 设置的背景颜色，您可以通过将此 css 也添加到 [=25= 来为导航栏设置默认背景颜色]

ion-navbar.toolbar
    background-color: #f8f8f8;
}

应用十六进制值颜色 style.background-color

Applying a hex value color style.background-color

css

background-color

ionic-framework

angular