Thanh tab làm cho trang không thể nhấp được

Question

Khi tôi thêm thanh tab tiện ích vào trang của mình, nó chồng lên toàn bộ trang của tôi để tôi không thể nhấp vào bất kỳ thứ gì ngoại trừ chính tab đó.

trang của tôi trông giống như sau (mỗi trang có nó riêng tập tin html):

<ons-page> 

<ons-tabbar> 
    <label class="tab-bar__item"> 
     <input type="radio" name="tab-bar-a" checked="checked"> 
     <button class="tab-bar__button"> 
      <i class="tab-bar__icon fa fa-dashboard"></i> 
      <div class="tab-bar__label">Dashboard</div> 
     </button> 
    </label> 

    <label class="tab-bar__item" ng-click="myNav.pushPage('views/device-settings.html', {animation : 'slide'})"> 
     <button class="tab-bar__button"> 
      <i class="tab-bar__icon fa fa-cogs"></i> 
      <div class="tab-bar__label">Settings</div> 
     </button> 
    </label> 
</ons-tabbar> 

<ons-toolbar> 
    <div class="left"> 
     <ons-toolbar-button ng-click="menu.toggle()"> 
      <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> 
     </ons-toolbar-button> 
    </div> 
    <div class="center">Device</div> 
</ons-toolbar> 

<ons-list id="device"> 
    <ons-list-item> 
     <label class="checkbox"> 
      <input type="checkbox" checked="checked"> 
      <div class="checkbox__checkmark"></div> 
      Switch 1 
     </label> 
     <div class="switch-detail"> 
      <ons-icon icon="fa-calendar"></ons-icon> 
      Last enabled: 9 February 2016 on 17:39 
     </div> 
    </ons-list-item> 
    <ons-list-item> 
     <label class="checkbox"> 
      <input type="checkbox" checked="checked"> 
      <div class="checkbox__checkmark"></div> 
      Switch 2 
     </label> 
     <div class="switch-detail"> 
      <ons-icon icon="fa-calendar"></ons-icon> 
      Last enabled: 9 February 2016 on 17:39 
     </div> 
    </ons-list-item> 
    <ons-list-item> 
     <label class="checkbox"> 
      <input type="checkbox" checked="checked"> 
      <div class="checkbox__checkmark"></div> 
      Switch 3 
     </label> 
     <div class="switch-detail"> 
      <ons-icon icon="fa-calendar"></ons-icon> 
      Last enabled: 9 February 2016 on 17:39 
     </div> 
    </ons-list-item> 
</ons-list> 

Answer 1

Đừng thực hiện ons-tabbar như vậy, sử dụng cú pháp sau:

<ons-tabbar> 
    <ons-tab>tab1</ons-tab> 
    <ons-tab>tab2</ons-tab> 
</ons-tabbar> 

Ngoài ra, hãy thử triển khai ons-tabbar bên ngoài ons-page và liên kết đơn ons-tab với trang tương đối (sử dụng ons-template):

<ons-tabbar> 
    <ons-tab page="home.html" active="true"> 
    <ons-icon icon="ion-home"></ons-icon> 
    <span style="font-size: 14px">Home</span> 
    </ons-tab> 
    <ons-tab page="fav.html" active="true"> 
    <ons-icon icon="ion-star"></ons-icon> 
    <span style="font-size: 14px">Favorites</span> 
    </ons-tab> 
    <ons-tab page="settings.html" active="true"> 
    <ons-icon icon="ion-gear-a"></ons-icon> 
    <span style="font-size: 14px">Settings</span> 
    </ons-tab> 
</ons-tabbar> 

<ons-template id="home.html> 
    <ons-page> 
    PAGE CONTENT 
    </ons-page> 
</ons-template> 

Dưới đây là một ví dụ CodePen làm việc, dựa trên mã của bạn:

http://codepen.io/andipavllo/pen/rxQEeY

Hy vọng nó sẽ giúp!

Answer 2

tab-ons có trẻ em thuộc loại tab. Bạn cung cấp nội dung của mảng biểu tượng tabbar thấp hơn dưới dạng nội dung và phải cung cấp nội dung của trang dưới dạng id thông số của trang = "ID".

<ons-tabbar var="tabbar" animation="fade"> 
    <ons-tab 
    active="true" 
    icon="ion-chatbox-working" 
    label="Comments" 
    page="page1.html"> 
    </ons-tab> 
    <ons-tab 
    icon="ion-ios-cog" 
    label="Settings" 
    page="page2.html"> 
    </ons-tab> 
</ons-tabbar> 
<ons-template id="page1.html" > 
    <ons-toolbar> 
    <div class="center">Page 1</div> 
    </ons-toolbar> 
</ons-template> 
    <ons-template id="page2.html" > 
    <ons-toolbar> 
    <div class="center">Page 2</div> 
    </ons-toolbar> 
</ons-template> 

Dưới đây là một số codePen làm việc: http://codepen.io/anon/pen/yeQdMX