0 votes
in Onsen UI by
Creating Menu - Splitter Component in Onsen UI

1 Answer

0 votes
by
In onsen, you can create a side menu using this component.

Either it can be rendered as a column next to the main content or can be a swipe menu.

The swipe menu is hidden from the view which is prefered in devices with small screen.

Apart from <Spliter>, two other components are needed to create a complete menu. They are <SplitterSide> and <SplitterContent>.

SplitterSide Component

This decides whether the menu is rendered as a column or a swipe menu

The collapse property of this component is set to true to make it swipe

You can make the menu accessable just by tapping instead of swiping using the property isSwipeable

The menu is opened and closed by setting isOpen property to true or false respectively

onOpen & onClose property helps in executing any function once the menu is opended or closed respectively

SplitterContent Component

The content that has to be displayed on screen beside menu should be included within this component. A <Page> component should be present as a child component to this component. The Hiearchy will be:

<Splitter>

  <SplitterContent>

    <Page>

      //Content to be displayed

    </Page>

  </SplitterContent

</Splitter>

This will render a swipable menu in the screen with options that are created with list.

// some code

  render: function() {

    return (

      <Ons.Splitter><Ons.SplitterSide

          style={{

          boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'}}

          side='left' width={200} collapse={true} isSwipeable={true}

          isOpen={this.state.isOpen} onClose={this.hide} onOpen={this.show}>

          <Ons.Page><Ons.List

              dataSource={['Angular', 'ReactJS', 'Onsen']}

              renderRow={(title) => (

                <Ons.ListItem key={title} onClick={this.hide} tappable>{title}</Ons.ListItem>)}            />

          </Ons.Page>  </Ons.SplitterSide>

        <Ons.SplitterContent>

          <Ons.Page renderToolbar={this.renderToolbar}>

            <section style={{margin: '16px'}}>

              <p>Swipe to open the menu</p>

            </section>

          </Ons.Page>

        </Ons.SplitterContent>

      </Ons.Splitter>

    );  }});

//some code

Related questions

0 votes
asked Feb 7, 2020 in Onsen UI by DavidAnderson
0 votes
0 votes
0 votes
asked Feb 7, 2020 in Onsen UI by DavidAnderson
...