How to create several tab on pop-up/modal?


#1

Hi All.

I want to create a modal/pop up page that contain 3 tabs on it.
When user click on the tab it will show the different content of each tabs.

you can look at my codepen here : http://codepen.io/harked/pen/NqvevP

What actually i want to create is like the following pict :
http://nanonimos.com/tabs.jpg

is it possible to create like that with Ionic?


#2

http://ionicframework.com/docs/api/directive/ionTabs/
?


#3

Hi @bengtler, is it possible if we use 3 tabs in modal?
You can look at this pict :
http://nanonimos.com/tabs.jpg

It is modal/pop up menu and there is 3 tabs there. Do you have a clue, @bengtler?


#4

A modal is something like an own view… so it should work…

Here is an example of an oridinary view with three tabs. you can take the “tab” stuff and put it in the ion-content of the modal


#5

Several page in Modal?
I’ve tried to make it @bengtler :
I add the “Ion-Tab” stuff in “Ion-Modal” and put the router config on the controller.
but the app is re-refreshing continously.

You can look at my pen here : http://codepen.io/harked/pen/ZGxGpb

Is it possible to create several tab on single modal in Ionic framework?
any thought @mhartington, @Calendee, @brandyshea ?

What actually i want to create is like this one :
http://nanonimos.com/tabs.jpg


#6

Hi @harkedian, I’ve forked your codepen and got it working with inline tabs, check it out:

PS: I suppose you’re just wiring the app’s structure right now, but to err on the safe side: make sure your navigation, headers, buttons etc. don’t all look the same way in the end! :wink:


[SOLVED][BUG?] Collection-repeat inside ion-tabs inside modal
#7

Hi @nuba. I’ve look at your codepen and Cool! glad you’ve make it works (modal have a tab).
But i see the app is still continuously refresing,
And the Create button didn’t work also.

Is it due to the $stateProvider function?
Should we separate it in another js files?

Anyway, Thanks for your kind help :smile:


#8

@harkedian yes, I left the rest of the html and js untouched. The constant refresh was ui-router was trying to transition to /tab/home url. By ditching that unnecessary (for the purposes of this modal + tabs issue) stuff and the button is working fine. Also, $scope.newUser is now being cleaned after that modal button is clicked.

Saved it to the same codepen, check it out http://codepen.io/nuba/pen/EjEjEm


#9

Great! I’ll try to implement it within my real app.
Thanks, @nuba! :wink:


#10

Currently this is a limitation of ui-router.
We’re looking into other solutions to enable this kind of routing in future versions of ionic