如何设置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;
}

---

EDIT II

上面的答案是正确的，但缺少使一切无法按预期运行的功能。问题是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底部带有safe-area的设备中的布局。