SplitterSide
-
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 fromwidth
?)warning.js:36 Warning: Failed prop type: Invalid prop
swipeTargetWidth
of typestring
supplied toSplitterSide
, expectednumber
.
in SplitterSideSplitterSide prop
swipeTargetWidth
should mostly be declared asPropTypes.oneOfType([ PropTypes.string, PropTypes.number, ])
, or description above be corrected.
-
@guirip You’re spot on, thanks. I just fixed it and will merge it to master right away :+1: