@kk Hi! That’s weird, the code seems fine. Can you try replacing the content of ons-splitter-side with normal div tags and see if the onclick is triggered? Didn’t have the chance to test iOS 11 myself yet…

great! it works with

var menuSx = angular.element( document.querySelector( '#sleft' ) ); menuSx.removeAttr('swipeable');

tnx
Daniele

@jmi23 Nest an ons-navigator inside ons-splitter-content and call navigator methods instead of splitter’s load. Example in the tutorial.

@Fran-Diox
I’m hitting some (maybe basic) issue. You mentioned before that the the Splitter should be the parent of Navigator for this to work. But then, how can I pass the APP Navigator instance to the Page within the SplitterSide component?

Am I missing something simple?

J.

@cyclops24: you might consider a more flexible alternative. By that I mean that you manage state via a parent component that automatically gets rerendered whenever you click a new menu item: https://community.onsen.io/topic/821/splitterside/3

@Fran-Diox try setting collapse to false (the boolean value, not a string) and you’ll see that the SplitterSide cannot be closed…

render: function() { return ( <Ons.Splitter> <Ons.SplitterSide style={{ boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' }} side='left' width={200} collapse={false} swipeable={true} isOpen={this.state.isOpen} onClose={this.hide} onOpen={this.show} >

IMO, it should make it not overlaying the SplitterContent but still with keeping the possibility to close / swipe it.

@meisam3322 The same way you have a global splitter you can have a global tabbar. But you need to choose the component hierarchy yourself. This example combines the three components. It’s probably different to what you need, but it may help you to clarify.

These components are just “frames” with a changeable content. You are nesting different frames and you just need to be aware of which frame’s content you should change and which not. In other words, if you change the content of the very first component, the other components will be gone.