Search code examples
slidingmenuonsen-ui

disable onsen-ui sliding menu for login page


I just download onsen-ui 1.2.1 sliding menu template. I'm making login page, but i don't want sliding menu on that page. How could i do it?

<ons-sliding-menu
    menu-page="menu.html" main-page="login.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>

<ons-template id="login.html">
    <ons-page>
        <ons-toolbar>
            <div class="left"></div>
            <div class="center">Log In</div>
            <div class="right"></div>
        </ons-toolbar>
        <div class="login-form">
            <img src="res/icon/android/icon-96.png"/>
            <input type="email" class="text-input--underbar" placeholder="Email" value="">
            <input type="password" class="text-input--underbar" placeholder="Kata Sandi" value="">
            <br><br>
            <ons-button modifier="large" class="login-button">Log In</ons-button>
            <br><br>
            <ons-button modifier="quiet" class="forgot-password">Lupa kata sandi?</ons-button>
            <ons-button modifier="quiet" class="forgot-password">Daftar</ons-button>
        </div>
    </ons-page>
    <ons-modal var="modal_loading_login">
        <ons-icon icon="ion-loading-c" spin="true" ></ons-icon>
    </ons-modal>
</ons-template>

Solution

  • Just use the method setSwipeable(swipeable), using it you can specify if the menu should be swipeable or not.

    For example, supposing that this is your onsen-sliding-menu declaration

    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
    </ons-sliding-menu>
    

    you can add block the scrolling using

    app.slidingMenu.setSwipeable(false)

    Just remember to make it again swipeable after the login.