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

Question

我正在创建一个包含会议发言人信息的页面，并希望在主工具栏下方显示其图片，然后在选项卡格式下显示图片下面的配置文件，评分和联系信息，以免移动应用上的长页面。

到目前为止，实例看到的只是标签的顶部或底部，并不总是在实际应用中使用它们的唯一方法。

如果框架已经提供了一个，我该如何以一种干净的方式实现这个功能？

Answer 1

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

的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