CODEWITHSUNDEEP
ionic-frameworkstylesionic4
alucard263096
alucard263096

Reputation: 71

How to set IONIC4 set tabs background transparent?

I use ionic4 now. And my client and his designer give a picture like below.

enter image description here

It need to make tabs has transparent but I don't know how to set. I have try to add in variables.scss but the transparent is no working. If only change color is work.

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

Upvotes: 5

Views: 2750

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

From the tab-bar docs seems like you can change the background by using the --background CSS property like this:

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);
}

EDIT

You'd probably need to change the background of the ion-tab-button as well

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

EDIT II

The answer above is correct, but is missing something that makes everything not to work as expected. The problem is that the ion-tabs element is placed outside of the element that represents the content. What you need based on your question is to place the tabs above the content instead.

One way to do that is by setting the positioning of the ion-tabs to be absolute, like this:

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;
  }
}

That produces this result:

tabs

Notes

  1. Please notice that since the tabs are above the content, you will need to add some margin-bottom to the content of each page that is used as a tab.
  2. Also please double check if setting the positioning of the tabs to be absolute doesn't break the layout specially in devices with a safe-area at the bottom like the iPhone X.

Upvotes: 10

Related Questions