Ionic 4 Tabs造型 [英] Ionic 4 Tabs styling

问题描述

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

I am trying to give the tabs in a ionic 4 app a gradient background. I am also trying to set a different color (Gradient) background for each page. Controlling the style for the tabs in the scss for each page.

所需的效果如下.

推荐答案

对于< shadow-root> 来说，它表明您使用的浏览器支持Shadow DOM技术，因此您可以访问其元素仅根据它们的变量，因此请尝试以下

For <shadow-root> which indicates that the browser you're using supports Shadow DOM technique so you can access its elements by only their variables,So try the following

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

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

If it doesn't work just please detect father -i call it- or its wrapper and put it in advance of it,In another word

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

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

这篇关于Ionic 4 Tabs造型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！