ons-splitter-side

OnsenUI

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

guirip220

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

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

Moshe Flam

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

Moshe Flam

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

Fran Diox

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

rodrigonsh

Hi! Great framework! Is there any way to fine tune the speed needed in order to init the swipe? If i slowly swipe the screen the splitter doesn’t opens up. Any ideas? THX

ons-splitter-side browsing