In my Ionic 4 project, I have tabbed interface in which I have 4 tabs.
I tried to customize the ion-tab
by adding some custom css on ion-tab-bar
to make rounded corners like this.
I have used following code to achieve this design.
ion-tab-bar {
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
ion-tab-button {
transition: 0.2s ease-in;
}
.tab-selected {
border-bottom: 4px white solid;
// transition: 0.2s ease-in;
font-size: 0;
ion-icon {
transform: scale(1.3);
transition: 0.2s ease-in;
}
}
The problem I am facing here is, there is a white background on the top which is over lapped over the cards which I am showing on selected tab page.
I don't know why that white background is appearing over the cards.
I want that to be transparent.
I have tried to change the background color through scss
file of tabs component but that didn't work for me.
How can I remove that white background on ion-tab-bar
.