Onsen使用导航器和边栏在同一页 [英] Onsen use Navigator and Sidebar On Same Page
问题描述
我是OnsenUI的新人。我试图显示一个使用导航器的页面,我也想在一个页面上有一个边栏。根据文档,这是可能的,但我正在努力让这个工作。我目前有这个:
I'm new to OnsenUI. I'm trying to show a page that uses navigator and I also want to have a sidebar on the same page. According to the documentation, this is possible, but I'm battling to get this to work. I currently have this:
<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>
但是,这不会显示侧边栏或提供侧边栏功能。我找不到任何文档如何做到这一点。任何想法?
However, this does not show the sidebar or provide the sidebar functionality. I cannot find any documentation on how to do this. Any ideas?
推荐答案
是的,这是可能的。以下应为您的index.html内容:
Yes it is possible. The below should be your index.html content:
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>
或查看onsen文档:
http://onsenui.io/guide/components.html#ons-sliding-menu
Or take a look at onsen document at : http://onsenui.io/guide/components.html#ons-sliding-menu
这样,你可以看到他们是如何做到的:
http://codepen.io/ onsen / pen / IDvFJ
With that, you could see how they did it at: http://codepen.io/onsen/pen/IDvFJ
这篇关于Onsen使用导航器和边栏在同一页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!