Beautiful Tabs – Ionic 5

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