如何在 ionic 4 中设置标题背景颜色答案

【问题标题】：how to set header background color in ionic 4如何在 ionic 4 中设置标题背景颜色
【发布时间】：2019-05-02 10:38:56
【问题描述】：

我正在尝试不同的方式，我按照链接 (How to set background color IONIC 4) 获取标题背景颜色，并按照 ionic 2 和 ionic 3 进行了尝试：

我可以为 ion-content 制作背景颜色，但标题没有背景颜色。

代码：

<ion-header>
    <ion-toolbar style="background-color: red">
        <ion-title>Login</ion-title>
    </ion-toolbar>
</ion-header>

请需要您的支持。

【问题讨论】：

标签： ionic-framework

【解决方案1】：

似乎离子头更像是内部离子组件的容器（如离子工具栏）。我查看了 Ionic v4 离子工具栏documentation。这个组件有很多自定义的css自定义属性，包括--background，可以自定义。这可能就是您正在寻找的。p>

假设您使用 CLI 创建了一个“登录”页面组件，您可以在 login.scss 文件中添加一个新的 css 类定义：

.new-background-color{
    --background: #54d61c;
}

然后在您的 login.page.html 文件中引用它：

<ion-header>
  <ion-toolbar class="new-background-color">
        <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

【讨论】：

【解决方案2】：

我使用下面的代码 sn-p 来改变标题的颜色：

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>Login</ion-title>
    </ion-toolbar>
</ion-header>

您可以使用 variables.scss 文件中的任何自定义颜色来代替 primary 颜色。

【讨论】：

这是预期的 Ionic 方式 -- 扩展 theme 文件夹中的 variables.scss 文件以添加 primary 以外的术语。

【解决方案3】：

在你的 variable.scss 中

--ion-toolbar-background: var(--ion-color-primary)

或者如果你想为单页设置背景，你可以像这样定义一个 css 类：

.my-toolbar{
    --background:  var(--ion-color-primary);
}

或

.my-toolbar{
    --background:  red;
}

或者像法哈德所说的

<ion-toolbar color="primary">

【讨论】：

【解决方案4】：

到目前为止，我看到的所有答案似乎都取决于更改值原色，影响所有按钮和其他 UI 元素。我想要的只是让我的工具栏全部变为一种颜色，所以这就是我在 variables.css 中放入的内容

ion-toolbar {
    --color: #ffffff;
    --background: #0d2c6c;
}

【讨论】：

【解决方案5】：

ion-header 应提供background-color，如下所示：

ion-header {
  background-color: #397ffc !important;
}

【讨论】：

【解决方案6】：

由于样式标记设置在<ion-toolbar> 上，因此更改正在被应用。将style 添加到<ion-header>。

【讨论】：

我试过下面的代码，但还是不行：Login
试试这个：
在 ion-toolbar 和/或 ion-navbar 中尝试 color="red"。 Ion-Navbar 是我使用它的方式
添加 ion-navbar 时，出现错误：'ion-navbar' 不是已知元素。请检查链接：github.com/ionic-team/ionic/blob/master/angular/… 似乎 navbar 已替换为 ion-toolbar

【解决方案7】：

ion-toolbar 的背景似乎依赖于 ionic 使用 --background 变量在内部设置的变量。使用--color 变量设置图标的颜色。所以要改变它，你应该这样做

ion-header {
  ion-toolbar {
    // set background color
    --background: #0d2c6c;
    // set icon/text color
    --color: #ffffff;
  }
}

你也可以这样做

ion-header {
  ion-toolbar {
    // set background color
    --background: linear-gradient(to right, #000852 0%, #013291 50%,  #000852  100%);
    // set icon/text color
    --color: var(--ion-color-secondary);
  }
}

另请注意，您可以在 ion-header 元素上编辑高度、最小高度等。

这是一个参考Ionic Docs

【讨论】：