ons-splitter-side


  • Onsen UI

    The <ons-splitter-side> element is used as a child element of <ons-splitter>. It will be displayed on either the left or right side of the <ons-splitter-content> element. It supports two modes: collapsed and split. When it’s in collapsed mode it will be hidden from view and can be displayed when the user swipes the screen or taps a button. In split mode the element is always shown. It can be configured to automatically switch between the two modes depending on the screen size.

    Click here to see the original article



  • Hello

    How can we open/close the menu from a state/props attribute?

    The component SplitterSide has no attribute to indicate if we want it to be opened or closed. The only way I see is something like this:

            <SplitterSide postclose={actions.closeMenu} ref={ instance => {
                                if (instance) {
                                    let el = ReactDOM.findDOMNode(instance);
                                    if (props.isOpen && !el.isOpen) {
                                        el.open();
                                    } else if (!props.isOpen && el.isOpen) {
                                        el.close();
                                    }
                                }
                            } }>
    

    which is overcomplicated and does not work as well as expected.



  • @guirip220: Forget about it. Works much better when looking at the react section of your documentation!



  • OK, I see what’s wrong with the example.
    The code for the toolbar and the menu icon must be repeated 3 times, in each page separately.
    But, typically a toolbar and a menu item are kept in place and only the rest of the content changes.

    // this is being repeated three times, once in each page! 
        <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>...


  • Bug with tutorial: on latest chrome windows 10, slide app and text right for bigger code section, and code is gone, never to return.

    Wish: a codepen linked from example


  • Onsen UI

    @Moshe-Flam I’m sorry but I don’t understand the issue. If you have any issue with the embedded version perhaps you can check the main tutorial app here.


Log in to reply