Tabs + additional view

[michal1986]

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?

[fmy_1]

@michal1986

tabs

Im this link Ionic Framework - The Cross-Platform App Development Leader with the example “ionic start myApp tabs” show this … Do it and take a look in the code !

[michal1986]

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).

[fmy_1]

Ok michal1986, you made it clear for me.

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

[Calendee]

You might want to look at this post

Hidden Tabs

Hey all– I patched beta ionic with this feature. You can now set hidden="true" on an ion-tab to prevent it from displaying it’s button in the tab bar while remaining a navigable tab. You can either get to it via the controller or a direct navigation, like a side menu. See this codepen for the feature in action. To get to the ‘about’ tab, you can slide open the menu and select the tab view from there. It’s useful for my project and I think other may want this feature too. Can I get some fee…

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

[Calendee]

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

Ionic : Hiding a Tab

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.

[bealers]

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

[kai23]

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

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.

[Calendee]

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

Ionic : Hidden Tabs

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