1

我需要页面中间的标签

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

ons-tabbar是应用程序的或top，bottom单击时会更改整个page. 所以我将在页面中间使用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();

我尝试将其放入代码笔中，但 class="segment" 未正确显示。在 Monaca 云中，它显示 OK。看这张图片：

段标签栏

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

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

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

布局中间

4

1 回答 1

0

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

我更新了代码笔

我看到我必须使用带有 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;
}

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

于 2017-09-19T21:48:43.957 回答