在頁面內容中定位溫泉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