Onsen использует навигатор и боковую панель на одной странице

Я новичок в 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>

Однако это не показывает боковую панель и не обеспечивает функциональность боковой панели. Я не могу найти никакой документации о том, как это сделать. Любые идеи?


cordova javascript html onsen-ui
person Marc Steven Plotz    schedule 06.10.2014    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Да, это возможно. Ниже должно быть ваше содержимое 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.

person Vu Nguyen    schedule 06.10.2014