<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

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.
onOpen func Called after the menu is opened. Optional.
onClose func Called after the menu is closed. Optional.
side enum Specify which side of the screen the SplitterSide element is located. Possible values are "left" and "right". Optional.
swipeTargetWidth union Specifies the width of the menu with a number (for pixels) or a string (e.g. “20%” for percentage). Optional.
width union Specifies the width of the menu with a number (for pixels) or a string (e.g. “20%” for percentage). 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.
mode enum Current mode. Possible values are "collapse" or "split". This attribute is read only. 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.