Tabs in ion-content

ionic-v1
1

Hi!

In my app I’ve a screen which follows a master detail pattern: the master screen displays a list of contracts and the detail view displays one contract.
This contract can have one or several financial simulations.

The state of my detail view is as follows: url: “/contract/:contractId/:simulationId?” (the second parameter is optionnal)

My detail view has the following architecture:

<ion-view title="...">
  <ion-content> <!-- yep I read that tabs shouldn't be placed inside ion-content -->
    <!-- Some contract informations... -->

    [...]
  </ion-content>
</ion-view>

Instead of the “[…]”, I would like to display tabs. I don’t want them to be at the top or bottom of the page, I don’t want their ion-tab content to overlap my screen’ content. Everything I tried failed. I’m looking for something near the jQuery UI’ tab (https://jqueryui.com/tabs/).

I’ve two last requirements: if the simulationId exists, the matching tab should be active. Finally, in my dreams, I’d like to have an horizontal touchable scroll on the tabs (if there are more than 3 or 4 simulations). But I think that this last requirement is not compatible with my touchable side menu, isn’t it?

Thanks in advance to anyone who could help me,
Maybe someone such as @max could give a quick “feasible or not flag” :smile:

Regards

2

Check this CodePen: http://codepen.io/anon/pen/YXPmwo
It’ll give you an idea of what my page looks like.

3

For those who are interested, check my solution using ion-scroll: http://codepen.io/anon/pen/vOLaYg

4

I used a slidebox for a somewhat tab like behaviour inside a page… works and looks great ! here look at the demo:

1 Like
5

Works nice too! However, ion-scroll allows unlimited items: http://codepen.io/anon/pen/VLeBrW vs http://codepen.io/anon/pen/PqZBOe

6

Hello,
Am having the same issue, the link to your codepen does not work for me!!
Can you help with this ?
Thank you