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


  • Onsen UI

    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



  • 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?


  • Onsen UI

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



  • 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?



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


  • Onsen UI

    @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.


Log in to reply