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

Question

在我的 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.

上的白色背景

Answer 1

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

Answer 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 中的内标签 class，您会看到：

.tabs-inner {
    position: relative;

    flex: 1;

    contain: layout size style;
}

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

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

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

请记住，此样式将应用于您应用中的所有标签页。

我创建了一个repo供参考。

希望对您有所帮助。

Answer 3

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

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>

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

remove white background from ion-tab-bar ionic 4

ionic-framework

angular

ionic4