jquery - onsenui セグメントをタブバーとして使用してコンテンツを設定する方法

Question

ページの中央にタブが必要です

私はこのようなことを達成したい: http://i.stack.imgur.com/GrNpS.png ( 33566805 から取得- Android UI のタブバーに関する同様の質問)

は、またはアプリons-tabbarのいずれかであり、クリックすると全体が変更されます。そのため、ページの中央にあるタブバーとしてを使用します。選択されたものが選択され、他が選択されていないラジオボタンのように動作します。これは良いことです。しかし、どのようにルックスを設定し、コンテンツをどのように設定すればよいのでしょうか?topbottompageons-segment

サンプルコード:

<!-- 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">...

私のCSS：

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

.stretcher {
   flex: 1;
}

そして、JS

ons.bootstrap();

これをコードペンに入れてみましたが、class="segment" が正しく表示されません。Monaca クラウドでは OK と表示されます。この画像を参照してください。

この質問には、実際にはいくつかの部分があります。

• どのUI要素を使用するons-segment必要がありますか?
• 丸みを帯びたボタンの外観を正方形のタブの外観に置き換えるように外観を設定するにはどうすればよいですか?
• コンテンツを変更するように設定するにはどうすればよいですか。ons-templateまたはcardまたは何か他のものを使用しますか？どのコンテンツを表示するかを設定するには、独自の関数を作成する必要がありますか?

私は VUE での回答を好みますが、他のフレームワークやプレーンな JS と CSS でさえも可能です。Onsen ui 2 には、このような使用法に対応するものはありますか?

レイアウトの中間