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

OnsenUI

Onsen UI Splitter

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.