Tabs and ionic = </3

ionic-v1
1

Hello,

Well i was searching to make this in my application (let’s see the picture i made for you).

I think I can do this with ion-menu but in general cases, ion-menu is used with a slide from left to right. I just want a simple widget with 3 tabs calling 3 differents html pages with ion-view > ion-content.
Have you got some ideas to make this ?

2

You could do something like this.

3 Likes
3

completely unrelated to this topic but I’ve been working with ionic for over a month now and I’ve noticed that @mhartington is killing it with the forum support. always prompt and helpful, thanks for your awesome work, Mike!

4 Likes
4

Thanks for the kind words @notmatt :smile:

I do what I can, I miss a few questions here and there so I really count on all of you to help out where you can. Lets make this a great and helpful community :smile:

2 Likes
5

Yeah thanks a lot for your time and patience !
I’ll try to set up this example to my app and I’ll keep you in touch :blush:

6

Hi @mhartington How i can setting parameter on router tabs?

.state('tabs.album', {
  url: "/album/:Id",
  views: {
    'tabs-album': {
      templateUrl: "album.html",
      controller: 'AlbumTabCtrl'
    }
  }
})
.state('tabs.friend', {
  url: "/friend/:Id",
  views: {
    'tabs-friend': {
      controller: 'FriendTabCtrl'
      templateUrl: "facts.html",
    }
  }
})

HTML:

  <ion-tab title="Album" icon="ion-home" href="#/tabs/album">
      <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Friend" icon="ion-ios7-information" href="#/tabs/friend">
      <ion-nav-view name="about-tab"></ion-nav-view>
    </ion-tab>

Thank you!

7

I use ui-sref so my syntax will be a bit different.

<ion-tab ui-sref="main.detail({albumId: album.id })"></ion-tab>

Then in my state provider.

	.state('main.detail', {
		url: "/products/: albumId",
		views: {
			'content': {
				templateUrl: "templates/detail.html",
				controller: 'DetailCtrl'
			}
		}
	});
8

To continue with my tabs : in your example you are using this code in your js part.

.state('tabs', {
  url: "/tab",
  abstract: true,
  templateUrl: "tabs.html"
})

His effect is (thanks to the abstract) to put the tab all over your nav, isn’t it ?
But what if I just want a sub-nav by tabs in one page and not on all my navigation ?

I think that I have to use the $ionicTabsDelegate but I’m a bit confused with all thoses directives…

9

Is there a solution to call my content from another file .html from another ?

If it’s possible, does my ion-tabs have to be with my content who’s called, or in my page calling the content ?
Exemple : I have a html file called “manifs.html” where I have my nav, an image, my awesome title and the awesome description. I have 3 diffrent contents to call in the end of my manifs.html .In order to call my contents do I have to put my ion-tabs in my manifs.html or directly before my content ?