Monaca Onsen UI Discord Chat Github Repo

SplitterSide


  • 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

    Regards,

    Jan



  • @JanvB That functionality is missing in the tutorial and I will try to add it later. Here is a working core example: http://tutorial.onsen.io/?framework=vanilla&category=Reference&module=splitter

    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 } />
    		</Page>
    	}
    
    ...
    
    render(){ return (
       <Splitter>
    	 <SplitterSide
    	            side='left'
    	            isOpen={ this.state.isOpen }
    	            onClose={ this.hide.bind( this ) }
    	            onOpen={ this.show.bind( this ) }
                        {/* Other options */}
                        >
    		    <Page>
    			<SideMenu
    				hide={ this.hide }
    				setView={ this.setView }
    			/>
    		    </Page>
    	</SplitterSide>
    	<SplitterContent>
    		<Navigator
    			renderPage={ this.renderPage }
    			initialRoute={ this.state.route }
    		/>
    	</SplitterContent>
        </Splitter>
    

    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 );
    		this.props.hide();
    		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: https://github.com/OnsenUI/react-onsenui/issues/94)



  • 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: