How to hide the tab bar in Tabs And Navigation: 1.0.0-beta.1

ionic-v1
1

In version 1.0.0-beta.1 this change content: automatically add/remove has-* classes to content has removed the way to explicit set attribute has-tabs="false" in order to hide the tab bar.

So in the demo below, I am wondering how can I hide the tab bar in facts.htm and facts2.html templates?

Tabs And Navigation: 1.0.0-beta.1
http://codepen.io/ionic/pen/odqCz

Many thanks!

2

Hey mike, do the fact states need to be nested in the tabs state if they don’t have tabs? Also, you can switch between states using <a ui-sref="/state.whatever">

Is this what you are looking for?

3

Hi Adam,

Many thanks for your response.

In the older versions, i can set the attribute has-tabs="false" in facts.htm and facts2.html templates in order to hide the tab bar, like this:

<script id="facts.html" type="text/ng-template">
  <ion-view title="'Facts'">
    <ion-content **has-tabs="false"**>
      .......
    </ion-content>
  </ion-view>
</script>

But it’s not working after update to v1.0.0-beta.1, Is there a way to hide the tab bar just on facts.html and facts2.html templates?

4

Here’s what I’m doing to achieve this. It’s all just html and css at the end of the day.

In the specific .html files that you want to hide tabs, include an inline style at the top to hide the tabs, and add the class “hide-tabs” to the ion-view tag:

<style> .tabs { display: none; } </style>
<ion-view title="'Facts'" class="hide-tabs">
</ion-view>

Then in my app’s css file I have this, which moves the view all the way down as if the tabs weren’t there:

.hide-tabs .has-tabs { bottom: 0px; }

That should do the trick. It does seem like the framework should have a more elegant way to achieve this however.

1 Like
5

Hi!
I’m still looking for a clean & “official” method to remove tabs on a single page.
The <ion-content has-tabs="false"> was exactly what I want but it doesn’t exist anymore.
Is there a good reason or a best practice to implement that?
Thanks :slight_smile:

1 Like
6

Me too! Any updates about an official method to remove tabs on a single page ?
(like “has-tabs” behavior)