Onsen：ons-tabbarでons-splitterを使うには？

Question

私はハイブリッドアプリを作成するために、温泉のUIを使用しています。

ons-splitterとons-tabbarを同時に使用することができるかどうかを知る必要があります。私はそれを全く参照できません。

私はアドオン-タブバーとアドオン・スプリッタを使用して、私のアドオン・スプリッタが動作しなくなったが、私は私のページからアドオン-タブバーを削除すると、すべてが再び作業を開始します。

これは私のコードです：

<ons-splitter > 
    <ons-splitter-side id="menu" side="right" width="220px" collapse swipeable> 
    <ons-page> 
     <ons-list> 
     <ons-list-item onclick="fn.load('home.html')" tappable> 
      Home 
     </ons-list-item> 
     <ons-list-item onclick="fn.load('settings.html')" tappable> 
      settings 
     </ons-list-item> 
     <ons-list-item onclick="fn.load('about.html')" tappable> 
      About 
     </ons-list-item> 

     </ons-list> 

    </ons-page> 
    </ons-splitter-side> 
    <ons-splitter-content> 
    <ons-navigator id="navi" page="home.html"></ons-navigator> 
    </ons-splitter-content> 
</ons-splitter> 


<ons-tabbar id="menu2" position="bottom"> 
<ons-tab page="home.html" label="Search For Personal Trainers" icon="search-plus" onclick="fn.load('home.html')" tappable disabled></ons-tab> 
</ons-tabbar> 

任意の助けをいただければ幸いです。

Answer 1

ons-splitterとons-tabbarを連動させるには、ons-navigatorをプライマリナビとして使用します。

はここでここフランDIOXポストのオフに基づいてコードの私のバージョンです：https://community.onsen.io/topic/623/trouble-with-tab-splitter-and-navigation-working-together/2

<!-- First navigation component: Navigator. This will remain always on top of the app. --> 
     <ons-navigator id="myNavigator" page="splitter.html"> 
     </ons-navigator> 

      <!-- Second navigation component: Splitter. This will disappear if the first component changes its content. --> 
      <ons-template id="splitter.html"> 
      <ons-splitter> 
       <ons-splitter-side id="mySplitter" swipeable width="250px" collapse swipe-target-width="50px"> 
       <ons-page> 
        <ons-list> 
        <ons-list-item onclick="fn.load('home.html')" tappable> 
         Home 
        </ons-list-item> 
        </ons-list> 
       </ons-page> 
       </ons-splitter-side> 
       <ons-splitter-content id="content" page="tabbar.html"> 
       </ons-splitter-content> 
      </ons-splitter> 
      </ons-template> 

      <!-- Third navigation component: Tabbar. This will disappear if the first or second components change their content. --> 
      <ons-template id="tabbar.html"> 
       <ons-page id="tabbarPage"> 
       <ons-toolbar> 
        <div class="left"> 
        <!-- Toolbar-button with different icons depending on the platform. --> 
        <ons-toolbar-button onclick="fn.open()"> 
         <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon> 
        </ons-toolbar-button> 
        </div> 
        <div class="center">Nav, Splitter &amp; Tabs</div> 
        <div class="right"> 
        </div> 
       </ons-toolbar> 

       <!-- Auto-positioned Tabbar: top on Android, bottom on iOS/other. --> 
       <ons-tabbar id="myTabbar" position="auto"> 
        <ons-tab page="tab1.html" label="Tab 1" active> 
        </ons-tab> 
        <ons-tab page="tab2.html" label="Tab 2"> 
        </ons-tab> 
       </ons-tabbar> 

       <ons-template id="tab1.html"> 
        <ons-page> 
        <ons-toolbar> 
         <div class="center">Tab 1</div> 
        </ons-toolbar> 

        <p style="text-align: center;"> 
         This is the first tab. 
        </p> 
        </ons-page> 
       </ons-template> 

       <ons-template id="tab2.html"> 
        <ons-page> 
        <ons-toolbar> 
         <div class="center">Tab 2</div> 
        </ons-toolbar> 

        <p style="text-align: center;"> 
         This is the second tab. 
        </p> 
        </ons-page> 
       </ons-template> 
       </ons-page> 
      </ons-template>