CODEWITHSUNDEEP
onsen-ui
Reza
Reza

Reputation: 19903

What is the best practice for combining ons-sliding-menu and ons-split-view

I am developing a mobile app with phonegap and onsen ui.

There are ons-sliding-menu and ons-split-view which works fine separately.

My desire behaviour is showing menu-bar-button when the device is portrait and showing the menu when is on mobile landscape or tablet any orientation.

I have combine them like this

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

<ons-split-view var="app.splitView"
                secondary-page="menu.html"
                main-page="main.html"
                main-page-width="70%"
                collapse="portrait">
</ons-split-view>

.... and this for showing menu-bar-button and toggling menu

<ons-template id="main.html">
    <ons-navigator>

        <ons-page>
            <ons-toolbar fixed-style>
                <div class="left">
                    <ons-toolbar-button ng-click="ons.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
                </div>
                <div class="center">xxx</div>
            </ons-toolbar>

but when I add splitview the sliding-menu-button is not working at all.

Is there any best practice for combining them together?

Upvotes: 1

Views: 800

Answers (1)

Andreas Argelius
Andreas Argelius

Reputation: 3614

You can use the ons-if-orientation directive to switch between the split view and the sliding menu.

<div ons-if-orientation="landscape">
  <ons-split-view
    secondary-page="menu.html"
    main-page="main.html"
    main-page-width="70%"
    collapse="portrait">
  </ons-split-view>
</div>

<div ons-if-orientation="portrait">
  <ons-sliding-menu
    max-slide-distance="200px"
    menu-page="menu.html"
    main-page="main.html">
  </ons-sliding-menu>
</div>

There is a big problem with this approach though. There is actually two DOM trees for the menu and two DOM trees for the main page. So if you make some change to the DOM you will have to do it in two places in order for the pages to be in sync.

Try it out here: http://codepen.io/argelius/pen/XJdabG

Upvotes: 3

Related Questions