React Reference > SplitterSide Component

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

Usage 

<Splitter>
    <SplitterSide
      side="left"
      width={200}
      swipeable={true}>
      <Page> Page Left </Page>
    </SplitterSide>
    <SplitterContent>
      <Page> Page Content </Page>
    </SplitterContent>
    <SplitterSide
      side="right"
      width={300}
      collapse={!this.state.showRight}
      isOpen={this.state.openRight}
      onClose={this.handleRightClose.bind(this)}
      onOpen={this.handleRightOpen.bind(this)}
      swipeable={true}>
      <Page> Page Right </Page>
    </SplitterSide>
  </Splitter>

Props

[improve this]
Name Type Description
collapse union

Specify the collapse behavior. Valid values are "portrait", "landscape" or a media query. The strings "portrait" and "landscape" means the view will collapse when device is in landscape or portrait orientation. If the value is not defined, the view always be in "collapse" mode.

Optional.
swipeable bool Ennable swipe interaction on collapse mode. Optional.
isOpen bool Specifies whether the menu is open. Optional.
onPostOpen func Called after the menu is opened. Optional.
onOpen func DEPRECATED! Use onPostOpen instead. Optional.
onPostClose func Called after the menu is closed. Optional.
onClose func DEPRECATED! Use onPostClose instead. Optional.
side enum Specify which side of the screen the SplitterSide element is located. Possible values are "left" and "right". Optional.
swipeTargetWidth number The width of swipeable area calculated from the edge (in pixels). Use this to enable swipe only when the finger touch on the screen edge. Optional.
width string Specifies the width of the menu. Can be specified in either pixels or as a percentage, e.g. "90%" or "200px". Optional.
animation string Specify the animation. Use one of overlay, push, reveal, or default. Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. Optional.
openThreshold number Specify how much the menu needs to be swiped before opening. A value between 0 and 1. Optional.
onPreOpen func Called before the menu opens. Optional.
onPreClose func Called before the menu closes. Optional.
onModeChange func Called after the component’s mode changes. Optional.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.