Onsen2: ons-sliding-menu w/o angular

[luposlip]

Hi there!

Spent some time yesterday moving my an app from Onsen1.x to the new Onsen2 beta.

But then I saw that ons-sliding-menu is angular-only. Do you have any plans on making this work without angular? The primary reason for me to upgrade to Onsen2 is to loose angular.

Thanks!

Best,
Henrik

[argelius]

Hi @luposlip! Thanks a lot for trying out the beta. It's really appreciated :)

Actually we made a decision to create the <ons-splitter> element to replace the <ons-sliding-menu> as well as the <ons-spli-view> elements. Right now there are some features missing that exist for the sliding menu. We will work on adding these missing features.

Is it possible for you to use <ons-splitter> in your app? If you're having some trouble using it, please report it and we can work together to fix it.

The reason we created the <ons-splitter> is to solve some issues users were having. The two biggest issues were:

• Using both <ons-split-view> and <ons-sliding-menu> in the same app.
• Having menus on both the left and right side.

If the demand is high, we will considering releasing a sliding menu component that is not dependent on Angular. However, we prefer improving the <ons-splitter> to make it as good as possible.

[luposlip]

Oh man, I didn't realize the ons-splitter mimics the behaviour of the ons-sliding-menu, also in terms of touch-sliding. But I see it does, now that I've just tested your live demo on a device.

Thanks a bunch, then I don't need the ons-sliding-menu going forward! :)

Closing this issue.

Best,
Henrik

[luposlip]

Well, actually I can't get the ons-splitter to work. I need an example of its usage without Angular. The examples you have are Angular only, and the reference you have on how to use the components without Angular is for Onsen1.x.

Can you supply me with an example of how to use ons-splitter without Angular?

I need:

1: HTML incl. setting the attributes (I use a system where I need well formed HTML, like:

<ons-splitter>
  <ons-splitter-side side="left" collapse="portrait" swipeable="true">
  ...
  </ons-splitter-side id="side">
  <ons-splitter-content>
    <ons-page>...</ons-page>
  </ons-splitter-content>

</ons-splitter>

<ons-template id="main.html">
  <ons-page>...</ons-page>
</ons-template>

2: Javascript for handling opening/closing the splitter/menu, Javascript for handling change of page (with or without templates)

What I have now is a page that looks alright, but I can't seem to get the splitter to react to anything I do. It's also closed by default.

In the browser console I can get the ons-splitter-side with this:

var side = document.getElementById("side")

When I call side.toggle() or side.open() nothing happens. The calls return false.

I've also tried to point the content of ons-splitter-content to a template page with markup like this:

  <ons-splitter-content page="main.html"></ons-splitter-content>

This renders the content area empty.

If you could add such an example here or to your repo, I'd highly appreciate it!

Thanks.

Best,
Henrik

EDIT:

I can get it to work if I put the ons-splitter, ons-splitter-side and ons-splitter-content elements in plain HTML, and then just generate the content with react. But not if I generate the full UI with react (which isn't really that important right now, but it should work I guess?)

[jgauna]

I have this issue too. I've tried everything and the component won't work; also I can't swipe it. Btw, v2 looks awesome!

[luposlip]

Any update on an example using JavaScript only?

[argelius]

@jgauna @luposlip

I made a super simple example.

http://codepen.io/argelius/pen/vLEBPZ

The menu is toggled by selecting the <ons-splitter-side> element and calling the toggle() method:

const toggleMenu = () => {
  document.getElementById('menu').toggle();
};

<ons-toolbar-button 
  onclick="toggleMenu()" 
  modifier="material">
  <ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>

[TheMojoMan]

You can change the content of the splitter view like this:

<script>
  function showPage(page) {
    document.getElementById("splitter").loadContentPage(page);
  };
</script>

<ons-splitter id="splitter">
  <ons-splitter-content page="entry.html"></ons-splitter-content>
  <ons-splitter-side id="menu" side="left" width="150px" swipeable collapse>
    <ons-list>
      <ons-list-item modifier="chevron" onclick="showPage('page1.html');">
        Page 1
      </ons-list-item>
    </ons-list>
  </ons-splitter-side>
</ons-splitter>

<ons-template id="entry.html">
  ... (Content of entry page)
</ons-template>

<ons-template id="page1.html">
  ... (Content of page 1)
</ons-template>

This code loads 'entry.html' at startup. Clicking on the list item in the 'ons-splitter-side' menu changes the content to 'page1.html'.

[luposlip]

I still (2.0.0-rc4) can't .toggle/.close the ons-splitter-side when rendered with react.
I've moved all the menu (ons-list with child ons-list-item's) to react though, and that works sort of OK, except for the issue mentioned in #1414.

[argelius]

@luposlip We made some components for React:

https://github.com/OnsenUI/react-onsenui

Have you tried them out? There is a side menu in this app: http://onsenui.github.io/react-onsenui-kitchensink/demo.html

[asial-matagawa]

Now we have a working VanillaJS example for ons-splitter.
https://onsen.io/v2/docs/js/ons-splitter.html

Closing this.