ionic-framework - 如何设置IONIC4设置选项卡背景透明？

Question

我现在使用ionic4。我的客户和他的设计师给出了如下图。

它需要使选项卡透明，但我不知道如何设置。我尝试添加 variables.scss 但透明不起作用。如果只改变颜色就可以了。

.ion-color-tabstrans {
  --ion-color-base: rgba(100,100,100,0.1);;
}

Answer 1

来自tab-bar 文档似乎您可以使用 --background CSS 属性更改背景，如下所示:

HTML

<ion-tabs>
  <!-- Tab bar -->
  <ion-tab-bar class="my-custom-tab-bar" slot="bottom">
    <ion-tab-button tab="account">
      <ion-icon name="person"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="contact">
      <ion-icon name="call"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

SCSS

ion-tab-bar.my-custom-tab-bar {
  --background: rgba(100,100,100,0.1);
}

<小时/>

编辑

您可能需要更改 ion-tab-button 的背景 以及

ion-tab-bar.my-custom-tab-bar ion-tab-button {
  --background: transparent;
}

<小时/>

编辑二

上面的答案是正确的，但缺少一些东西，导致一切都无法按预期工作。问题在于 ion-tabs 元素被放置在表示内容的元素的外部。根据您的问题，您需要的是将选项卡放置在内容上方。

一种方法是将 ion-tabs 的定位设置为绝对位置，如下所示:

HTML

<ion-tabs>
  <!-- I've added a my-custom-tab-bar class to the ion-tab-bar element -->
  <ion-tab-bar class="my-custom-tab-bar">
    <!-- ... -->
  </ion-tab-bar>
</ion-tabs>

SCSS

ion-tab-bar.my-custom-tab-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  --background: rgba(255,255,255,0.8);

  ion-tab-button {
    --background: transparent;
  }
}

这会产生这样的结果:

注释

1. 请注意，由于选项卡位于内容上方，因此您需要向用作选项卡的每个页面的内容添加一些 margin-bottom。
2. 另请仔细检查将选项卡的位置设置为绝对位置是否不会破坏布局，特别是在底部具有安全区域的设备(例如 iPhone X)中。