从 ion-tab-bar ionic 4 中删除白色背景答案

【问题标题】：remove white background from ion-tab-bar ionic 4从 ion-tab-bar ionic 4 中删除白色背景
【发布时间】：2020-04-28 04:05:13
【问题描述】：

在我的 Ionic 4 项目中，我有选项卡式界面，其中有 4 个选项卡。

我尝试通过在 ion-tab-bar 上添加一些自定义 css 来自定义 ion-tab，以制作像这样的圆角。

我使用下面的代码来实现这个设计。

ion-tab-bar {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

ion-tab-button {
    transition: 0.2s ease-in;
}

.tab-selected {
    border-bottom: 4px white solid;
    // transition: 0.2s ease-in;
    font-size: 0;
    ion-icon {
        transform: scale(1.3);
        transition: 0.2s ease-in;
    }
}

我在这里面临的问题是，顶部有一个白色背景，与我在所选标签页上显示的卡片重叠。

我不知道为什么卡片上会出现白色背景。我希望它是透明的。我试图通过标签组件的scss 文件更改背景颜色，但这对我不起作用。如何删除ion-tab-bar 上的白色背景。

【问题讨论】：

我认为它仍然是白色的，因为离子含量没有降低。那是页脚。你试过让离子含量更高吗？这可能不是最好的答案，一旦设备的分辨率不一样，它可能会覆盖较小设备中的一些内容......如果它按照你想要的方式工作，那看起来会非常好

标签： angular ionic-framework ionic4

【解决方案1】：

任何仍在处理这个问题并寻找更优雅的解决方案的人，将以下内容添加到 ion-tab-bar 的 CSS 类中：

ion-tab-bar {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  position: absolute;
  bottom: 0px;
  width: 100%;
}

然后，在 ion-content 的底部添加一个填充（与标签栏的高度相同）：

ion-content {
  --padding-bottom: 3.125rem;
}

最后，不要忘记将 ion-content 设置为全屏：

<ion-content fullscreen> ... </ion-content>

【讨论】：

【解决方案2】：

看一下开发工具中的 DOM，ion-tabs 组件基本上是这样的：

<ion-tabs>
   <div class="tabs-inner"></div>
   <ion-tab-bar class="md hydrated" slot="bottom"></ion-tab-bar>
</ion-tabs>

看看 Ionic source code 中的 tabs-inner 类，你会看到：

.tabs-inner {
    position: relative;

    flex: 1;

    contain: layout size style;
}

如果您将 div 的 css 位置从相对更新为未设置，您可以实现您想要做的事情。我不是 CSS 专家，所以可能并且可能有一种更简洁的方法来覆盖这种样式。也就是说，这是一种解决方案。

在您的 global.scss 文件中，您可以通过添加以下内容来覆盖该类：

 .tabs-inner {
    position: unset !important;
 }

请记住，此样式将应用于您应用中的所有选项卡页面。

我创建了一个repo 供参考。

希望这会有所帮助。

【讨论】：

谢谢你的朋友，我刚刚用你的代码更新了我的global.scss 并让它工作了。此外，我们还需要 flex: 1 和 position: unset !important 以使标签贴在底部。

【解决方案3】：

我测试了我所说的，这是正确的。需要在内容上添加更多高度。高度在路由器插座上，在显示选项卡时调用“主要信息”。我的怀疑与设备的大小有关。添加百分比 o 高度不是很好，因为在较小的设备上可能无法显示全部内容。我不知道所有设备的标签高度是否相同，无论大小。如果是，您需要做的就是将高度添加到内容中。希望我能提供帮助，如果您找到任何解决方案或更好的解决方案，请分享有关此问题的更新。我真的很喜欢这个解决方案以及它的外观。希望我能帮上忙！

【讨论】：