Ionic 4 标签栏溢出

Question

我想要这样的布局：

但是得到了这个：

我的按钮被标签栏切割。我该如何解决这个问题？
我尝试为所有标签添加 "overflow: visible"，但它不起作用。
我的模板：

.place-button-wrapper{
    position: absolute;
    bottom: 20px;
}

<ion-tabs>
...
    <ion-tab-button tab="places">
      <div class="place-button-wrapper" >
        <img class="tabs-icon" src="assets/icons/mapiconelepse.png" alt="">
      </div>
    </ion-tab-button>
...
</ion-tabs>

Answer 1

我解决了这个问题，只是将 "contain: none" 添加到我的 ion-tabs。

Answer 2

如果将 "contain: none" 添加到 ion-iabs 不起作用，则将 "contain: none" 添加到 ion-tab-bar。

ion-tabs { contain: none; }

或

ion-tab-bar { contain: none }

Answer 3

这段代码对我有用（我知道，也许这不是最干净的解决方案，但我没有找到其他方法）

我创建了一个递归方法，并在该方法中尝试获取所有选项卡按钮，如果没有，我使用 setTimeout 调用该方法（setTimeout 是避免填满堆栈所必需的）并在找到后所有按钮，我访问了大家的影子根，我改变了溢出值：

  setStyle() {
    const all = document.querySelectorAll('.tab-has-icon');

    if(all.length === 0) {
      setTimeout(() => {
        this.setStyle();
      }, 0);
      return;
    }

    all.forEach(el => {
      el.shadowRoot.querySelector('.button-native').setAttribute('style','overflow: inherit')
    });
  }

Answer 4

我混合了所有答案：

// as mentioned about
ion-tabs { contain: none; }
ion-tab-bar { contain: none }

 // a wrapper for the position
.buttonWrapper {
  position: absolute;
  bottom: 20px;
}

// for the overflow
ion-tab-button::part(native){
   overflow: visible;
}

Ionic 4 标签栏溢出

Ionic 4 tab bar overflow

css

typescript

ionic-framework

angular

ionic4