如何使用onsenui段为制表键设置内容

我想要实现这样的事情我的页面中间：http://i.stack.imgur.com/GrNpS.png（taken from 33566805 - 一个类似的问题有关与制表栏android用户界面）

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但是类= “段” 显示不正确。在Monaca云中，它显示OK。看到这个图片：

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

我应该使用什么UI元素，ons-segment还是其他什么东西？
我怎样才能设置外观来替换圆角按钮看看Square选项卡的外观？
如何设置要更改的内容。我是否使用ons-template或card或其他东西？我是否必须编写自己的函数来设置哪些内容可见？

我更喜欢VUE的答案，但任何其他框架甚至纯JS和CSS都可以。温泉ui 2中有没有准备好这种用法？

中间的布局

来源

2017-09-18 pashute

你能告诉我们你正在使用的代码吗？当我们看到您尝试过的东西时，我们可以更好地回答具体问题。 – theUtherSide

编辑并添加了代码，截图，甚至笔（虽然这不正常，不知道为什么） – pashute

看起来像答案的一部分在这里给出：https://community.onsen.io/topic/1507/ons- tabbar-and-segments/2 但我仍然很乐意听到您的解决方案。 – pashute

OK，答案是：是的，这是段是什么。它自动行为类似标签栏（因为它使用“单选按钮”）

我updated the codepen

我发现我不得不使用与VUE，角或任何其他客户端侧框架的控制器。

做它直接与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的版本错误。 Alls ok结束了。看到我更新的笔。

把“segment”分区和一个div所有cards（我把它ID：tabs-margins）与利润率左缘和右保持它在你想要的边界。

然后你给段div的一类bar-center并使用以下的css：

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

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

您可以进一步风格的“段”的div和它的按钮不显示在顶部边框，使用方形按钮和更高的按钮等。

来源

2017-09-19 21:48:43 pashute

如何使用onsenui段为制表键设置内容

回答

相关问题