如何在Onsen-UI的页面两边实现两个幻灯片菜单? [英] How to implement two slide-menu on both sides of a page in Onsen-UI?

问题描述

我是Onsen-UI的新手，并且希望页面的两边都有幻灯片菜单.我打算有多个具有此功能的页面，但不知道如何实现.最好的方法是什么?

解决方案

您必须像这样嵌套两个不同的ons-sliding-menu:

<ons-sliding-menu
        main-page="page"
        menu-page="menu-left.html"
        side="left" ...>
</ons-sliding-menu>

<ons-template id="page">
    <ons-sliding-menu
            main-page="content.html"
            menu-page="menu-right.html"
            side="right" ...>
    </ons-sliding-menu>
</ons-template>

<ons-template id="menu-left.html"> ... </ons-template>
<ons-template id="menu-right.html"> ... </ons-template>
<ons-template id="content.html"> ... </ons-template>

在这里工作: http://codepen.io/onsen/pen/qHeJx

希望它会有所帮助:)

I'm new to Onsen-UI and would like to have slide-menus on both sides of my page. I intend to have multiple pages that will have this functionality and dont know how I can implement that. What is the best way to do that?

解决方案

You have to nest two different ons-sliding-menu like this:

<ons-sliding-menu
        main-page="page"
        menu-page="menu-left.html"
        side="left" ...>
</ons-sliding-menu>

<ons-template id="page">
    <ons-sliding-menu
            main-page="content.html"
            menu-page="menu-right.html"
            side="right" ...>
    </ons-sliding-menu>
</ons-template>

<ons-template id="menu-left.html"> ... </ons-template>
<ons-template id="menu-right.html"> ... </ons-template>
<ons-template id="content.html"> ... </ons-template>

Working here: http://codepen.io/onsen/pen/qHeJx

Hope it helps :)

这篇关于如何在Onsen-UI的页面两边实现两个幻灯片菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！