父元素上的Ionic 4标签切割

Question

我正在尝试将ion-tab按钮稍微向上移动，以将位置设为绝对，顶部-30px和可见溢出，但是这些均无效。我试过已经在ion-tabs上放了container（在堆栈溢出时为用户提供了一个解决方案），但也没有用。

PS1。即使我尝试创建一个新的Ionic 4项目，也无法实现。

PS2。我在Ionic 3上取得了成功

有人可以帮我吗？

Answer 1

我可以通过简单地将ion-tab-button元素放在ion-tab-bar外部并添加到CSS下方来解决此问题。

ion-tab-button{
  position: absolute !important;
  bottom: 0.5vh;
  z-index: 999;
  height: auto;
}

.tab-1 {
  left: 5%;
}

.tab-2 {
  left: 31%;
}

.tab-3 {
  left: 54%;
}

.tab-4 {
  left: 79%;
}

谢谢

Answer 2

您不能仅仅通过更新CSS来做到这一点，因为Ionic提供了Web组件。

离子Web组件的很多样式基于 CSS4变量的值，我们可以更改这些变量的值以仅修改Web组件的内部样式。

请阅读本文： https://www.joshmorony.com/shadow-dom-usage-in-ionic-web-components/

您可以对以下CSS变量进行更改：

 -padding-top: -30px;
--padding-bottom: 6px;
--padding-start: 0px;

Answer 3

在Ionic 5上，我们需要处理de shadow DOM ... 我在这篇文章中提出了解决方案：

https://stackoverflow.com/a/63301631/4320596