溫泉使用導航器和側邊欄在同一頁上

Question

我是OnsenUI的新手。我試圖展示一個使用導航器的頁面，我也希望在同一頁面上有一個側邊欄。根據文件，這是可能的，但我努力爭取這個工作。我目前有：

<ons-sliding-menu var="sidebar" main-page="index.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left"> 
</ons-sliding-menu> 

<ons-navigator title="Navigator" var="mainNavigator"> 
    <ons-page id="home-page"> 
     <ons-toolbar> 
      <div class="center">TITLE</div> 
     </ons-toolbar> 
     <ons-list id="main-list"> 
     </ons-list> 
    </ons-page> 
</ons-navigator> 

<ons-template id="menu.html"> 
    <ons-page> 
     <h1>Sidebar</h1> 
    </ons-page> 
</ons-template> 

但是，這並不顯示側邊欄或提供側邊欄功能。我找不到有關如何執行此操作的任何文檔。有任何想法嗎？

Answer 1

是的，這是可能的。下面應該是您的index.html內容：

的index.html：

<ons-sliding-menu var="sidebar" main-page="main.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left"> 
</ons-sliding-menu> 

<ons-template id="main.html"> 
<ons-navigator title="Navigator" var="mainNavigator"> 
    <ons-page id="home-page"> 
     <ons-toolbar> 
      <div class="center">TITLE</div> 
     </ons-toolbar> 
     <ons-list id="main-list"> 
     </ons-list> 
    </ons-page> 
</ons-navigator> 
</ons-template> 

<ons-template id="menu.html"> 
    <ons-page> 
     <h1>Sidebar</h1> 
    </ons-page> 
</ons-template> 

或者看看溫泉文檔： http://onsenui.io/guide/components.html#ons-sliding-menu

就這樣，你可以看到他們是如何它在： http://codepen.io/onsen/pen/IDvFJ