I want to remove the default title of the ion-tabs, because it cost to much space and I can’t customize it for my use.
Any one did this before?
Use something like this
<ion-tab class="tabs-icon-only" icon-off="ion-arrow-swap" icon-on="ion-arrow-swap" href="#/app/home">
<ion-nav-view name="tab-home"></ion-nav-view>
</ion-tab>
Here please note that tabs-icon-only
is the class for the ion-tab
.
Thanks but it does not work. I added tabs-icon only. But the title-bar still available on top.
Can you show me the screen shot?
Oh, you are referring to the header bar. tabs refer to the bottom tabs, where you have 6 icons with titles. So in order to remove the titles, then my previous solution works.
If you wish to remove the header bar itself, then you can say display:none
css to the ion-header-bar
.
I have another question. Are you using bothe header and subheader? Is the below one with color a subheader?
I want to remove the header bar (this gen by ion-tabs).
The second is another header too.
<div class="bar bar-header bar-calm">
<div class="buttons">
<button class="button button-clear ion-chevron-left"></button>
</div>
<h1 class="title">header
</h1>
<div class="buttons">
<button class="button button-clear ion-chevron-right"></button>
</div>
</div>
And I added this code but nothing change.
.ion-header-bar{
display: none;
}
Actually you are not using the ion-header-bar
here. That’s the reason why there is no effect of your css. Could you please add a codepen here?
I don’t know how to use code pen with ionic framework, I put all I have to it.
In that code pen i can’t see anything. All you need to do is add the markup of that page along with the css and JS you have used.
Sorry but I can’t. Could you please use this http://codepen.io/mhartington/pen/MwPRNp and help me to remove that header bar?
OK. I found a solution for this. Just add an attribute like this:
<ion-view hide-nav-bar="true">
Could you please help me another problem. I want to change the default active color of the tab icon. Default is blue.
Try this
.tab-item.tab-item-active {
border-color: black !important;
}
This also depends on the way u use the tabs. Few use ion-tab
and few just use the classes. So once check the class that you are using and apply this css.