Question

我正在创建一个包含会议发言人信息的页面，并希望将他的图片放在主工具栏下方，然后在图片下方以标签格式显示个人资料，评级和联系信息，以便在移动应用程序中不会有长页面。

到目前为止，示例只显示了顶部或底部的标签，这并不总是在现实生活中使用它们的唯一方法。

如果框架已经提供了一个，我将如何以干净的方式实现它？

Answer 1

您可以只使用CSS，而不是使用<ons-tabbar>自定义元素。

CSS可在以下位置获得： http://components.onsen.io/

<div class="my-tab-bar tab-bar">
  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-a" checked="checked">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-stop"></i>
      <div class="tab-bar__label">One</div>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-a">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-record"></i>
      <div class="tab-bar__label">Two</div>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-a">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-star"></i>
      <div class="tab-bar__label">Three</div>
    </button>
  </label>
</div>

但是这位于顶部，因此您必须覆盖CSS：

.my-tab-bar {
  position: initial;
}

http://codepen.io/argelius/pen/dPEpbV

在页面内容中定位Onsen UI选项卡

1 个答案: