Ionic 4 ion-tab-bar set background transparent in tabs only

Ionic Framework
1

hi
how can change background to transparent in first tabs
when i use this class

ion-tab-bar {

--background: transparent;

--ion-color-base: transparent !important;

position: absolute;

bottom: 0px;

width: 100%;

--color: #b9b9b9;

}

it’s change in all tabs but i neef first tabs only

2

What does “in first tabs” mean?

3

i’ve 4 tabs
i need change background in fisrt tab from 4 tabs

4

try this example

<ion-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-tab-bar {
    --background: transparent;
    --ion-color-base: transparent !important;
    position: absolute;
    bottom: 0px;
    width: 100%;
    --color: #b9b9b9;
    ion-tab-button{
        --background: #ccc;
    }
    ion-tab-button:first-child{
        --background: transparent;
    }
}
1 Like
5

thank u ,
but i need change ion-tab-bar in first tab not button
first tab make ion-tab-bar transparent but every ion-tab-bar background white

6

let me show your ion-tab-bar html

1 Like
7 
<ion-tab-bar slot="bottom" >

    <ion-tab-button tab="markets" (click)="open('markets')">

        <fa-icon [icon]="faConciergeBell"></fa-icon>

        <ion-label>المتاجر</ion-label>

    </ion-tab-button>

    <ion-tab-button tab="tab2">

        <fa-icon [icon]="faClipboard" (click)="open('markets')"></fa-icon>

        <ion-label>الطلبات</ion-label>

    </ion-tab-button>

    <ion-tab-button tab="tab3">

        <fa-icon [icon]="faBullhorn" (click)="open('markets')"></fa-icon>

        <ion-label>العروض</ion-label>

    </ion-tab-button>

    <ion-tab-button tab="tab4">

        <fa-icon [icon]="faUser" (click)="open('markets')"></fa-icon>

        <ion-label>اضافي</ion-label>

    </ion-tab-button>

</ion-tab-bar>

i need markets tab transparent background

8

tabs
tabs300×520 8.03 KB

its working fine

ion-tab-bar {
    --background: transparent;
    --ion-color-base: transparent !important;
    position: absolute;
    bottom: 0px;
    width: 100%;
    --color: #b9b9b9;
    ion-tab-button{
        --background: #ccc;
    }
    ion-tab-button:first-child{
        --background: transparent;
    }
}
1 Like
9

nooo :smile: :smile:
i need change all toolbar not button