如何使用onsenui段作为标签栏来设置内容

Question

我需要在页面中间添加标签

我想实现这样的目标：http://i.stack.imgur.com/GrNpS.png（taken from 33566805 - 关于带有Android UI的标签栏的类似问题）

ons-tabbar适用于应用的top或bottom，点击后会更改整个page。所以我将use an ons-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();

我尝试putting this in a codepen，但是类=＆＃34;段＆＃34;没有正确显示。在Monaca云中，它显示正常。看到这张图片：

这个问题实际上有几个部分：

• 我应该使用哪种ui元素，ons-segment或其他什么？
• 如何设置外观以将圆角按钮替换为方形标签外观？
• 如何设置要更改的内容。我是否使用ons-template或card或其他内容？我是否必须编写自己的函数来设置哪些内容可见？

我更喜欢VUE的答案，但任何其他框架甚至普通的JS和CSS都可以。 Onsen ui 2中有什么东西可以用于这种用途吗？

中间的布局

Answer 1

好的，答案是：是的，这就是Segment的用途。它自动表现得像一个标签栏（因为它使用“单选按钮”）

我updated the codepen

我看到我必须使用具有VUE，Angular或任何其他客户端框架的控制器。

使用jQuery在js中直接执行如下操作：

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();
 }

元素未呈现的原因是因为我的CDN版本错误。好的，结果还可以。看我更新的笔。

将“segment”div和所有cards放在div中（我给它ID：tabs-margins）并使用margin-left和margin-right将它保持在你的范围内想。

然后，您为段div提供bar-center类，并使用以下css：

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

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

您可以进一步设置“segment”div及其按钮的样式，以便不显示顶部边框，使用方形按钮和更高的按钮等。