Onsen UI 2.0 Preview: Responsive Hybrid Apps with the New Splitter Element

[OnsenUI]

The road that will bring us to Onsen UI 2.0 becomes more exciting every day. That’s why we are happy to introduce a new Onsen UI element: The <ons-splitter>!</ons-splitter>

Click here to see the original article

[Dennis Ferreira]

So we attempted to use this as an media query (collapse="(max-device-width: 1600px)" ) seemed to work. Not sure if we are using the media query correctly in the collapse attribute but it seems to work?

[Fran Diox]

@Dennis-Ferreira As stated in the docs, yes, this is correct

[Ulysses Alves]

I’ve tried to follow this tutorial but I couldn’t be able to open the menu programatically. The menu opens good when I swipe my finger to the right, but when I call the code document.querySelector(‘ons-splitter’).toggleLeft() I get this error: “Uncaught TypeError: document.querySelector(…).toggleLeft is not a function”. So I can’t open the menu when the user clicks in a menu button, because that error occurs on the click event of my button. Do you have any suggestions on how I can fix this?

[munsterlander]

@Ulysses-Alves I believe this was replaced with just toggle. Try that.

[Fran Diox]

@Ulysses-Alves @munsterlander This was released during v2 beta and it changed a little bit for the final release. The main ons-splitter only has properties to access ons-splitter-side and ons-splitter-content. Have a look at the reference for those elements.