CODEWITHSUNDEEP
angularionic4
Claudio Teles
Claudio Teles

Reputation: 372

How do I adjust the Tab Size in Ionic 4?

I've created a tab and figured out how to change the color according to Ionic 4 CSS Docs found here https://beta.ionicframework.com/docs/theming/css-variables

But there is not reference there as to how to change the size, the code on for ionic 3 does not work.

here is what I have

ion-tabs {
margin-top: 80px;
--ion-tabbar-background-color: #FBFBFB;
--ion-tabbar-text-color-active: #87BCDE;
--ion-tabbar-text-color: #424242;
font-size: 40px;

}

Upvotes: 4

Views: 4604

Answers (2)

Nayyar Jamal
Nayyar Jamal

Reputation: 353

With below code you can change the size of tab-label :

ion-tab-button {        
        ion-label {  
            font-size: 12px;
        }
    }

Upvotes: 3

Mohammad Reza Mrg
Mohammad Reza Mrg

Reputation: 2043

for color in variable.scss:

  --ion-tab-bar-background: var(--ion-color-primary);                    
  --ion-tab-bar-color: var(--ion-color-dark);    
  --ion-tab-bar-color-activated: var(--ion-color-light);

for size i think it's not ready yet to style like that. you can change style of tab-selected in your global.sass 

:root{
    .tab-selected{
        font-size: 32px !important;

        ion-icon{
            font-size: 32px !important
        }
    } 
}

Upvotes: 0

Related Questions