如何使用onsenui段为制表键设置内容
问题描述:
我需要标签在如何使用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中有没有准备好这种用法?
中间的布局
答
OK,答案是:是的,这是段是什么。它自动行为类似标签栏(因为它使用“单选按钮”)
我发现我不得不使用与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和它的按钮不显示在顶部边框,使用方形按钮和更高的按钮等。
你能告诉我们你正在使用的代码吗?当我们看到您尝试过的东西时,我们可以更好地回答具体问题。 – theUtherSide
编辑并添加了代码,截图,甚至笔(虽然这不正常,不知道为什么) – pashute
看起来像答案的一部分在这里给出:https://community.onsen.io/topic/1507/ons- tabbar-and-segments/2 但我仍然很乐意听到您的解决方案。 – pashute