Tabs + additional view


#1

Hello guys!

First of all I wanna say that I’m amazed by Ionic framework.

But I don’t know one thing.

How should I approach such situation.

Imagine I have tabs application and besides tabs, there is one additional view.
When I click on this view I want tabs to remain in the footer.

Can someone help me in thinking about correct views structure?


#2

Im this link http://ionicframework.com/getting-started/ with the example “ionic start myApp tabs” show this … Do it and take a look in the code !


#3

Dear fmy_1 thank you very much for your time, I really appreciate it.

Problem is little different, maybe I wasn’t clear enough.

I’m using exactly same example as template!
Problem is that when I will go to friends detail page (which I assume is what you thins as ‘additional view’) I will still remain in ‘Friend Tab’.
I want all tab icons to be unselected.
Maybe there is way to do it in pure css (ng class maybe).


#4

Ok michal1986, you made it clear for me.

I think the best way to solve it, as you said, subscribing css class.


#5

You might want to look at this post

His code pen sample uses a custom build of ionic that allows tabs to be hidden.


#6

So, I dabbled with this a bit. This is a VERY ugly hack, but it “works”.

Basically, I’m hiding the Contacts tab by not giving it a title and adding a margin-left: 160px to fix the centering of the tabs after one disappears. If device orientation changes, you might need to dabble with that a bit to get it to work right.

I’m not suggesting this as a real solution, but it could work in a pinch.


Hidden Tabs
#7

I’ve been scratching my head on this use-case too:

I’ve a standard tabbed app with a side menu, with also:

  1. a welcome page, need tabs to be visible at all times, once navigated away from we don’t need to visit it again
  2. Setting page, accessed via a side menu, but want tabs visible at all times

The CSS hack is working for now, we’ll see if it bites me later :smile:


#8

Hello !

Any idea on to do that ? It’s exactly what I’m searching for. The CSS « hack » doesn’t work as expected for me :frowning:

Here is what I have :

http://s.kai23.fr/capture_14-04-13.png

With this :

<ion-tabs class="tabs-positive tabs-icon-only">
	
  <!-- Pets Tab -->
  <ion-tab title="Battle" icon="icon ion-trophy" href="#/app/battle">
    <ion-nav-view name="tab-battle"></ion-nav-view>
  </ion-tab>

   <ion-tab style="margin-left: 160px;">
	  <ion-nav-view name="tab-home"></ion-nav-view>
	</ion-tab>

   <!-- Pets Tab -->
  <ion-tab title="Battle" icon="icon ion-camera" href="#/app/camera">
    <ion-nav-view name="tab-photo"></ion-nav-view>
  </ion-tab>

   <!-- Pets Tab -->
  <ion-tab title="Notifications" icon="icon ion-ios7-world-outline" href="#/app/user/notification"></ion-tab>

</ion-tabs>

Any trick ? Thank you for this forum, really appreciate the effort you put in here.


#9

UPDATE : Here’s a Codepen with the newly available hidden=true attribute.

Via : https://github.com/driftyco/ionic/commit/bb6976ad54736103d78be3bddd9faf7719dc0153