Ionic 4 Tabs 样式

Question

我正在尝试为 ionic 4 应用程序中的选项卡提供渐变背景。我还尝试为每个页面设置不同颜色（渐变）的背景。在每个页面的 scss 中控制选项卡的样式。

想要的效果如下。

Answer 1

您可以为工具栏（顶部）和标签栏（底部）设置 CSS 渐变：

ion-toolbar{
  --background: linear-gradient(to right, #color1 0%, #color2 100%);
}

ion-tab-bar{
  --background: linear-gradient(to right, #color1 0%, #color2 100%);
}

如果您想为整个应用程序设置渐变，请将 CSS 放在主题内 > variable.scss

文档

https://ionicframework.com/docs/api/toolbar
https://ionicframework.com/docs/api/tab-bar

Answer 2

For <shadow-root> 表示您使用的浏览器支持 Shadow DOM 技术，因此您可以仅通过其变量访问其元素，因此请尝试以下

ion-toolbar {
  --ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}

ion-tab-bar {
  --ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}

如果它不起作用，请检测 father -i call it- 或它的包装器并将其放在它之前，换句话说

wrapper ion-tab-bar {
--ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}

wrapper 指的是包裹ion-tab-bar

的元素

Ionic 4 Tabs 样式

Ionic 4 Tabs styling

ionic4