如何设置IONIC4设置标签背景透明？

Question

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

它需要使标签具有透明性，但我不知道如何设置。我尝试添加，variables.scss但透明不起作用。如果只有改变颜色是工作。

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

Answer 1

从tab-bar文档看来，您可以通过使用--backgroundCSS 属性来更改背景，如下所示：

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>

社会保障局

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

编辑

你可能会需要改变的背景离子制表键以及

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>

社会保障局

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. 另外请仔细检查将标签的位置设置为绝对不会破坏布局，特别是safe-area在像 iPhone X 这样底部带有 a 的设备中。