Positioning Onsen UI Tabs within page content - onsen-ui

Question

I am creating a page with conference speaker information and would like to have his picture below the main tool bar then have profile, rating and contact information below the picture in tabs format so as not to have long pages on the mobile app.
The examples have seen so far only place the tabs top or bottom which is not always the only way to use them in real life applications.
How would I implement this in a clean way if there's one already provided by the framework?

Answer 1

Instead of using the <ons-tabbar> custom element you can use just the CSS.
The CSS is available at:
http://components.onsen.io/
<div class="my-tab-bar tab-bar">
<label class="tab-bar__item">
<input type="radio" name="tab-bar-a" checked="checked">
<button class="tab-bar__button">
<i class="tab-bar__icon ion-stop"></i>
<div class="tab-bar__label">One</div>
</button>
</label>
<label class="tab-bar__item">
<input type="radio" name="tab-bar-a">
<button class="tab-bar__button">
<i class="tab-bar__icon ion-record"></i>
<div class="tab-bar__label">Two</div>
</button>
</label>
<label class="tab-bar__item">
<input type="radio" name="tab-bar-a">
<button class="tab-bar__button">
<i class="tab-bar__icon ion-star"></i>
<div class="tab-bar__label">Three</div>
</button>
</label>
</div>
But this is positioned in the top so you will have to override the CSS:
.my-tab-bar {
position: initial;
}
http://codepen.io/argelius/pen/dPEpbV