Панель вкладок делает страницу не щелкающей

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 на относительную страницу (используя 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. Вы задаете содержимое массива значков нижней вкладки в качестве содержимого, а содержимое страницы следует указывать в качестве параметра id для page="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