Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.


  • Onsen UI

    The SplitterContent element is used as a child element of Splitter. It contains the main content of the page while SplitterSide contains the list.

    Click here to see the original article

  • Hi,

    You provide a very nice interactive tutorial.

    Currently I am working on an app that contains a side menu. The setup is similar to the example provided in the tutorial (the navigation icon is located top-left). It is not clear to me how I should construct the navigation from the menu. Since this feature is not implemented in the tutorial for React, I was hoping that you can provide one.

    Use case:

    • User opens the side menu
    • Clicks a menu item
    • The contents of the SplitterContent component changes to that associated with the menu item that was clicked; the menu item icon should remain available in the top left corner

    Many thanks



  • @JanvB That functionality is missing in the tutorial and I will try to add it later. Here is a working core example:

    In short, you use the load method to push a page to the navigation stack.

  • @munsterlander: thank you. I managed to do it differently with three components (parent and 2 child components ( <SideMenu> and <Navigator> ). In short:

    {/* Parent component with initialroute */}
    class Main extends Component {
            constructor( props ){
    		super( props );
    		this.state = { 
    					isOpen: false,
    					route: { component: Home, key: "HOME_PAGE" } 
    		this.hide = this.hide.bind( this );
    		this.setView = this.setView.bind( this );
    		this.renderPage = this.renderPage.bind( this );
    	renderPage( route, navigator ){
    		return <Page
    			renderToolbar={ this.renderToolbar.bind( this ) }
    			renderFixed={ this.renderFixed.bind( this ) }
    		  <this.state.route.component key={ this.state.route.key } navigator={ navigator } { ...route.props } />
    render(){ return (
    	            isOpen={ this.state.isOpen }
    	            onClose={ this.hide.bind( this ) }
    	            onOpen={ this ) }
                        {/* Other options */}
    				hide={ this.hide }
    				setView={ this.setView }
    			renderPage={ this.renderPage }
    			initialRoute={ this.state.route }

    Then in the <SideMenu> component you can alter the parents state via the setView function (accessible via this.props.setView):

    	{ /* Each menu-item has an id ('idx' ). MetuData is an array of objects defined outside of the React component:
            const menuData = [
      	  { index: 1, title: "Home",  key: "HOME_PAGE", component: Home },
      	  { index: 2, title: "Page1", key: "PAGE1", component: Page1 },
      	  { index: 3, title: "Page2", key: "PAGE2", component: Page2 },
      	  { index: 4, title: "Page3", key: "PAGE3", component: Page3 }
           The child component manages the parent state (in this example you import the Pages1/2/3 components in the <SideMenu> component).
           */ }
    export class SideMenu extends Component {
    	constructor( props ){
    		super( props );
    		this.setRoute = this.setRoute.bind( this );
           setRoute( idx ){
    		const { component, key } = menuData.find(  ( item ) => item.index === idx );
    		return this.props.setView( component, key );

    Because of the state changes, React will rerender the parent component. It is probably a more React-style way of implementing this. (I already had this, it wasn’t working because I didn’t have to latest version of the react-onsenui package installed - there was an issue with the <Navigator> component:

  • swipeTargetWidth description seems erroneous (duplicated description from width ?)

    warning.js:36 Warning: Failed prop type: Invalid prop swipeTargetWidth of type string supplied to SplitterSide, expected number.
    in SplitterSide

    SplitterSide prop swipeTargetWidth should mostly be declared as PropTypes.oneOfType([ PropTypes.string, PropTypes.number, ]), or description above be corrected.

  • Onsen UI

    @guirip You’re spot on, thanks. I just fixed it and will merge it to master right away :+1: