タブバーでページを解錠できるようにする

Question

私のページにons-tabbarを追加すると、ページ全体が重なるので、タブ自体をクリックすることはできません。

マイページには、次のようになります（各ページあり、それ自身の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

ようなons-tabbarを実装していない、次の構文を使用します。

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

を

また、ons-tabbarをons-pageの外側に実装して、ons-tabの1つを関連ページにリンクしてください（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> 

はあなたのコードに基づいて、作業CodePenの例である：

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

はそれが役に立てば幸い！

Answer 2

ons-tabbarには、種別ons-tabの子があります。下部タブバーのアイコン配列の内容をコンテンツとして与え、ページの内容をpage = "ID"のパラメータ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> 

は、いくつかの作業codePenです： http://codepen.io/anon/pen/yeQdMX