

Create tabs.sccs file in folder yourpath/src/theme/ and we need to register in global.scss file
Edit src/global.scss
@import "./theme/tabs.scss";
Next we need edit tabs.html file src/app/tabs/tabs.page.html
<ion-tabs>
<div slot="bottom" class="custom-tabs">
<a class="tab" routerLink="/tabs/tab1" routerLinkActive="active">
<div class="tab-content">
<ion-icon name="home"></ion-icon>
<span class="tab-title">Home</span>
</div>
</a>
<a class="tab" routerLink="/tabs/tab2" routerLinkActive="active">
<div class="tab-content">
<ion-icon name="person"></ion-icon>
<span class="tab-title">Profile</span>
</div>
</a>
<a class="tab" routerLink="/tabs/tab3" routerLinkActive="active">
<div class="tab-content">
<ion-icon name="cog"></ion-icon>
<span class="tab-title">Settings</span>
</div>
</a>
</div>
</ion-tabs>
The routerLinkActive property add a custom class when the browser path is the same that routerLink property
Now we apply all styles in file src/theme/tabs.scss
// Add background to all ion-content components and for ion-tabs compoment
// this allow to see border-radius in ion-tabs
ion-content, ion-tabs {
background: #f4f5fa;;
--background: #f4f5fa;;
}
.custom-tabs {
background-color: white;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
height: 55px;
display: flex;
flex-direction: row;
padding: 10px;
.tab {
flex: 1;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
.tab-content {
display: flex;
align-items: center;
border-radius: 20px;
color: #c5c7d1;
justify-content: center;
padding-top: 5px;
padding-bottom: 5px;
font-weight: 600;
transition: all 0.5s ease;
.tab-title {
width: 0;
height: 0;
overflow: hidden;
transition: all 1s ease;
}
}
// This class display text of the tav
&.active {
.tab-content {
background: var(--ion-color-tertiary);
color: white;
.tab-title {
width: 60px;
height: 22px;
}
}
}
}
}
// Add support to dark mode
@media (prefers-color-scheme: dark) {
ion-content, ion-tabs {
background: var(--ion-background-color);
--background: var(--ion-background-color);
}
.custom-tabs {
background-color: var(--ion-toolbar-background);
}
}
Sé el primero en responder