Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Blog
    • Playground
    1. Home
    2. Tags
    3. splitter

    • K

      Navigator inside splitter iOS problem
      Onsen UI • navigator splitter iphone ios • • kk

      2
      0
      Votes
      2
      Posts
      3077
      Views

      @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…
    • L

      Solved ons-splitter disable swipe on left
      Onsen UI • angular 1 splitter onsen swipe • • leorsida

      3
      0
      Votes
      3
      Posts
      4950
      Views

      L

      great! it works with var menuSx = angular.element( document.querySelector( '#sleft' ) ); menuSx.removeAttr('swipeable'); tnx Daniele
    • Y

      Solved Combining Splitter and Navigator with back button.
      Onsen UI • vue navigator splitter vue-onsen bindings • • yeastwrangler

      6
      0
      Votes
      6
      Posts
      8612
      Views

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

      After adding <Splitter> menu, Back button is not showing up in next navigated Page
      Onsen UI • react splitter backbutton • • jabidof

      14
      0
      Votes
      14
      Posts
      15652
      Views

      J

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

      manage splitterSide for use it as reusable component
      Onsen UI • react splitter error splitterside splittercontent • • cyclops24

      12
      0
      Votes
      12
      Posts
      15771
      Views

      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
    • Splitter
      React • react splitter • • OnsenUI

      4
      0
      Votes
      4
      Posts
      4310
      Views

      Z

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

      trouble with tab, splitter and navigation working together
      Onsen UI • navigator splitter tab • • meisam3322

      2
      0
      Votes
      2
      Posts
      4885
      Views

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