Split page with tabs

ionic-v1
1

Hi everyone,
I’d like to have a page split in two:

  • at the top part, some content
  • at the bottom part, some content with tabs

Something like that:

  <div> Some  content I'd like to see at the top </div>
  
  // Content tab should be seen under the previous content
   <tabs tabs-type="tabs-icon-left"
          tabs-style="tabs-primary" padding-top>

        <tab title="Tab1">
            Tab1
        </tab>

        <tab title="Tab2">
            Tab2
        </tab>
    </tabs>

Is it possible to use tabs without using the full page?

Thanks

2

hey @nicolasca, sure, it’s possible. What you might want to try is this custom CSS:

tab {
  top: 50%;
}
3

Yes that what I tried first. The tab is well adjusted, but I cannot see my top content. Am I missing something?

Here is a simple example http://codepen.io/samsam/pen/nEIle

Thanks

4

I’ve wrapped both sections of the page in view tags and given them classes. Then positioned them top and bottom. Also added content and header to the top section but thats just polish.

http://codepen.io/gregorypratt/pen/Anjit

Is that what you’re after?

Hmmm might be a good idea for a demo!

5

Yes, but the problem is:

  • I have a <pane side-menu-content> tag.
  • I have others <view> tag

So I cannot make it work in my app. The best would have been to make only a change in the css.

But thanks for your help :smiley: