Ionic 4 Tabs造型

Question

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

所需的效果如下。

Answer 1

对于<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;
}

如果它不起作用，请检测父亲-我叫它-或它的包装，然后放在它前面，换句话说

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

包装器是指包装ion-tab-bar

的元素

Answer 2

您可以在工具栏（顶部）和标签栏（底部）设置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放在theme> variable.scss

内

文件

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