how to use onsenui segment as a tab-bar to set content

Question

I need tabs in the middle of my page

I want to achieve something like this: https://i.stack.imgur.com/GrNpS.png (taken from 33566805 - a similar question about a tab-bar with android UI)

The ons-tabbar is either for the top or bottom of the app and when clicked changes the whole page. So I will use an ons-segment as a tab-bar in the middle of the page. It behaves like a radio-button, with the chosen selected and the others not, which is good. But how do I set the looks and how do I set the content?

Sample code:

<!-- top of page, not part of question -->
<ons-page id="mypage">
<div ...

<!--   HERE GOES    -->
<div id="maintabbar" class="segment tbar-center" style="float:none important!; width: 98%; margin: 0 auto;">
  <div class="segment__item">
    <input type="radio" class="segment__input" name="segment-a" checked>
    <button class="segment__button">One</button>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="segment-a">
    <button class="segment__button">Two</button>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="segment-a">
    <button class="segment__button">Three</button>
  </div>
</div>
<ons-card id="crd1">...

My CSS:

.tbar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stretcher {
   flex: 1;
}

And the JS

ons.bootstrap();

I tried putting this in a codepen but the class="segment" is not showing correctly. In Monaca cloud, it shows OK. See this image:

This question has actually several parts:

• What ui element should I use, an ons-segment or something else?
• How can I set the looks to replace the rounded buttons look to a Square tab look?
• How do I set the content to change. Do I use ons-template or card or something else? Do I have to write my own function to set which content is visible?

I prefer the answer with VUE but any other framework or even plain JS and CSS will do. Is there anything in Onsen ui 2 ready for this kind of usage?

middle-of-layout

Answer 1

OK, The answer is: YES, this is what the Segment is for. It automatically behaves like a tab bar (since it uses "radio buttons")

I updated the codepen

I see that I have to use a controller with VUE, Angular or any other client side framework.

Doing it directly in js with jQuery looks as follows:

function setTab(i){
      var tabscount = 3; // You can do this programmatically
      for (j=1; j<=tabscount; j++){
          if (i == j){
             if ( !($("#card"+j).is(":visible")) ) $("#card"+j).show();
          } else if ( $("#card"+j).is(":visible") ) $("#card"+j).hide();
 }

The reason the elements weren't rendering was because I had the wrong version of CDN. Alls ok that ends ok. See my updated pen.

Putting the "segment" div and all the cards in a div (I gave it id: tabs-margins) with margin-left and margin-right keep it in the bounds you want.

You then give the segment div a class of bar-center and use the following css:

.bar-centered { 
  display: flex;
  align-items: center;
  justify-content: center;
}

.bar-margins { 
  width: 98%; 
  margin-left: 10px;
}

You can further style the "segment" div and its buttons to not show the top border, to use square buttons and taller buttons, etc.